WinUI 3中RadioButton无法正常居中的问题咨询

我正尝试将WPF C#应用迁移至WinUI 3，以下是简化后的XAML代码：

<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>

这段代码在WPF中能让RadioButton正常居中，但在WinUI3里无法实现预期的居中效果。最终我会动态向StackPanel添加数量不定的RadioButton，但目前静态定义的单个RadioButton也无法正常居中，请问该如何解决？

问题根源是WinUI3中RadioButton的默认模板里，控件本身占用了比视觉元素更宽的布局空间，导致StackPanel的居中只是让这个宽容器居中，而RadioButton的实际可视部分偏左。以下是几种实用解决方法：

方法1：给RadioButton设置HorizontalAlignment属性 #

直接强制RadioButton在自身布局空间内居中：

<StackPanel Grid.Row="1" Grid.Column="0" 
    Orientation="Horizontal"
    HorizontalAlignment="Center" VerticalAlignment="Center">
    <RadioButton GroupName="Choices" Content="Yes" HorizontalAlignment="Center"/>
</StackPanel>

方法2：调整StackPanel的HorizontalContentAlignment #

让容器内所有子元素都在各自布局空间内居中，适合后续动态添加多个RadioButton的场景：

<StackPanel Grid.Row="1" Grid.Column="0" 
    Orientation="Horizontal"
    HorizontalAlignment="Center" VerticalAlignment="Center"
    HorizontalContentAlignment="Center">
    <RadioButton GroupName="Choices" Content="Yes" />
</StackPanel>

方法3：自定义RadioButton模板（全局统一修改） #

如果需要所有RadioButton都保持一致的居中表现，可以替换默认模板，移除额外空白区域：

<Style TargetType="RadioButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked"/>
                            <VisualState x:Name="Unchecked"/>
                            <VisualState x:Name="Indeterminate"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                        <Ellipse x:Name="OuterEllipse" Width="16" Height="16" Stroke="{ThemeResource RadioButtonBorderBrush}" StrokeThickness="2"/>
                        <Ellipse x:Name="InnerEllipse" Width="8" Height="8" Fill="{ThemeResource RadioButtonForeground}" Margin="0 0 4 0" Visibility="Collapsed"/>
                        <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" Margin="4 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="InnerEllipse" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

优先推荐方法1或方法2，操作简单且无需修改全局模板，完全适配动态添加RadioButton的需求。

内容的提问来源于stack exchange，提问作者Gary Riley