wpfxamlwinui-3winui

WinUI 3 Radio Button Centering


I'm trying to convert a WPF C# application to use WinUI 3. This is a simplified version of my XAML code:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Row="0" Grid.Column="0" 
        Orientation="Horizontal"
        HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="1234567890123456789012345678901234567890"/>
    </StackPanel>
    <StackPanel Grid.Row="1" Grid.Column="0" 
        Orientation="Horizontal"
        HorizontalAlignment="Center" VerticalAlignment="Center">
        <RadioButton GroupName="Choices" Content="Yes" />
    </StackPanel>
    <StackPanel Grid.Row="2" Grid.Column="0"
        Orientation="Horizontal"
        HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Content="Prev"/>
        <Button Content="Next"/>
    </StackPanel>
</Grid>

In my WPF application, this XAML centers the RadioButton appropriately:

WPF radio button is properly centered

The same XAML produces this result in my WinUI 3 application:

WinUI button is not properly centered

How do I get the radio button to center properly? Ultimately I'm going to be dynamically adding a varying number of radio buttons to the stack panel, but I can't even get it to work for just one that's statically defined.


Solution

  • This is due to the RadioButon's MinWidth, which is 120 by default. You can learn more about this in the generic.xaml.

    You can directly update the RadioButton's MinWidth:

    <RadioButton MinWidth="0" .../>
    

    or update it via a style:

    <Style
        BasedOn="{StaticResource DefaultRadioButtonStyle}"
        TargetType="RadioButton">
        <Setter Property="MinWidth" Value="0" />
    </Style>