Set icon color in toggle button depending on toggle button state-CodePudding

I got a problem with my ToggleButton and its content. I hope this information is sufficient, let me know if you need anything else!

Problem

I have a ToggleButton that contains a FontIcon and a TextBlock in a Grid:

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

The text in the ToggleButton should always be white. That's why I set following resources for the 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}"/>

Now there is the requirement to add the FontIcon in the Grid as well. But this FontIcon behaves the same as the text (obviously as the resources for the ToggleButton foreground are for the whole content).

However the FontIcon needs following behavior in the ToggleButton:

<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}"/>

My guess

I guess I could solve this with a converter for the FontIcon Foreground that binds to the selected state of the ToggleButton but this converter would also need the disabled state of the ToggleButton which makes this a bit more compley. As I think I would be able to get this running I think this might be a bit hacky and not satisfying.

Does anyone have an idea how to solve this more elegant?

Thank you in advance!

CodePudding user response：

You can use the Microsoft.Xaml.Behaviors.WinUI.Managed NuGet package.

Here's the code but I changed the colors to check if this works.

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