XAML 根据切换按钮状态设置切换按钮中的图标颜色

htzpubme  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(158)

我的ToggleButton和它的内容有问题。我希望这些信息是足够的,如果你还需要什么,让我知道!

问题

我有一个ToggleButton,它在Grid中包含一个FontIcon和一个TextBlock

<ToggleButton Grid.Row="1" HorizontalAlignment="Stretch">
    <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*"/>
             <ColumnDefinition Width="3*"/>
         </Grid.ColumnDefinitions>

         <FontIcon Grid.Column="0"
                   FontSize="20"
                   Glyph="{StaticResource mdi_handyman}"
                   FontFamily="{StaticResource MaterialDesignIconsOutlined}"/>
         <TextBlock Grid.Column="1" Margin="10,0,0,0" Text="{x:Bind p:Resources.Dashboard_Maintenance}"/>
     </Grid>
</ToggleButton>

ToggleButton中的文本应该始终是白色的,这就是为什么我为ToggleButton设置了以下资源:

<SolidColorBrush x:Key="ToggleButtonForeground" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundDisabled" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{ThemeResource WhiteColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundChecked" Color="{ThemeResource RichBlackColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver" Color="{ThemeResource RichBlackColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource WhiteColor}"/>

<SolidColorBrush x:Key="ToggleButtonBackground" Color="{ThemeResource RichBlackColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundDisabled" Color="{ThemeResource RichBlackColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundPointerOver" Color="{ThemeResource LightPrussianBlueColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundChecked" Color="{ThemeResource VividSkyBlueColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundCheckedDisabled" Color="{ThemeResource PaleVividSkyBlueColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundCheckedPointerOver" Color="{ThemeResource VividSkyBlueColor}"/>
<SolidColorBrush x:Key="ToggleButtonBackgroundPressed" Color="{ThemeResource LightPrussianBlueColor}"/>

现在需要在Grid中添加FontIcon,但是FontIcon的行为与文本相同(显然,ToggleButton前台的资源是针对整个内容的)。
但是,FontIconToggleButton中需要以下行为:

<SolidColorBrush x:Key="ToggleButtonForeground" Color="{ThemeResource VividSkyBlue}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundDisabled" Color="{ThemeResource VividSkyBlue}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPointerOver" Color="{ThemeResource VividSkyBlue}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundChecked" Color="{ThemeResource RichBlackColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundCheckedPointerOver" Color="{ThemeResource RichBlackColor}"/>
<SolidColorBrush x:Key="ToggleButtonForegroundPressed" Color="{ThemeResource WhiteColor}"/>

我猜
我想我可以用一个FontIcon前台的转换器来解决这个问题,这个转换器绑定到ToggleButton的选定状态,但是这个转换器也需要ToggleButton的禁用状态,这使得这个更完整。因为我认为我可以让这个运行,我认为这可能有点笨拙,不令人满意。
有没有人有办法更优雅地解决这个问题?
提前感谢!

n9vozmp4

n9vozmp41#

您可以使用Microsoft.Xaml.行为.WinUI.托管NuGet包。
这是代码,但我改变了颜色,以检查这是否工作。

<FontIcon
    x:Name="ThisFontIcon"
    Grid.Column="0"
    FontSize="20"
    Glyph="{StaticResource CheckBoxCheckedGlyph}">
    <interactivity:Interaction.Behaviors>
        <core:EventTriggerBehavior EventName="PointerEntered">
            <core:ChangePropertyAction
                PropertyName="Foreground"
                TargetObject="{Binding ElementName=ThisFontIcon}"
                Value="HotPink" />
        </core:EventTriggerBehavior>
        <core:EventTriggerBehavior EventName="PointerExited">
            <core:ChangePropertyAction
                PropertyName="Foreground"
                TargetObject="{Binding ElementName=ThisFontIcon}"
                Value="{ThemeResource SystemAccentColor}" />
        </core:EventTriggerBehavior>

        <core:DataTriggerBehavior
            Binding="{Binding IsChecked, ElementName=ThisToggleButton}"
            Value="True">
            <core:ChangePropertyAction
                PropertyName="Foreground"
                TargetObject="{Binding ElementName=ThisFontIcon}"
                Value="{ThemeResource SystemChromeBlackHighColor}" />
        </core:DataTriggerBehavior>
        <core:DataTriggerBehavior
            Binding="{Binding IsChecked, ElementName=ThisToggleButton}"
            Value="False">
            <core:ChangePropertyAction
                PropertyName="Foreground"
                TargetObject="{Binding ElementName=ThisFontIcon}"
                Value="{ThemeResource SystemAccentColor}" />
        </core:DataTriggerBehavior>
    </interactivity:Interaction.Behaviors>
</FontIcon>

相关问题