ToggleSwitch control internally sets a MinWidth to 154, which is way larger than its default width

[jbrianceau]

Describe the bug
The ToggleSwitch control template sets the MinWidth of one of its internal Grid to 154, through the following resource:

<x:Double x:Key="ToggleSwitchThemeMinWidth">154</x:Double>

Because of that, if you put a ToggleSwitch control in a column of a Grid having its ColumnDefinition width set to Auto, the column won't adjust to the size of the ToggleSwitch by default.
I tried to redefine ToggleSwitchThemeMinWidth resource in many places of my application to try to override it without success.

Note that this issue can be mitigated with one of the following workarounds, but this is not ideal:

• Set the Width property of the ToggleSwitch control to a fixed value
• Retemplate the whole ToggleSwitch

Steps to reproduce the bug
For instance, put the following XAML code in a sample page:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <TextBlock Text="Here is a TextBlock" />
    <ToggleSwitch Grid.Column="1" />
</Grid>

Expected behavior
I would expect the ToggleSwitch control to be aligned on the right of the grid.

Screenshots
Instead, there is a lot of wasted space on the right, as you can see in the following screenshot:

Version Info

NuGet package version:
[Microsoft.UI.Xaml 2.4.3]

Windows app type:

UWP	Win32
Yes

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
20H2 (19042)	Yes
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context

[StephenLPeters]

I tried to redefine ToggleSwitchThemeMinWidth resource in many places of my application to try to override it without success.

This is weird, overriding this resource should work from any parent of the toggle switch. Can you try doing it in your App.xaml?

The template for toggle switch does seem weird, there should probably be a setter in the style targetting the minwidth property that sets it to this and then we should template bind the toggle switches min width to this template part.

The reason that this was done is likely to maintain accessible compliant touch targets, you can see similar things with the checkbox and radio button templates, however they do the template binding thing I described above.

[jbrianceau]

Can you try doing it in your App.xaml?

It also doesn't work unfortunately. Note that I've tried to perform the override before or after referencing <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" /> and it doesn't work both ways.

[marcelwgn]

I would like to work on this. I think the @StephenLPeters proposed solution seems the best for this.

[mdtauk]

I would like to work on this. I think the @StephenLPeters proposed solution seems the best for this.

Is this a value affected by the localisation text for On and Off?

[marcelwgn]

Is this a value affected by the localisation text for On and Off?

I don't think so.

[nkasco]

This still appears to be an issue, setting MinWidth to 0 does resolve it. Very odd and unexpected.

[StephenLPeters]

@nkasco are you setting the property on toggle switch or the resource ToggleSwitchThemeMinWidth?

[nkasco]

@nkasco are you setting the property on toggle switch or the resource ToggleSwitchThemeMinWidth?

On the Toggle Switch XAML directly:
<ToggleSwitch Name="SettingStartupBehavior" HorizontalAlignment="Right" Grid.Column="1" OffContent="" OnContent="" MinWidth="0"/>

[ojhad]

@nkasco what version of WinUI are you using?

[petercoin]

I've also found this issue with WindowsAppSDK v1.0.3.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[mdtauk]

I think this is still an Issue.

[yki5000]

Still an issue in 1.3.230724000.

[mibrito707]

To not have the default larger MinWidth is better to set it to 0, you can control the value in 2 ways:

• overriding ToggleSwitchThemeMinWidth resource in any parent control, like in your App.xaml <x:Double x:Key="ToggleSwitchThemeMinWidth">0</x:Double>
• or setting MinWidth directly in the ToogleSwitch <ToggleSwitch MinWidth="0"/>

[jeremy-visionaid]

Still an issue in Windows App SDK 1.4.230822000

@mibrito707 I find that ToggleSwitchThemeMinWidth has no effect, but setting MinWidth directly works OK