用于DataTrigger上TemplateBinding背景属性的ColorAnimation [英] ColorAnimation for TemplateBinding Background Property on DataTrigger

问题描述

我有一个带有Template的按钮，如下所示，

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>        

我正尝试在Style中的DataTrigger上为Background设置动画，如下所示，

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>

但是它没有在DataTrigger上显示动画.任何帮助

But its not getting animated on the DataTrigger. any help

推荐答案

这是我所做的:

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

我已经将您的Storyboard包含在其中并进行了测试.我可以确认这在我的PC上正常工作.
顺便说一句，这是part_ButtonBorder:

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>  

编辑
我尝试在xaml中使用path，并且按预期方式工作，path fill设置为按钮的背景，之所以您可能看不到它的原因是因为path的颜色将与按钮的背景相同.
这是包含路径的代码片段，请注意，该路径已定义笔触，因此您可以看到它的轮廓.

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.

这篇关于用于DataTrigger上TemplateBinding背景属性的ColorAnimation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！