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

问题描述 投票：0回答：2

我在 .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> 
不幸的是，它不起作用。当单选按钮被禁用时，不仅颜色不会改变，而且我的第二个设置器（设置“检查”对象的“填充”属性）也会导致编译时错误（“无法解析边框类型上的属性填充”） ”）。


有什么建议吗？

    




xaml

radio-button

maui

controltemplate


2个回答




    
    
    

        

            

                

                    
6
投票

                    

                

            

        

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


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

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
在 
VisualState.Setters
 前缀中添加属性，例如要设置的元素的 
Opacity
，例如
Ellipse
：


<VisualState x:Name="Checked">
  <VisualState.Setters>
    <Setter TargetName="border_circle" Property="Ellipse.Stroke" Value="{TemplateBinding BorderColor}" />
    <Setter TargetName="check" Property="Ellipse.Opacity" Value="1" />
 </VisualState.Setters>
</VisualState>

    



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.