从WPF按钮后面的代码控制动画?

时间:2012-09-14 18:59:16

标签: wpf animation button code-behind

我的按钮有以下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将在用户单击按钮时通过动画增加宽度。

1 个答案:

答案 0 :(得分:0)

目前,动画在Xaml中开始。为什么要在代码隐藏中使用它?