XAML 在.Net MAUI中设置单选按钮样式的问题

du7egjpx  于 2023-01-22  发布在  .NET
关注(0)|答案(1)|浏览(317)

我在. 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>

不幸的是,它不起作用,不仅当单选按钮被禁用时颜色不会改变,而且我的第二个setter(设置"check"对象的"Fill"属性)也会导致编译时错误("Cannot resolve property Fill on type Border")。
有什么建议吗?

pobjuy32

pobjuy321#

我能够找到一种方法来做我需要做的事情。我能够使用样式触发器,而不是使用可视状态组中的“禁用”可视状态。所以现在我的控件模板及其对应的样式如下所示:

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

相关问题