.Net MAUI 中单选按钮样式的问题
Dav*_*vid 3 xaml controltemplate radio-button maui
我在 .Net MAUI 中设置单选按钮样式时遇到了一些问题。最初，我注意到 Windows 和 Android 上的单选按钮外观并不一致，如下图所示：
它们不仅不同，而且按钮样式的可用选项也很有限。定义颜色的唯一选项是“BorderColor”、“BackgroundColor”和“TextColor”。“BorderColor”和“BackgroundColor”对单选按钮本身的颜色完全没有影响。我想更改实际单选按钮的颜色。
所以我决定创建一个控制模板来帮助我。这是我的控件模板：
<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>
</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 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>
这工作得相当好，所以现在我在Android 和 Windows上都得到了以下外观：
现在我还有最后一个问题。当我使用默认的单选按钮（没有我的控制模板）时，每当我设置为 时，它们都会可靠地变成“浅灰色”IsEnabled颜色false。我想这样做，以便我可以禁用我的单选按钮并将其变成浅灰色（以表明它已禁用），同时仍然使用我的控件模板，以便我拥有统一的外观和感觉。
因此，我尝试向我的控件模板添加Disabled视觉状态，但它似乎不起作用。这是我的新控件模板，其Disabled状态如下：
<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>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter TargetName="border_circle" Property="Stroke" Value="LightGray" />
<Setter TargetName="check" Property="Fill" 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 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>
不幸的是，它不起作用。当单选按钮被禁用时，不仅颜色不会改变，而且我的第二个设置器（设置“检查”对象的“填充”属性）也会导致编译时错误（“无法解析边框类型上的属性填充”） ”）。
有什么建议么？
我能够找到一种方法来完成我需要做的事情。我可以使用样式触发器，而不是使用视觉状态组中的“禁用”视觉状态。所以现在我的控件模板及其相应的样式如下所示：
<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>
</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="{TemplateBinding BorderColor}" Fill="White" WidthRequest="18" HeightRequest="18" HorizontalOptions="Center" VerticalOptions="Center" />
<Ellipse x:Name="check" Fill="{TemplateBinding BorderColor}" WidthRequest="10" HeightRequest="10" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
<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.Triggers>
<Trigger TargetType="RadioButton" Property="IsEnabled" Value="False">
<Setter Property="BorderColor" Value="LightGray" />
</Trigger>
<Trigger TargetType="RadioButton" Property="IsEnabled" Value="True">
<Setter Property="BorderColor" Value="DarkBlue" />
</Trigger>
</Style.Triggers>
</Style>