CheckBox 在鼠标悬停并处于选中状态时更改了背景答案

【问题标题】：CheckBox changed background on mouse over and in checked stateCheckBox 在鼠标悬停并处于选中状态时更改了背景
【发布时间】：2020-08-10 12:26:51
【问题描述】：

我正在为 CheckBox 控件编写模板。这是 CheckBox 模板代码：


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

当复选框处于选中状态并且鼠标悬停时，我想更改边框背景颜色。我试图这样指定 MultiTrigger：

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

但这不起作用。

这在 wpf 中甚至可能吗？

谢谢。

【问题讨论】：

“不工作”有点含糊。你能详细说明一下吗？

标签： c# wpf xaml

【解决方案1】：

WPF（与 UWP 相对）对使用 VisualStateManager 时的可能性有更严格的限制。每个州只能定位一次属性。这很有意义。当处于Checked 状态时，属性BorderBackground 被动画化为相应的值。当您的MultiTrigger 被激活时，它会尝试修改当前被活动动画阻止的Border.Background 属性。

您可以用触发器替换相关的视觉状态，也可以让动画和触发器针对不同的元素。

只需用额外的Border 覆盖BulletDecorator 的内容，然后切换其Background：

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

【讨论】：