ToggleSwitch has a strange MinWidth

[iurycarlos]

Current behavior

Using a toggle switch inside an Autolayout with SpaceBetween uncovered that ToggleSwitch has a MinWidth set and it is causing alignment issues:

https://playground.platform.uno/#b80b413a

Expected behavior

The link above has a forced expected result using a MinWidth and the second result is the original and wrong one.

How to reproduce it (as minimally and precisely as possible)

Just use the provided link.

Environment

Nuget Package:

Package Version(s):

Affected platform(s):

• iOS
• Android
• WebAssembly
• UWP
• MacOS

Anything else we need to know?

[iurycarlos]

[eriklimakc]

This affects the Figma Plugin release.

This is actually an Uno issue and also affects the Fluent ToggleSwitch. The MinWidth="154" is defined in:

• Uno.UI/UI/Xaml/Style/Generic/SystemResources.xaml#L3972

• Uno.UI.FluentTheme.v1/themeresources_v1.xaml#L19731

• Uno.UI.FluentTheme.v2/themeresources_v2.xaml#L23315

Repro in Playground: http://playground.platform.uno/#ccfdf8c8

Would the fix be removing the MinWidth from Uno? On WinUI/UWP we don't have the MinWidth issue.

@iurycarlos @jeromelaban @kazo0

[iurycarlos]

IMO that will solve the case.
I can't see how a minWidth could be mandatory situations like that.

[Xiaoy312]

it is like that, because we inherited that style from winui directly:
https://github.com/microsoft/microsoft-ui-xaml/blob/v2.8.5/dev/CommonStyles/ToggleSwitch_themeresources_v1.xaml#L195

relevant issue: microsoft/microsoft-ui-xaml/issues/3652
not sure how on windows, how it is currently fixed..?

[iurycarlos]

On windows, it shows a label (on / off) and it is affected by localization. Here i receive Ligado / Desligado.
Probably it is related to that label.

[Xiaoy312]

can you check the layout constraints with TreeGraph and compare the result between windows vs one of our platforms?
TreeGraph from uno is uno-only, so to be able to use it for windows, you need to grab the all-targets version from: https://github.com/unoplatform/uno.toolkit.ui/blob/4.2.0/src/Uno.Toolkit.UI/Helpers/VisualTreeHelperEx.cs
for the "layout constraints" i mentioned, you need to uncomment: https://github.com/unoplatform/uno.toolkit.ui/blob/4.2.0/src/Uno.Toolkit.UI/Helpers/VisualTreeHelperEx.cs#L211C5-L211C122

[eriklimakc]

Hmm, it does affect Windows. But only for Fluent styles:

<StackPanel>
	<TextBlock Text="Fluent" />
	<StackPanel Orientation="Vertical" Spacing="10" Margin="10">
		<ToggleSwitch IsOn="True" MinWidth="53" Background="Red" />
		<ToggleSwitch IsOn="True" Background="Red" />
		<ToggleSwitch IsOn="True" Background="Red" MinWidth="154" />
	</StackPanel>

	<TextBlock Text="Material" />
	<StackPanel Orientation="Vertical" Spacing="10" Margin="10">
		<StackPanel.Resources>
			<MaterialTheme xmlns="using:Uno.Material" />
		</StackPanel.Resources>
		<ToggleSwitch IsOn="True" MinWidth="53" Background="Red" />
		<ToggleSwitch IsOn="True" Background="Red" />
		<ToggleSwitch IsOn="True" Background="Red" MinWidth="154" />
	</StackPanel>
</StackPanel>

@Xiaoy312 @iurycarlos

[eriklimakc]

Tested the Material ToggleSwitch:

Between Skia.GTK and UWP the only constraint that is different is the first one which is:

• Skia.Gtk: Constraints=[154,NaN,∞]x[0,NaN,∞]

• UWP: Constraints=[0,NaN,∞]x[0,NaN,∞]

Apart from that other values for Actual also varies between GTK and UWP.

You can see the whole TreeGraph comparassion here https://www.diffchecker.com/x1dQjV3U/. Skia is first UWP is second.

@Xiaoy312 @iurycarlos

Skia vs UWP treegraph - Diff Checker

Skia vs UWP treegraph - ToggleSwitch#MyToggleSwitch // Actual=0x0, Constraints=[154,NaN,∞]x[0,NaN,∞], HV=Left/Center, Corner

[eriklimakc]

Can/Should we workaround this with a <Setter Property="MinWidth" Value="0" /> in the Material ToggleSwitch style to unblock the Figma Plugin?

cc @Xiaoy312 @kazo0 @iurycarlos

[iurycarlos]

I agree with Erik.

IMHO, I think we should override the native minWidth to force the control follow Material / Cupertino behaviors.
And we should let Fluent (for all platforms) exactly as native (windows) works.

All design systems will be fine.

[eriklimakc]

It also affects Cupertino:

[kazo0]

We can set ToggleSwitchThemeMinWidth to whatever value we want in our theme dictionary inside of ToggleSwitch.xaml, right? So if we were to set that to 0, would we avoid this?

@eriklimakc