StoryBoard的作用：在动画和希望应用动画的属性之间架起了一座桥梁。

在我们开发过程中，常用到点击一个按钮能够使菜单栏滑出或滑入的设计，下面就用一个简单的例子实现这种设计。

方法一、在事件响应函数中调用StoryBoard

前端代码：

<Window x:Class="StoryBoardDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:StoryBoardDemo" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Window.Resources> <Storyboard x:Key="ShowListView"> <DoubleAnimation Duration="0:0:0.3" To="200" Storyboard.TargetName="listView" Storyboard.TargetProperty="Width"/> </Storyboard> <Storyboard x:Key="HideListView"> <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetName="listView" Storyboard.TargetProperty="Width"/> </Storyboard> </Window.Resources> <Grid> <ListView Name="listView" Width="0" Background="Yellow" HorizontalAlignment="Left"> <Label Content="张三丰" FontSize="20" HorizontalAlignment="Center"/> <Label Content="小明" FontSize="20" HorizontalAlignment="Center"/> <Label Content="马冬梅" FontSize="20" HorizontalAlignment="Center"/> </ListView> <Button Width="150" Height="60" Content="Click Me" FontSize="30" Click="Button_Click"/> </Grid> </Window>

在资源中定义StoryBoard，在Button的Click事件中调用。

后端代码：

namespace StoryBoardDemo { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { if(listView.Width<=0) { Storyboard sbd = Resources["ShowListView"] as Storyboard; sbd.Begin(); } else { Storyboard sbd = Resources["HideListView"] as Storyboard; sbd.Begin(); } } } }

效果如下图：

方法二、在触发器中添加StoryBoard

前端代码：

<Window x:Class="StoryBoardDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:StoryBoardDemo" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <ListView Name="listView" Width="0" Background="Yellow" HorizontalAlignment="Left"> <Label Content="张三丰" FontSize="20" HorizontalAlignment="Center"/> <Label Content="小明" FontSize="20" HorizontalAlignment="Center"/> <Label Content="马冬梅" FontSize="20" HorizontalAlignment="Center"/> </ListView> <ToggleButton Width="150" Height="60" Content="点我" FontSize="30"> <ToggleButton.Triggers> <EventTrigger RoutedEvent="ToggleButton.Checked"> <BeginStoryboard> <Storyboard > <DoubleAnimation Duration="0:0:0.3" To="200" Storyboard.TargetName="listView" Storyboard.TargetProperty="Width"/> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="ToggleButton.Unchecked"> <BeginStoryboard> <Storyboard > <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetName="listView" Storyboard.TargetProperty="Width"/> </Storyboard> </BeginStoryboard> </EventTrigger> </ToggleButton.Triggers> </ToggleButton> </Grid> </Window>

在ToggleButton的触发器中使用StoryBoard，按钮选中时显示列表，按钮未选中时隐藏列表。

效果如下图：

点击“点我”按钮，可看到左侧列表滑动效果。