XAML

    <Grid>
        <Grid.Resources>

            <!--  弹出边框动画, 边框宽度增加，背景蒙板显示  -->
            <Storyboard x:Key="ShowSide">
                <DoubleAnimation
                    Storyboard.TargetName="SideFrame" Storyboard.TargetProperty="Width" From="0" To="150"
                    Duration="0:0:0.5">
                    <DoubleAnimation.EasingFunction>
                        <CubicEase EasingMode="EaseOut" />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
                <DoubleAnimation
                    Storyboard.TargetName="MaskBorder" Storyboard.TargetProperty="Opacity" From="0" To="0.5"
                    Duration="0:0:0.5">
                    <DoubleAnimation.EasingFunction>
                        <CubicEase EasingMode="EaseOut" />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>

            <!--  隐藏边框动画, 边框宽度减少，背景蒙板隐藏  -->
            <Storyboard x:Key="HideSide">
                <DoubleAnimation
                    Storyboard.TargetName="SideFrame" Storyboard.TargetProperty="Width" To="0" Duration="0:0:0.5">
                    <DoubleAnimation.EasingFunction>
                        <CubicEase EasingMode="EaseOut" />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
                <DoubleAnimation
                    Storyboard.TargetName="MaskBorder" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.5">
                    <DoubleAnimation.EasingFunction>
                        <CubicEase EasingMode="EaseOut" />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>

            <!--  方便设置测试按钮的样式  -->
            <Style BasedOn="{StaticResource {x:Type Button}}" TargetType="Button">
                <Setter Property="Width" Value="200" />
                <Setter Property="Height" Value="45" />
                <Setter Property="Margin" Value="12" />
            </Style>

        </Grid.Resources>

        <StackPanel
            Margin="24,0,0,0" HorizontalAlignment="Left"
            Orientation="Vertical">

            <Button Content="显示侧边栏">
                <Button.Triggers>
                    <!--  点击按钮调用显示动画  -->
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource ShowSide}" />
                    </EventTrigger>
                </Button.Triggers>
            </Button>

            <Button Content="隐藏侧边栏">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource HideSide}" />
                    </EventTrigger>
                </Button.Triggers>
            </Button>

        </StackPanel>

        <!--  背景蒙板, 防止点击到下面的内容  -->
        <Border
            x:Name="MaskBorder"
            Background="Gray" IsHitTestVisible="False" Opacity="0" />

        <!--  滑出框  -->
        <Grid
            x:Name="SideFrame"
            Width="150"
            HorizontalAlignment="Left"
            Background="Beige">

            <Grid.Triggers>

                <EventTrigger RoutedEvent="Loaded">
                    <!--  初始化时将边框先收起来  -->
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="SideFrame" Storyboard.TargetProperty="Width" To="0" Duration="0:0:0" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>

                <!--  鼠标点击时，调用隐藏动画  -->
                <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
                    <BeginStoryboard Storyboard="{StaticResource HideSide}" />
                </EventTrigger>

            </Grid.Triggers>

            <Grid.Effect>
                <DropShadowEffect
                    BlurRadius="3" Opacity=".5" ShadowDepth="4" />
            </Grid.Effect>

            <TextBlock
                HorizontalAlignment="Center" VerticalAlignment="Center"
                FontSize="18" FontWeight="Black" Text="点击关闭" />

        </Grid>

    </Grid>