从 WPF 按钮中的代码控制动画？答案

【问题标题】：Controlling animation from code behind in WPF button?从 WPF 按钮中的代码控制动画？
【发布时间】：2012-09-07 23:12:35
【问题描述】：

我的按钮具有以下 XAML 样式：

    <Style TargetType="{x:Type Button}">
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="Calibri" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="BtnBorder" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}" CornerRadius="5" VerticalAlignment="Center" BorderBrush="White" BorderThickness="0" ClipToBounds="True" HorizontalAlignment="Center">
                    <Grid Width="{Binding ElementName=BtnBorder, Path=ActualWidth}">        
                        <Rectangle Name="BtnRect" RadiusX="6" RadiusY="5" Opacity="0.2" Fill="White" />
                        <Rectangle x:Name="progressIndicator" Width="0" HorizontalAlignment="Left" RadiusX="8" RadiusY="8" Margin="1">
                            <Rectangle.Fill>
                                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                    <GradientStop Color="Transparent" Offset="0" />
                                    <GradientStop Color="#88FFFFFF" Offset="0.945" />
                                    <GradientStop Color="White" Offset="1" />
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="BtnCP" />
                      </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="Mouse.MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="BtnRect" Storyboard.TargetProperty="Opacity" From="0.25" To="0.5" Duration="0:0:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Mouse.MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="BtnRect" Storyboard.TargetProperty="Opacity" From="0.5" To="0.25" Duration="0:0:0.5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="BtnBorder" Property="BorderThickness" Value="1.3" />
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="progressIndicator" Storyboard.TargetProperty="Width" From="0" To="300" Duration="0:0:5" AutoReverse="True" RepeatBehavior="5x" />
                                </Storyboard>
                             </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter TargetName="BtnBorder" Property="BorderThickness" Value="1.5,0,1.5,0" />
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsFocused" Value="True" />
                            <Condition Property="IsPressed" Value="True" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="BtnBorder" Property="BorderThickness" Value="1.3" />
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如何在单击按钮时通过后面的代码控制按钮的 Rectangle 属性的动画。名为“progressIndicator”的 Rectangle 是在用户点击按钮时通过动画来增加宽度。

【问题讨论】：

标签： wpf animation button code-behind

【解决方案1】：

目前动画在 Xaml 中启动。为什么要在代码隐藏中使用它？

【讨论】：

其实我想要一个后台进程来决定按钮动画的持续时间。因此，动画在用户单击按钮并经过一定的验证后开始，并在后台进程完成时结束。