Horizontal Alignments not work for Toggle Switch

[sethuramkumar]

Describe the bug

Hi Team,
In WinUI-ToggleSwitch control, Horizontal alignment is not working properly.
Refer the below code and Image:

<Grid Width="800" Height="300">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border  BorderBrush="Red" Grid.Row="0" Grid.Column="0" BorderThickness="1 1 0 1" />
        <StackPanel Orientation="Vertical" Grid.Column="0">
            <TextBlock Text="Right Aligned" HorizontalAlignment="Center" />
            <ToggleSwitch HorizontalAlignment="Right"  />
        </StackPanel>
        <Border  BorderBrush="Red" Grid.Column="1" BorderThickness="1 1 0 1" />
        <StackPanel Grid.Column="1">
            <TextBlock Text="Left Aligned" HorizontalAlignment="Center" />
            <ToggleSwitch HorizontalAlignment="Left" Grid.Column="1"/>
        </StackPanel>
        <Border  BorderBrush="Red" Grid.Column="2" BorderThickness="1 1 0 1" />
        <StackPanel Grid.Column="2">
            <TextBlock Text="Center Aligned" HorizontalAlignment="Center" />
            <ToggleSwitch HorizontalAlignment="Center" Grid.Column="2"/>
        </StackPanel>
        <Border  BorderBrush="Red" Grid.Column="3" BorderThickness="1 1 0 1" />
        <StackPanel Grid.Column="3">
            <TextBlock Text="Without Alignment" HorizontalAlignment="Center" />
            <ToggleSwitch Grid.Column="3"/>
        </StackPanel>
        <Border  BorderBrush="Red" Grid.Column="4" BorderThickness="0 1 1 1" />
    </Grid>

Steps to reproduce the bug

Declare the ToggleSwitch control in Grid layout.
Give the Horizontal Alignment as Right.
Note the control is not fully aligned in right side.

Expected behavior

Horizontal alignment should works properly for ToggleSwitch control.

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 0.8: 0.8.0 (If you're seeing your issue in older previews of WinUI 3, please try this release)

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

October 2020 Update (19042)

Additional context

Whether the Horizontal alignment value given or not by default the control is Aligned to left.
Please check and update on this.

[JohnnyWestlake]

Worth noting that it actually does logically work, but there's a default minimum width specified for the control that makes it optically look like it's not: <x:Double x:Key="ToggleSwitchThemeMinWidth">154</x:Double>

[StephenLPeters]

Worth noting that it actually does logically work, but there's a default minimum width specified for the control that makes it optically look like it's not: <x:Double x:Key="ToggleSwitchThemeMinWidth">154</x:Double>

This is correct, although we should probably right align the content within that min width when the alignment is set to right...

[StephenLPeters]

You can fix this today by overriding the min width resource, however then the control wouldn't meet the recommended touch target size.

[sethuramkumar]

Setting ToggleSwitch MinWidth works for the simple sample , but in my project I have used the ToggleSwitch control inside content presenter in code behind, there I can't use the key ToggleSwitchThemeMinWidth.Now, I am trying to prepare the simple sample for this. I will update once I have completed.

[sethuramkumar]

Is this issue resolved with above fix?

[Diegorro98]

A year from this issue was posted and no actual fix has been released (no workarounds) 😕

[ranjeshj]

ToggleSwitchThemeMinWidth seems to be the issue.

[ranjeshj]

this is a dup of #3652