Changing the position of window previews/tray overflow menu

[drake-lol]

I have been working on a dock layout for my taskbar that combines the tray and icons into one panel. Everything works good except for the tray overflow menu and the window previews being too far to the left. How would I go about adjusting the position for those?

[drake-lol]

My settings are
{"theme":"DockLike","resourceVariables[0].variableKey":"","resourceVariables[0].value":"","controlStyles[0].target":"Taskbar.TaskbarFrame#TaskbarFrame > Grid#RootGrid","controlStyles[0].styles[0]":"Margin=0,1,0,3","controlStyles[0].styles[1]":"CornerRadius=22","controlStyles[0].styles[2]":"BorderThickness=5","controlStyles[0].styles[3]":"BorderBrush:=Transparent","controlStyles[1].target":"Grid#SystemTrayFrameGrid","controlStyles[1].styles[0]":"Margin=-1325,1,-615,3","controlStyles[2].target":"Windows.UI.Xaml.Controls.Grid","controlStyles[2].styles[0]":"HorizontalAlignment=Center","controlStyles[0].styles[4]":"Grid.Row=0","controlStyles[0].styles[5]":"Padding=7,0,200,0","controlStyles[1].styles[1]":"Background=Transparent","controlStyles[1].styles[2]":"FlowDirection=0","controlStyles[3].target":"SystemTray.DateTimeIconContent","controlStyles[3].styles[0]":"Canvas.ZIndex=1","controlStyles[4].target":"Taskbar.TaskListButton","controlStyles[4].styles[0]":"CornerRadius=360","controlStyles[5].target":"Taskbar.ExperienceToggleButton","controlStyles[5].styles[0]":"CornerRadius=360"}

[bbmaster123]

the issue here is the HorizontalAlignment=Center, if you remove that, it should fix the problem.
let me know if that helps :)

[SandTechStuff]

This is the style that is causing the problem:
Target: Windows.UI.Xaml.Controls.Grid
Style: HorizontalAlignment=Center

The target you choose is applying HorizontalAlignment=Center to every single Grid element there is. This has unintended consequences, such as the preview and tray overflow misalignment.

I haven't found the exact Grid element to apply HorizontalAlignment=Center to that retains the original look you are going for, but searching with UWPSpy for Grid elements should lead you in the right direction.

Another solution may be to figure out what Grid element the tray overflow and previews rely on, and setting styles to override the universal HorizontalAlignment=Center on those Grid elements only.

[SeagulltheIV]

This looks sick. Can we get this as a theme with everything working well? I tried the config out and there is another issue where if you have windows defender or some other app icons on the status tray, they kind of merge with the pinned application on the taskbar.
I wish I knew how to fix all this but I just got into coding this month and am doing the freeCodeCamp course. So I feel very overwhelmed by everything. Heck, it even took a whole hour just to learn how to apply the config to my Windhawk.

Will come back to this after I become a bit more knowledgeable. And if no one else does the work by that time.

[bbmaster123]

@SeagulltheIV
I'd be happy to try fixing any outstanding issues.

I do have a tutorial with step by step instructions & pictures you can use to help get started styling things, but it was offline all last week due to my account accidently getting flagged by github's automated system. You can see it here

Luckily, you don't need to know much about coding to do any of this in the styler mods. There is a certain amount of xaml style code, but no logic/code behind, and no other languages unless you plan to write a whole new mod down the road. I'm sure you'll learn a lot more overall from your coding course than by styling your taskbar with windhawk alone.

If you get stuck at any point you can create a new issue, and we'll be happy to help :)
In the meantime, I'll see what I can do regarding the tray and post back here when there's some progress.

cheers :)

[SeagulltheIV]

@bbmaster123
Thank you so much for the words of encouragement and the helpful response.

I will be looking into the tutorial right away and not use my lack of knowledge as an excuse. I keep hearing I should just jump in when it comes to computers and I will never learn if I don't try. I am trying to put that to practice.

Thanks again for the offer to help if I get stuck. It is really reassuring.

Have a good one.

[bbmaster123]

Hm, definitely tricky to fix this completely, I've got it looking and behaving alright for the most part. task list and tray now stay separated, even with lots of apps open, and up to 6 tray icons (maybe more, havent tested past 6 icons yet)

I'm running a little low on time so I'll have to come back to this, but here's what I've got so far:

{
  "theme": "DockLike",
  "controlStyles[0].target": "Taskbar.TaskbarFrame#TaskbarFrame > Grid#RootGrid",
  "controlStyles[0].styles[0]": "Margin=0,4,0,4",
  "controlStyles[0].styles[1]": "CornerRadius=22",
  "controlStyles[1].target": "Grid#SystemTrayFrameGrid",
  "controlStyles[1].styles[0]": "Margin=-570,8,570,8",
  "controlStyles[1].styles[1]": "Background=Transparent",
  "controlStyles[2].target": "Taskbar.TaskListButton",
  "controlStyles[2].styles[0]": "CornerRadius=360",
  "controlStyles[3].target": "Taskbar.ExperienceToggleButton",
  "controlStyles[3].styles[0]": "CornerRadius=360",
  "controlStyles[4].target": "Microsoft.UI.Xaml.Controls.ItemsRepeater",
  "controlStyles[0].styles[2]": "MinWidth=150",
  "controlStyles[0].styles[3]": "Width=Auto",
  "controlStyles[1].styles[2]": "BorderThickness=0",
  "controlStyles[4].styles[0]": "Width=800",
  "controlStyles[1].styles[3]": "Padding=0,0,10,0"
}

[SeagulltheIV]

That was so quick! Thank you so much bbmaster123. This will also help me a lot in learning how to tweak things on my own. I think this deserves to be added to the main page as an option or suboption for docklike.

[bbmaster123]

@SeagulltheIV
anytime :)

You know what, turns out there's an existing, "shockingly" similar theme by Vinstar called Windows-11-Centered-Taskbar

Its not identical, but I think it might be worth comparing this dock to his, maybe combine them if it improves anything.

I think this deserves to be added to the main page as an option or suboption for docklike

Yea we could do that! We could have it as a variant of Docklike, its already set up like that since its base is Docklike with extra styles added. Otherwise, I could spend a bit making it into a standalone theme and call it something like uniDock or something

EDIT: Add this to fix apps list overflow background:

Border#HoverFlyoutBackground
Background=Color

Unfortunately acrylicbrush seems to lose its color after 1 or 2 clicks on the overflow button (3 dots), but other brushes seem to work correctly.

cheers!

[SeagulltheIV]

Oh wow! That is quite similar. But I think yours looks a bit better.

I love the idea of UniDock. You won't hear me say no to that.

Yeah, the current version does have some quirks to iron out but for something done in a small amount of time, it is a great foundation.