ColorAnimation for TemplateBinding Background Property on DataTrigger

问题

I have a button with a Template, like below,

<Button>            
        <Button.Style>                        
            <Style TargetType="{x:Type Button}">                            
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Border BorderBrush="Transparent">
                                <Path Stretch="Fill" Width="25" Height="25" Fill="{TemplateBinding Background}" >
                                   <Path.Data>
                                      <RectangleGeometry Rect="10,10 200,140"/>
                                   </Path.Data>
                                </Path>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
    </Button>        

I am trying to animate the Background on a DataTrigger in Style like below,

 <Style.Triggers>
     <DataTrigger Binding="{Binding IsNoteOpen}" Value="true">
         <DataTrigger.EnterActions>
              <BeginStoryboard x:Name="Sb1">
                  <BeginStoryboard.Storyboard>
                      <Storyboard>
                         <ColorAnimation 
                             Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" 
                             From="White" To="Red" Duration="0:00:0.3" AutoReverse="True"/>
                       </Storyboard>
                   </BeginStoryboard.Storyboard>
               </BeginStoryboard>
            </DataTrigger.EnterActions>
          <DataTrigger.ExitActions>
              <StopStoryboard BeginStoryboardName="Sb1"/>
          </DataTrigger.ExitActions>
      </DataTrigger>
   </Style.Triggers>

But its not getting animated on the DataTrigger. any help

回答1:

Here is what I have done:

<Style TargetType="Button" x:Key="MainTilesButton">
        <Setter Property="Background" Value="#CCF5F5F5"/><!--This is background colour with opcaity defined-->
        <Setter Property="Margin" Value="20"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="border" Background="{TemplateBinding Background}" Style="{StaticResource part_ButtonBorder}">
                        <Border.RenderTransform>
                            <RotateTransform/>
                        </Border.RenderTransform>
                        <ContentPresenter VerticalAlignment="Center" 
                            HorizontalAlignment="Center" 
                            TextBlock.FontFamily="Segoe UI Semibold"
                            TextBlock.TextAlignment="Justify" 
                            TextBlock.FontSize="26.667"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <!--<DoubleAnimation Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)" To="-360" Duration="0:0:1" RepeatBehavior="Forever"/>-->
                                    <ThicknessAnimation Storyboard.TargetProperty="Margin" To="10" Duration="0:0:0.2"/>
                                        <ColorAnimation 
                                             Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" 
                                             From="White" To="ForestGreen" Duration="0:00:0.3" AutoReverse="True"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ThicknessAnimation Storyboard.TargetProperty="Margin" To="20" Duration="0:0:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="border" Property="Background" Value="Red"/>
                        </Trigger>
                        <!--<EventTrigger RoutedEvent="Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ThicknessAnimation Storyboard.TargetProperty="Margin" To="20" Duration="0:0:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>-->
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>  

I have included your Storyboard in there and tested it. I can confirm that this is working on my PC.
BTW this is the part_ButtonBorder:

<Style TargetType="Border" x:Key="part_ButtonBorder">
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="CornerRadius" Value="30"/>
</Style>  

EDIT
I have tried using path in my xaml and it works as expected, the path fill is set to the background of the button, reason why you might not see it is because paths colour is going to be the same as the background of the button.
Here is code snippet with the path included, NOTE that the path has stroke defined so you can see the outline of it.

<Style TargetType="Button" x:Key="MainTilesButton">
    <Setter Property="Background" Value="#CCF5F5F5"/>
    <!--This is background colour with opcaity defined-->
    <Setter Property="Margin" Value="20"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="border" Background="{TemplateBinding Background}" Style="{StaticResource part_ButtonBorder}">
                    <Border.RenderTransform>
                        <RotateTransform/>
                    </Border.RenderTransform>
                    <StackPanel>
                        <ContentPresenter VerticalAlignment="Center" 
                            HorizontalAlignment="Center" 
                            TextBlock.FontFamily="Segoe UI Semibold"
                            TextBlock.TextAlignment="Justify" 
                            TextBlock.FontSize="26.667"/>
                        <Path Fill="{TemplateBinding Background}" Stroke="Black" StrokeThickness="1" Data="m 193.2 112.7 -0.3 0.3 -0.6 0 -0.6 -0.3 -2.1 -2.1 -0.3 0 c -1.5 1.5 -3.5 2.6 -7.1 2.6 -4.1 0 -6.8 -2.6 -6.8 -6.2 0 -3.2 2.1 -5 4.4 -5.9 l 0 -0.3 c -0.9 -0.9 -2.1 -2.4 -2.1 -4.4 0 -2.1 1.2 -4.4 4.7 -4.4 3.2 0 4.4 2.4 4.4 4.1 0 3.2 -2.1 4.4 -3.8 5.3 l 0 0.3 5.9 5.9 0.3 0 c 0.6 -1.2 0.9 -2.9 0.9 -5.9 l 0.3 -0.3 1.2 0 0.3 0.3 c 0 3.5 -0.6 5.6 -1.5 7.1 l 0 0.3 2.6 2.6 0 1 z m -5 -3.6 -6.8 -6.8 -0.3 0 c -2.6 0.9 -3.8 2.4 -3.8 4.7 0 2.6 1.8 4.7 5 4.7 2.6 0 4.7 -0.9 5.9 -2.4 l 0 -0.2 z m -5.6 -15.6 c -2.1 0 -2.9 1.2 -2.9 2.9 0 1.5 0.6 2.4 2.1 3.8 l 0.6 0 c 1.8 -0.9 2.9 -1.8 2.9 -3.8 -0.1 -1.4 -0.7 -2.9 -2.7 -2.9 z"/>
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <!--<DoubleAnimation Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)" To="-360" Duration="0:0:1" RepeatBehavior="Forever"/>-->
                                <ThicknessAnimation Storyboard.TargetProperty="Margin" To="10" Duration="0:0:0.2"/>
                                <ColorAnimation 
                                     Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" 
                                     From="White" To="ForestGreen" Duration="0:00:0.3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <ThicknessAnimation Storyboard.TargetProperty="Margin" To="20" Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="border" Property="Background" Value="Red"/>
                    </Trigger>
                    <!--<EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation Storyboard.TargetProperty="Margin" To="20" Duration="0:0:0.2"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>-->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>  

One more thing to look out for is the Path it self, I have noticed the one that I am using is positioned very low so when you want to see it you need to stretch the Window a little so you can see it.

来源：https://stackoverflow.com/questions/36919129/coloranimation-for-templatebinding-background-property-on-datatrigger