CheckBox 在鼠标悬停和选中 state 时更改了背景

Question

I'm writing template for CheckBox control. Here is CheckBox template code:

<Style x:Key="{x:Type CheckBox}"
       TargetType="{x:Type CheckBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <BulletDecorator Background="Transparent">
                        <BulletDecorator.Bullet>
                            <Border x:Name="Border"
                                    Width="15"
                                    Height="15"
                                    CornerRadius="1"
                                    BorderThickness="1"
                                    BorderBrush="DarkGray"
                                    Background="White">
                            </Border>
                        </BulletDecorator.Bullet>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource DefaultButtonBlueBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                       Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource DefaultButtonBlueBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                           
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter Margin="4,0,0,0"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Left"
                            RecognizesAccessKey="True" />
                    </BulletDecorator>
            </Setter.Value>
        </Setter>
    </Style>

I want to change border background color when checkbox in checked state and mouse over. I tried to specify MultiTrigger like that:

<MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsChecked" Value="True" />
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>
                            <MultiTrigger.Setters>
                                <Setter TargetName="Border" Property="Background" Value="Red" />
                            </MultiTrigger.Setters>
                        </MultiTrigger>

But this don't work.

Is this even possible in wpf?

Thank you.

Answer 1

WPF (opposed to UWP) has stricter limitations regarding the possibilities when using the VisualStateManager . You can only target a property once per state. Which makes quite sense. When in the Checked state, the property BorderBackground is animated to the corresponding value. When your MultiTrigger is activated it tries to modify the Border.Background property, which is currently blocked by the active animation.

You can either replace the relevant visual states with triggers or let animation and trigger target different elements.

Simply overlay the content of the BulletDecorator with an additional Border and toggle its Background instead:

<Style x:Key="{x:Type CheckBox}" TargetType="{x:Type CheckBox}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type CheckBox}">
        <BulletDecorator Background="Transparent">
          <BulletDecorator.Bullet>
            <Grid>
              <Border x:Name="MouseOverBorder" 
                      Panel.ZIndex="1" 
                      Background="Transparent" 
                      CornerRadius="1"
                      BorderThickness="1" />
              <Border x:Name="Border"
                      Width="15"
                      Height="15"
                      CornerRadius="1"
                      BorderThickness="1"
                      BorderBrush="DarkGray"
                      Background="White" />
            </Grid>
          </BulletDecorator.Bullet>

          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
              <VisualState x:Name="Checked">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                 Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{StaticResource DefaultButtonBlueBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                 Storyboard.TargetProperty="BorderBrush">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{StaticResource DefaultButtonBlueBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>

            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <ContentPresenter Margin="4,0,0,0"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Left"
                            RecognizesAccessKey="True" />
        </BulletDecorator>

        <ControlTemplate.Triggers>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="IsChecked" Value="True" />
              <Condition Property="IsMouseOver" Value="True" />
            </MultiTrigger.Conditions>
            <MultiTrigger.Setters>
              <Setter TargetName="MouseOverBorder" 
                      Property="Background" 
                      Value="Red" />
            </MultiTrigger.Setters>
          </MultiTrigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>