wpf 点击展开/收缩侧边栏

<Window
    x:Class="Animation.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:local="clr-namespace:Animation"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">

    <Window.Resources>

        <Storyboard x:Key="story1">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="MyAnimatedTranslateTransform"
                Storyboard.TargetProperty="X"
                Duration="0:0:0.5">
                <LinearDoubleKeyFrame KeyTime="0" Value="0" />
                <LinearDoubleKeyFrame KeyTime="0:0:0.25" Value="10" />
                <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="20" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard
            x:Key="story2"
            Storyboard.TargetName="MyAnimatedTranslateTransform"
            Storyboard.TargetProperty="X">
            <DoubleAnimationUsingKeyFrames Duration="0:0:0.5">
                <LinearDoubleKeyFrame KeyTime="0" Value="20" />
                <LinearDoubleKeyFrame KeyTime="50%" Value="10" />
                <LinearDoubleKeyFrame KeyTime="100%" Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <!--  定义展开动画  -->
        <Storyboard x:Key="ExpandSidebar">
            <DoubleAnimation
                Storyboard.TargetName="Sidebar"
                Storyboard.TargetProperty="Width"
                To="200"
                Duration="0:0:0.35">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseInOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

        <!--  定义收缩动画  -->
        <Storyboard x:Key="CollapseSidebar">
            <DoubleAnimation
                Storyboard.TargetName="Sidebar"
                Storyboard.TargetProperty="Width"
                To="50"
                Duration="0:0:0.35">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseInOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>

    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border x:Name="Sidebar" Width="200">

            <!--<ItemsControl VerticalAlignment="Top">
                <system:String>ItemsControl</system:String>
                <system:String>ItemsControl</system:String>
                <system:String>ItemsControl</system:String>
                <system:String>ItemsControl</system:String>
                <system:String>ItemsControl</system:String>
            </ItemsControl>-->


            <StackPanel>
                <Button Height="30" Content="Home" />
                <Button Height="30" Content="Setting" />
                <Button Height="30" Content="Message" />
            </StackPanel>
        </Border>

        <Border
            Grid.Column="1"
            BorderBrush="#999999"
            BorderThickness="1,0,0,0">
            <ToggleButton
                x:Name="ToggleSidebarButton"
                Width="30"
                Height="30"
                Margin="5,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                IsChecked="True">
                <ToggleButton.Style>
                    <Style TargetType="ToggleButton">
                        <Setter Property="Content" Value="▶" />
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Content" Value="◀" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ToggleButton.Style>
                <ToggleButton.Triggers>
                    <EventTrigger RoutedEvent="ToggleButton.Checked">
                        <BeginStoryboard Storyboard="{StaticResource ExpandSidebar}" />
                    </EventTrigger>

                    <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                        <BeginStoryboard Storyboard="{StaticResource CollapseSidebar}" />
                    </EventTrigger>
                </ToggleButton.Triggers>
            </ToggleButton>
        </Border>

    </Grid>
</Window>