.NET MAUI XAML中RadioButton点击区域与UI错位如何修正

自定义RadioButton控件模板后，仅偏移位置的红圈区域可触发选中交互，UI显示位置和实际可点击区域错位，尝试设置TranslationY=-80无效果，需要实现可点击区域与UI显示完全对齐。

现有代码 #

Styles.xaml 片段 #

<ControlTemplate x:Key="RadioButtonTemplate">
    <Frame BorderColor="#F3F2F1" CornerRadius="2" BackgroundColor="#F3F2F1" HasShadow="False" HeightRequest="80" WidthRequest="80" HorizontalOptions="Start" VerticalOptions="Start" Padding="0">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CheckedStates">
                    <VisualState x:Name="Checked">
                        <VisualState.Setters>
                            <Setter Property="BorderColor" Value="#FF3300" />
                            <Setter TargetName="check" Property="Opacity" Value="1" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Unchecked">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="#F3F2F1" />
                            <Setter Property="BorderColor" Value="#F3F2F1" />
                            <Setter TargetName="check" Property="Opacity" Value="0" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </VisualStateManager.VisualStateGroups>
        <Grid Margin="4" WidthRequest="80">
            <Grid WidthRequest="18" HeightRequest="18" HorizontalOptions="End" VerticalOptions="Start">
                <Ellipse Stroke="Blue" Fill="White" WidthRequest="16" HeightRequest="16" HorizontalOptions="Center" VerticalOptions="Center" />
                <Ellipse x:Name="check" Fill="Blue" WidthRequest="8" HeightRequest="8" HorizontalOptions="Center" VerticalOptions="Center" />
            </Grid>
            <ContentPresenter />
        </Grid>
    </Frame>
</ControlTemplate>

<Style TargetType="RadioButton">
    <Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
</Style>

MyPage.xaml 片段 #

<StackLayout Spacing="3">
    <Label Text="{Binding SelectedTheme, StringFormat='Theme: {0}'}" FontSize="20" />
    <Grid ColumnDefinitions="*,*,*" RadioButtonGroup.GroupName="themes" RadioButtonGroup.SelectedValue="{Binding SelectedTheme, Mode=TwoWay}">
        <RadioButton Value="{x:Static am:AppTheme.Unspecified}" CheckedChanged="RadioButton_CheckedChanged">
            <RadioButton.Content>
                <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                    <Image Scale="0.75" Source="{FontImage FontFamily=FAS, Glyph={x:Static fontawesome:FontAwesomeIcons.Gear}, Color=#323130}"  />
                    <Label FontSize="Small" Text="System" TextColor="#323130" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="{x:Static am:AppTheme.Light}" Grid.Column="1" CheckedChanged="RadioButton_CheckedChanged">
            <RadioButton.Content>
                <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                    <Image Scale="0.75" Source="{FontImage FontFamily=FAS, Glyph={x:Static fontawesome:FontAwesomeIcons.Sun}, Color=#323130}" />
                    <Label FontSize="Small" Text="Light" TextColor="#323130" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="{x:Static am:AppTheme.Dark}" Grid.Column="2" CheckedChanged="RadioButton_CheckedChanged">
            <RadioButton.Content>
                <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                    <Image Scale="0.75" Source="{FontImage FontFamily=FAS, Glyph={x:Static fontawesome:FontAwesomeIcons.Moon}, Color=#323130}" />
                    <Label FontSize="Small" Text="Dark" TextColor="#323130" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
    </Grid>
</StackLayout>

点击区域错位核心是两个问题：

• 自定义ControlTemplate的根Frame设置了固定宽高+Start对齐，没有随RadioButton的布局边界填充，导致RadioButton原生命中测试区域和模板渲染的Frame位置不匹配
• TranslationY这类属性仅修改元素的视觉渲染位置，不会改变点击命中区域的实际边界，所以设置后无法修正错位

按以下步骤修改即可实现点击区域和UI完全对齐：

• 调整模板根Frame的对齐方式为Fill，移除固定宽高设置，让Frame随RadioButton的布局尺寸自适应，保证命中区域和控件布局边界重合
• 给内部Grid补全HeightRequest="80"的高度约束，匹配设计尺寸，避免内容布局溢出
• 给右上角纯装饰用的选中标记椭圆设置InputTransparent="True"，避免装饰元素拦截点击事件，保证点击能透传到RadioButton本身

修正后的ControlTemplate代码如下：

<ControlTemplate x:Key="RadioButtonTemplate">
    <Frame BorderColor="#F3F2F1" CornerRadius="2" BackgroundColor="#F3F2F1" HasShadow="False" 
           Padding="0" HorizontalOptions="Fill" VerticalOptions="Fill">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CheckedStates">
                    <VisualState x:Name="Checked">
                        <VisualState.Setters>
                            <Setter Property="BorderColor" Value="#FF3300" />
                            <Setter TargetName="check" Property="Opacity" Value="1" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Unchecked">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="#F3F2F1" />
                            <Setter Property="BorderColor" Value="#F3F2F1" />
                            <Setter TargetName="check" Property="Opacity" Value="0" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </VisualStateManager.VisualStateGroups>
        <Grid Margin="4" HeightRequest="80" WidthRequest="80">
            <Grid WidthRequest="18" HeightRequest="18" HorizontalOptions="End" VerticalOptions="Start" InputTransparent="True">
                <Ellipse Stroke="Blue" Fill="White" WidthRequest="16" HeightRequest="16" HorizontalOptions="Center" VerticalOptions="Center" />
                <Ellipse x:Name="check" Fill="Blue" WidthRequest="8" HeightRequest="8" HorizontalOptions="Center" VerticalOptions="Center" />
            </Grid>
            <ContentPresenter />
        </Grid>
    </Frame>
</ControlTemplate>

最后给MyPage.xaml里的三个RadioButton都加上HorizontalOptions="Fill" VerticalOptions="Fill"属性，保证每个RadioButton在Grid列内完全填充分配的空间即可，不需要额外修改其他逻辑。

内容的提问来源于stack exchange，提问作者DM-98