WPF中的故事板

WPF中的故事板

1. 事件触发器

<StackPanel>
    <Button x:Name="Button1" Margin="15" Height="25" Width="75" Click="Button1_Click_1">
        Button
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width"
                                             From="160" To="300" Duration="0:0:5">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</StackPanel>

2. 使用样式关联触发器

<Window.Resources>
    <Style x:Key="StyleButton">
        <Style.Triggers>
            <Trigger Property="Button.IsPressed" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width"
                                             From="160" To="300" Duration="0:0:5">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<StackPanel>
    <Button x:Name="Button1" Margin="15" Height="25" Width="75" Click="Button1_Click_1"
            Style="{StaticResource StyleButton}">
        Button
    </Button>
</StackPanel>

3. 同步的动画

<Window.Resources>
    <Style x:Key="StyleButton">
        <Style.Triggers>
            <Trigger Property="Button.IsPressed" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Width"
                                             From="160" To="300" Duration="0:0:5">
                            </DoubleAnimation>
                            <DoubleAnimation Storyboard.TargetProperty="Height" FillBehavior="Stop"
                                             From="20" To="200" Duration="0:0:2" BeginTime="0:0:3" SpeedRatio="1.5">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<StackPanel>
    <Button x:Name="Button1" Margin="15" Height="25" Width="75" Click="Button1_Click_1"
            Style="{StaticResource StyleButton}">
        Button
    </Button>
</StackPanel>