How to set a condition for the background color of a CheckBox in Mouse Over state?-CodePudding

I needed a CheckBox that acts as follows

Unchecked - The default style is applies
Checked - The background is blue and the check mark glyph is white

I created a template like this:

<Application.Resources>
    <Style TargetType="CheckBox" x:Key="OptionMarkFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="14,0,0,0" StrokeDashArray="1 2" SnapsToDevicePixels="true" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="OptionMark.Static.Glyph" Color="#FFF"/>
    <SolidColorBrush x:Key="OptionMark.MouseOver.Background" Color="#FF3C77DD"/>
    <SolidColorBrush x:Key="OptionMark.MouseOver.Border" Color="#FF3C77DD"/>
    <SolidColorBrush x:Key="OptionMark.MouseOver.Glyph" Color="#FFF"/>
    <SolidColorBrush x:Key="OptionMark.Pressed.Background" Color="#FF3C77DD"/>
    <SolidColorBrush x:Key="OptionMark.Pressed.Border" Color="#FF3C77DD"/>
    <SolidColorBrush x:Key="OptionMark.Pressed.Glyph" Color="#FFF"/>
    <SolidColorBrush x:Key="OptionMark.Disabled.Background" Color="#FF3C77DD"/>
    <SolidColorBrush x:Key="OptionMark.Disabled.Border" Color="#FF3C77DD"/>
    <SolidColorBrush x:Key="OptionMark.Disabled.Glyph" Color="#FFF"/>
    <ControlTemplate x:Key="checkBoxTemplate" TargetType="{x:Type CheckBox}">
        <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Border x:Name="checkBoxBorder" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                <Grid x:Name="markGrid">
                    <Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="{StaticResource OptionMark.Static.Glyph}" Margin="1" Opacity="0" Stretch="None"/>
                    <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="2" Opacity="0"/>
                </Grid>
            </Border>
            <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="HasContent" Value="true">
                <Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}"/>
                <Setter Property="Padding" Value="4,-1,0,0"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Background}"/>
                <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Border}"/>
                <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
                <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Background}"/>
                <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Border}"/>
                <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
                <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="true">
                <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Background}"/>
                <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Border}"/>
                <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
                <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="true">
                <Setter Property="Opacity" TargetName="optionMark" Value="1"/>
                <Setter Property="Opacity" TargetName="indeterminateMark" Value="0"/>
                <Setter Property="Background" Value="#FF3C77DD"/>
                <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#FF3C77DD"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="{x:Null}">
                <Setter Property="Opacity" TargetName="optionMark" Value="0"/>
                <Setter Property="Opacity" TargetName="indeterminateMark" Value="1"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Application.Resources>

The problem is when the mouse is over the CheckBox and it's unchecked, the background changes to blue, and if I change:

<SolidColorBrush x:Key="OptionMark.MouseOver.Background" Color="#FF3C77DD"/>

to white, when it's checked and the mouse is over the CheckBox the background changes to white. How can I change the template so that the background is blue, if the CheckBox is checked and the mouse is over it and set the background to white, if it is unchecked and the mouse is over it?

CodePudding user response：

As @BionicCode already mentioned in the comments, you should use a MultiTrigger, which can use a set of conditions. The setters are only applied if all of the confitions are met.

<MultiTrigger>
   <MultiTrigger.Conditions>
      <Condition Property="IsMouseOver" Value="True"/>
      <Condition Property="IsChecked" Value="True"/>
   </MultiTrigger.Conditions>
   <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Background}"/>
    <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Border}"/>
    <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
    <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
</MultiTrigger>