Styling multi-window parent buttons separately from single window taskbar buttons

[chocmake]

I'm attempting to style the taskbar buttons similarly to how I had them in W8.1 and W10, with minimal margins between the buttons and minimal padding. I'm starting from the None theme basis in the mod's settings and adding custom styles.

I've been able to adjust the button margins using a target of Taskbar.TaskListButton with a style of:

Margin=0,0,0,0
Width=32

And adjust the icon position within the buttons via a target of Taskbar.TaskListButton#TaskListButton > Taskbar.TaskListLabeledButtonPanel#IconPanel > Windows.UI.Xaml.Controls.Image#Icon and a style of:

Margin-12,0,0,0

---

However when a taskbar button has multiple windows it adds those extra UI bars beneath the taskbar button to indicate there are multiple windows, which get truncated/hidden when forcing the Width (height, when rotated via the vertical taskbar mod) above. So it'd be nice if such buttons could have a separate width applied (or similar).

I can see in UWPSpy that such multi-window buttons have an inner element that indicates it's a multi-window button (Windows.UI.Xaml.Controls.Border#MultiWindowElement) but not sure what (if any) selector can be used to target parent buttons that contain an element within them, to be able to style it separately.

Any pointers would be appreciated.

---

GIF showing toggling the Width value to show how multi-window buttons have the bars truncated:

[m417z]

I can see in UWPSpy that such multi-window buttons have an inner element that indicates it's a multi-window button (Windows.UI.Xaml.Controls.Border#MultiWindowElement) but not sure what (if any) selector can be used to target parent buttons that contain an element within them, to be able to style it separately.

There's no such selector, but have you looked into visual states? You can start from reading about them in the mod's description, and then looking at examples in existing themes.

[chocmake]

Thanks. Experimented a bit with those. Looking at UWPSpy's Visual states tab it looks like the visual states seem to only be supported on the inner Taskbar.TaskListLabeledButtonPanel element so that's what I tried styling.

Judging from CommonStates it seems each multi-window vs single window button style is split into separate active item + non-active item states in addition to normal/mouse over/mouse click states. Couldn't determine a baseline state that would allow defining a single style to be inherited for multiple states, so presumably multiple sets of target-style values would have to be defined.

But did see that MarginStates OTOH simply have a NormalMargin and NormalMultiWindowMargin state allowing targeting single window and multi-window buttons separately regardless of active/inactive or mouse action, however while I could get Margin and Padding values to change I couldn't get Width to change.

Targets I tried:

Taskbar.TaskListButton > Taskbar.TaskListLabeledButtonPanel@MarginStates
Taskbar.TaskListButton#TaskListButton > Taskbar.TaskListLabeledButtonPanel#IconPanel@MarginStates

And the styles tried:

Width@MultiWindowMargin=32
Width@NormalMargin=32
Width=32

But none affected the width value (per UWPSpy) which remained at 44. Yet changing the Background did work in a test with Background@NormalMargin=#000000 for example.

Am I missing something with how to affect with the button dimensions/why width isn't being changed for this element? Initially I would have thought Padding would do what I need but it behaves more like Margin.

---

Edit: tried @CommonStates instead of @MarginStates for the target and a style of Width@InactiveNormal=32 (indicated by UWPSpy as being the current state of one of the buttons) but the width didn't change either, so not sure.

[chocmake]

Bit of progress. Styling the BackgroundElement child element allowed affecting the width properly, while auto centering the sibling Icon without the need for manual offsets. Then the parent Taskbar.TaskListButton margin controls the inter-button spacing simply.

Though it's a bit of a step back in terms of being able to adjust the multi-window parent margin separately, since if changing the parent margin one loses the distinguishing single vs multi-window selector, while if instead one changes the margins via the child TaskListLabeledButtonPanel it has unexpected results when the width has been changed of the BackgroundElement.

The main problem is in W8.1/W10 the vertical taskbar multi-window indicator is positioned to the sides of the button, rather than beneath it, so it avoids any issue with inter-button spacing/margins, eg:

Current W11 style:

Tried adding Rotation=90 to the BackgroundElement just to check if perhaps rotating the elements might be feasible (since it had an existing value of 0) but it crashed explorer.