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:

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

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.

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:

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

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.

• wpf
• xaml
• winui-3
• winui

1 Answer 1

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>