WPF Datatrigger ColorAnimation not working

Question

I am currently working on my own Themes for all the wpf controls. I can't really get the Checkbox Usercontrol working. I'm trying to get a smooth color fade in / fade out when checking the checkbox. This is the relevant part of my code in my ressource dictionary:

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

The fade out works (Value=false), but the fade in never triggers. I added a "From" value to confirm / test this, it doesn't trigger at all. All help would be much appreciated!

Kind Regards

Answer 1

The proper way is to use the EnterAction and ExitAction of the Trigger and to move the trigger from the Style to the ControlTemplate. Also note how the Border properties are wired to the templated parent to allow local values having an effect.

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