Question

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

certs:

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


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

但这不起作用。

在wpf中甚至有可能吗？

谢谢。

Answer 1

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

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

用另外的BulletDecorator简单地覆盖Border的内容，并切换其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>

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

1 个答案: