Storyboard使用随笔
Sliverlight情景下使用
方法一、 使用VisualStateManager 技术,调用 GoToState()
XAML代码:
<Grid x:Name="LayoutRoot" Background="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="myButtonStates">
<VisualState x:Name="Normal"></VisualState>
<VisualState x:Name="Changed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="Width" To="400" Duration="00:00:01">
</DoubleAnimation>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Button Width="100" Height="30" Content="点击我,让我长大" Click="Button_Click" x:Name="myButton"/>
</Grid>
C#代码:
private void Button_Click(object sender, RoutedEventArgs e)
{
System.Windows.VisualStateManager.GoToState(this, "Changed", true);
}
方法二、将Storyboard放在页面 Resources
XAML代码:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<Storyboard x:Name="myButtonChanged">
<DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="Width" To="400" Duration="00:00:01">
</DoubleAnimation>
</Storyboard>
</Grid.Resources>
<Button Width="100" Height="30" Content="点击我,让我长大" Click="Button_Click" x:Name="myButton"/>
</Grid>
C#代码:
private void Button_Click(object sender, RoutedEventArgs e)
{
Storyboard sb = LayoutRoot.Resources["myButtonChanged"] as Storyboard;
sb.Begin();
}
WPF情景下使用
方法一,事件触发器
<Grid>
<Button Width="100" Height="30" Content="点击我,让我长大" x:Name="myButton">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation To="400" Storyboard.TargetName="myButton" Storyboard.TargetProperty="Width" Duration="00:00:05">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
方法二,样式触发器
<Grid>
<Grid.Resources>
<Style x:Key="ButtonStyle">
<Style.Triggers>
<Trigger Property="Button.IsPressed" Value="True">
<!--Trigger.EnterActions当设置的属性改变到指定的值时,执行(此示例是IsPressed的值为True时)-->
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="400" Duration="00:00:02" Storyboard.TargetProperty="Width"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<!--Trigger.ExitActions当设置的属性还原时执行(此示例IsPressed的值回到False时)-->
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="100" Duration="00:00:02" Storyboard.TargetProperty="Width"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Button Width="100" Height="30" Content="按住鼠标,按钮宽度长大,松开,还原" x:Name="myButton" Style="{StaticResource ButtonStyle}">
</Button>
</Grid>
如果山不向我走来,我就向山走去!