WPF Datatrigger ColorAnimation 不起作用

Posted 2023-03-29

【中文标题】WPF Datatrigger ColorAnimation 不起作用

【英文标题】：WPF Datatrigger ColorAnimation not working

【发布时间】：2021-11-14 20:33:22

【问题描述】：

我目前正在为所有 wpf 控件开发自己的主题。 我真的无法让 Checkbox Usercontrol 正常工作。 选中复选框时，我试图获得平滑的颜色淡入/淡出。 这是我的资源字典中我的代码的相关部分：

<Border x:Name="checkbox" CornerRadius="5" Width="18" Height="18" BorderThickness="1" BorderBrush="Black">
    <!-- Checkmark -->
    <TextBlock Text="&#xE73E;" ClipToBounds="True"  FontFamily="Segoe MDL2 Assets"  HorizontalAlignment="Left"
                    Background="Transparent" Foreground="White" FontSize="15" FontWeight="ExtraBold"/>

    <Border.Style>
        <Style TargetType="Border">
            <!-- Animations (Color fade in and out) -->
            <Setter Property="Background" Value="Transparent"/>
            <Style.Triggers>
                <DataTrigger Binding="Binding RelativeSource=RelativeSource TemplatedParent, Path=IsChecked"  Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation To="#006092" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>

                <DataTrigger Binding="Binding RelativeSource=RelativeSource TemplatedParent, Path=IsChecked"  Value="False">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation To="#FFFFFF" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
</Border>

淡出有效 (Value=false)，但淡入永远不会触发。我添加了一个“From”值来确认/测试这一点，它根本不会触发。 非常感谢所有帮助！

亲切的问候

【问题讨论】：

请不要在问题中编辑解决方案公告。接受（即单击旁边的“勾选”）现有答案之一，如果有的话。如果现有答案尚未涵盖您的解决方案，您还可以创建自己的答案，甚至接受它。比较***.com/help/self-answer

【参考方案1】：

正确的方法是使用Trigger的EnterAction和ExitAction，并将触发器从Style移动到ControlTemplate。另请注意Border 属性是如何连接到模板化父级以允许局部值产生影响的。

<CheckBox IsChecked="True" BorderThickness="1" BorderBrush="Black">
  <CheckBox.Template>
    <ControlTemplate TargetType="CheckBox">
      <Border x:Name="checkbox" 
              Background="TemplateBinding Background" 
              BorderThickness="TemplateBinding BorderThickness"
              BorderBrush="TemplateBinding BorderBrush"
              CornerRadius="5" 
              Width="18" Height="18" >
        <!-- Checkmark -->
        <TextBlock Text="&#xE73E;" ClipToBounds="True"  FontFamily="Segoe MDL2 Assets"  HorizontalAlignment="Left"
                Background="Transparent" Foreground="White" FontSize="15" FontWeight="ExtraBold"/>
      </Border>

      <ControlTemplate.Triggers>
        <Trigger Property="IsChecked"  Value="True">
          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation To="#006092" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
          <Trigger.ExitActions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation To="#FFFFFF" Duration="0:0:0.2" Storyboard.TargetProperty="Background.Color"/>
              </Storyboard>
            </BeginStoryboard>
          </Trigger.ExitActions>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </CheckBox.Template>
</CheckBox>

【讨论】：

非常感谢，它工作得很好，我会牢记这一点，以备将来努力