wpf 动画StoryBoard 简单列表缩进实例

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，按钮选中时显示列表，按钮未选中时隐藏列表。

效果如下图：

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