.NET MAUI单选按钮样式问题：禁用状态失效及编译错误

问题根源 #

1. 编译错误原因：你将Disabled状态错误归类到CheckedStates视觉状态组中，而RadioButton的启用/禁用状态属于独立的EnabledStates组。该组默认作用于模板根元素（此处为Border），但Border没有Fill属性，导致解析失败。
2. 禁用状态不生效原因：状态分组错误，MAUI无法识别属于错误组的状态，因此不会触发样式变更。

修正后的完整代码 #

<ControlTemplate x:Key="RadioButtonTemplate">
    <Border Stroke="Transparent" BackgroundColor="Transparent">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroupList>
                <!-- 管理选中/未选中状态 -->
                <VisualStateGroup x:Name="CheckedStates">
                    <VisualState x:Name="Checked">
                        <VisualState.Setters>
                            <Setter TargetName="check" Property="Opacity" Value="1" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Unchecked">
                        <VisualState.Setters>
                            <Setter TargetName="check" Property="Opacity" Value="0" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
                <!-- 管理启用/禁用状态 -->
                <VisualStateGroup x:Name="EnabledStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter TargetName="border_circle" Property="Stroke" Value="DarkBlue" />
                            <Setter TargetName="check" Property="Fill" Value="DarkBlue" />
                            <Setter TargetName="contentPresenter" Property="TextColor" Value="Black" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter TargetName="border_circle" Property="Stroke" Value="LightGray" />
                            <Setter TargetName="check" Property="Fill" Value="LightGray" />
                            <Setter TargetName="contentPresenter" Property="TextColor" Value="LightGray" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </VisualStateManager.VisualStateGroups>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid WidthRequest="20" HeightRequest="20" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Center">
                <Ellipse x:Name="border_circle" StrokeThickness="2" Stroke="DarkBlue" Fill="White" WidthRequest="18" HeightRequest="18" HorizontalOptions="Center" VerticalOptions="Center" />
                <Ellipse x:Name="check" Fill="DarkBlue" WidthRequest="10" HeightRequest="10" HorizontalOptions="Center" VerticalOptions="Center" />
            </Grid>
            <ContentPresenter x:Name="contentPresenter" Margin="10,0,0,0" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center" />
        </Grid>
    </Border>
</ControlTemplate>

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

关键修改说明 #

• 分离状态组：将CheckedStates和EnabledStates拆分为两个独立的视觉状态组，MAUI支持多组状态同时生效（例如：RadioButton可以同时处于Checked和Disabled状态）。
• 命名ContentPresenter：给ContentPresenter添加x:Name，以便在禁用状态中修改文本颜色，还原默认控件的禁用视觉效果。
• 明确Normal状态：添加Normal状态作为启用时的默认样式，确保状态切换时能正确恢复到初始样式。
• 修正状态作用对象：Disabled状态中的Setter目标都是模板内的具体元素（Ellipse和ContentPresenter），避免了对Border的无效属性设置。

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