Toggle button missaligned

[Nicols0Mart]

Hello there, I have a problem where the toggle buttons of the wifi and bluetooth submenus in the action center are misplaced the first time I open them. I'm using Windows 24H2 build 26100.2152.

Here you can see how they render misplaced to the left:

Still, when closing and reopening the submenu, the toggle renders correctly the second time as shown below:

The following is my configuration for the mod:

{
  "controlStyles[0].target": "Grid#NotificationCenterGrid",
  "controlStyles[0].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
  "controlStyles[1].target": "Grid#CalendarCenterGrid",
  "controlStyles[1].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
  "controlStyles[2].target": "ScrollViewer#CalendarControlScrollViewer",
  "controlStyles[2].styles[0]": "Background:=<AcrylicBrush Opacity=\"0\"/>",
  "controlStyles[3].target": "Border#CalendarHeaderMinimizedOverlay",
  "controlStyles[3].styles[0]": "Background:=<AcrylicBrush Opacity=\"0\"/>",
  "controlStyles[4].target": "ActionCenter.FocusSessionControl#FocusSessionControl > Grid#FocusGrid",
  "controlStyles[4].styles[0]": "Background:=<AcrylicBrush Opacity=\"0\"/>",
  "controlStyles[5].target": "MenuFlyoutPresenter",
  "controlStyles[5].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
  "controlStyles[6].target": "Border#JumpListRestyledAcrylic",
  "controlStyles[6].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
  "controlStyles[7].target": "Grid#ControlCenterRegion",
  "controlStyles[7].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
  "controlStyles[8].target": "Windows.UI.Xaml.Controls.Grid#L1Grid > Border",
  "controlStyles[8].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
  "controlStyles[9].target": "Windows.UI.Xaml.Controls.Grid#MediaTransportControlsRegion",
  "controlStyles[9].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
  "controlStyles[10].target": "Grid#MediaTransportControlsRoot",
  "controlStyles[10].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
  "controlStyles[11].target": "ContentPresenter#PageContent",
  "controlStyles[11].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
  "controlStyles[12].target": "ContentPresenter#PageContent > Grid > Border",
  "controlStyles[12].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
  "controlStyles[13].target": "QuickActions.ControlCenter.AccessibleWindow#PageWindow > ContentPresenter > Grid#FullScreenPageRoot",
  "controlStyles[13].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
  "controlStyles[14].target": "QuickActions.ControlCenter.AccessibleWindow#PageWindow > ContentPresenter > Grid#FullScreenPageRoot > ContentPresenter#PageHeader",
  "controlStyles[14].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
  "controlStyles[15].target": "ScrollViewer#ListContent",
  "controlStyles[15].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
  "controlStyles[16].target": "ActionCenter.FlexibleToastView#FlexibleNormalToastView",
  "controlStyles[16].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
  "controlStyles[17].target": "Border#ToastBackgroundBorder2",
  "controlStyles[17].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
  "controlStyles[0].styles[1]": "BorderThickness=0,0,0,0",
  "controlStyles[1].styles[1]": "BorderThickness=0,0,0,0",
  "controlStyles[5].styles[1]": "BorderThickness=0,0,0,0",
  "controlStyles[6].styles[1]": "BorderThickness=0,0,0,0",
  "controlStyles[7].styles[1]": "BorderThickness=0,0,0,0",
  "controlStyles[9].styles[1]": "BorderThickness=0,0,0,0",
  "controlStyles[17].styles[1]": "BorderThickness=0,0,0,0",
  "controlStyles[6].styles[2]": "Margin=-2,-2,-2,-2"
}

[bbmaster123]

I can't reproduce the issue. Your style configuration is missing the backslashes in xaml targeting, as in when using brushes, so I had to add those in myself to test your config. here's your cleaned up config:

{
"controlStyles[0].target": "Grid#NotificationCenterGrid",
"controlStyles[0].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
"controlStyles[0].styles[1]": "BorderThickness=0,0,0,0",
"controlStyles[1].target": "Grid#CalendarCenterGrid",
"controlStyles[1].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
"controlStyles[1].styles[1]": "BorderThickness=0,0,0,0",
"controlStyles[2].target": "ScrollViewer#CalendarControlScrollViewer",
"controlStyles[2].styles[0]": "Background:=<AcrylicBrush Opacity=\"0\"/>",
"controlStyles[3].target": "Border#CalendarHeaderMinimizedOverlay",
"controlStyles[3].styles[0]": "Background:=<AcrylicBrush Opacity=\"0\"/>",
"controlStyles[4].target": "ActionCenter.FocusSessionControl#FocusSessionControl > Grid#FocusGrid",
"controlStyles[4].styles[0]": "Background:=<AcrylicBrush Opacity=\"0\"/>",
"controlStyles[5].target": "MenuFlyoutPresenter",
"controlStyles[5].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
"controlStyles[5].styles[1]": "BorderThickness=0,0,0,0",
"controlStyles[6].target": "Border#JumpListRestyledAcrylic",
"controlStyles[6].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
"controlStyles[6].styles[1]": "BorderThickness=0,0,0,0",
"controlStyles[6].styles[2]": "Margin=-2,-2,-2,-2",
"controlStyles[7].target": "Grid#ControlCenterRegion",
"controlStyles[7].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
"controlStyles[7].styles[1]": "BorderThickness=0,0,0,0",
"controlStyles[8].target": "Windows.UI.Xaml.Controls.Grid#L1Grid > Border",
"controlStyles[8].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
"controlStyles[9].target": "Windows.UI.Xaml.Controls.Grid#MediaTransportControlsRegion",
"controlStyles[9].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
"controlStyles[9].styles[1]": "BorderThickness=0,0,0,0",
"controlStyles[10].target": "Grid#MediaTransportControlsRoot",
"controlStyles[10].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
"controlStyles[11].target": "ContentPresenter#PageContent",
"controlStyles[11].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
"controlStyles[12].target": "ContentPresenter#PageContent > Grid > Border",
"controlStyles[12].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
"controlStyles[13].target": "QuickActions.ControlCenter.AccessibleWindow#PageWindow > ContentPresenter > Grid#FullScreenPageRoot",
"controlStyles[13].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
"controlStyles[14].target": "QuickActions.ControlCenter.AccessibleWindow#PageWindow > ContentPresenter > Grid#FullScreenPageRoot > ContentPresenter#PageHeader",
"controlStyles[14].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
"controlStyles[15].target": "ScrollViewer#ListContent",
"controlStyles[15].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
"controlStyles[16].target": "ActionCenter.FlexibleToastView#FlexibleNormalToastView",
"controlStyles[16].styles[0]": "Background:=<SolidColorBrush Color=\"Transparent\"/>",
"controlStyles[17].target": "Border#ToastBackgroundBorder2",
"controlStyles[17].styles[0]": "Background:=<AcrylicBrush TintColor=\"Black\" TintOpacity=\"0.5\" />",
"controlStyles[17].styles[1]": "BorderThickness=0,0,0,0"
} 

Once I got your config to work, I didn't see anything misaligned but I'll have to try it again tomorrow on the pc with wifi

[Nicols0Mart]

Your style configuration is missing the backslashes in xaml targeting, as in when using brushes, so I had to add those in myself to test your config

Indeed sorry, I pasted the json in a "quote" block in the github comment and it formated it removing the backslaches, my bad. Should have pasted it like a code block. Will edit the original issue message.

Once I got your config to work, I didn't see anything misaligned but I'll have to try it again tomorrow on the pc with wifi

Let me know if you can reproduce this

[bbmaster123]

Indeed sorry, I pasted the json in a "quote" block in the github comment and it formated it removing the backslaches, my bad. > Should have pasted it like a code block. Will edit the original issue message.

ohhh that's why that keeps happening! ok cool now I have an explanation :)

So yes, I am able to reproduce this on 22631, and additionally it happens without any targets or styles set, but not with the mod disabled. I can trigger the issue by killing shellexperiencehost.exe (shellhost.exe on 24h2)
Maybe partly related to the cutoff apps list in the start menu styler? @m417z

[m417z]

Looks like it's a side effect of the XAML Diagnostics API, I can reproduce it with just UWPSpy. XAML Diagnostics cause some unpleasant side effects sometimes, and this one isn't the worst, for the taskbar it causes crashes in some cases, which is unfortunate.

I don't plan on trying to fix it. I tried to find a workaround for the taskbar crashes, but gave up after some time due to its complexity.

For this specific issue, if it bothers you, I suggest to just create a style that fixes it, it shouldn't be difficult.

[Nicols0Mart]

For this specific issue, if it bothers you, I suggest to just create a style that fixes it, it shouldn't be difficult.

I've been messing around a bit with UWSpy, I settled in adding the following to my style:

Target: Windows.UI.Xaml.Controls.ContentControl#PageHeaderContentControl Style: Width=64

I don't know if this is the best solution but it seems to work. There is still something weird going in on where the switch itself is not entirely the same the first time, the border is a bit wider and the knob is smaller. Though position is fixed.

[bbmaster123]

@Nicols0Mart
good to hear!
It may also help to set a few more styles like margin, padding borderthickness, etc
especially if by default it is set to Auto in UWPspy
Let me know! :)