第15章 动画基础(2)——故事板、触发器

2/10/2017来源:ASP.NET技巧人气:491

一、故事板

①故事板是增强型的时间线,可用来分组多个动画,而且具有动画播放的能力(暂停、停止以及改变播放位置)。

②一个故事面板中可以放置多个动画,并且每个动画可用于不同的元素和属性。

③故事面板的定义如下:

<Storyboard>
    <DoubleAnimation 
        Storyboard.TargetName="cmdGrow" 
        Storyboard.TargetPRoperty="Width"
        To="250" 
        Duration="0:0:5">
    </DoubleAnimation>
</Storyboard>二、何处定义触发器
可以在以下4个位置定义触发器:

在样式中(Styles.Triggers)在控件模版中(ControlTemplate.Triggers)在数据模版中(DataTemplate.Triggers)直接在元素中定义事件触发器(FrameworkElement.Triggers),仅支持事件触发器。 三、直接在元素中定义事件触发器触发器实例

<Button Padding="10" Name="cmdGrow" Height="40" Width="160"
        HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button.Triggers>
        <EventTrigger>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetProperty="Width"
                        To="250" 
                        Duration="0:0:5">
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
    <Button.Content>
        Click and Make Me Grow
    </Button.Content>
</Button>四、在样式中定义触发器实例

<Window x:Class="Animation.AnimationInStyle"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
    Title="AnimationInStyle" Height="300" Width="300"
    >
    <Window.Resources>
        <Style x:Key="GrowButtonStyle">
            <Style.Triggers>
                <Trigger Property="Button.IsPressed" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetName="cmdGrow" 
                                    Storyboard.TargetProperty="Width"
                                    To="250" 
                                    Duration="0:0:5">
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Button Padding="10" Name="cmdGrow" Height="40" Width="160" Style="{StaticResource GrowButtonStyle}"
            HorizontalAlignment="Center" VerticalAlignment="Center">
            Click and Make Me Grow    
    </Button>
</Window>