时间戳

首页 > 解决方案 > WPF Datatrigger ColorAnimation 不起作用

wpf - WPF Datatrigger ColorAnimation 不起作用

问题描述

我目前正在为所有 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”值来确认/测试这一点，它根本不会触发。所有帮助将不胜感激！

亲切的问候

标签： wpfxamlstoryboardcoloranimation

解决方案

正确的方法是使用EnterActionandExitAction的Triggerand 将触发器从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>

推荐阅读