WPF界面侧边栏弹窗效果

因界面设计需要做一个侧边栏弹出的效果，目前接触到以下几种简单的实现方式

方式一：利用动画效果做控件的平移动画

涉及到如下知识（此处仅仅针对本项目中的需求简单介绍用法，详细关于wpf动画设计的自行百度学习）

Storyboard：

故事板，可用来分组多个动画，而且具有控制动画播放的能力。暂停、停止以及改变播放位置。

DoubleAnimationUsingKeyFrames：

按照一组 KeyFrames对 Double 的值进行动画处理。

RenderTransform：

WPF中的变形（RenderTransform）类是为了达到直接去改变某个Silverlight对象的形状（比如缩放、旋转一个元素）的目的而设计的，RenderTransform包含的变形属性成员就是专门用来改变Silverlight对象形状的，它可以实现对元素拉伸，旋转，扭曲等效果，同时变形特效也常用于辅助产生各种动画效果。

Window.Triggers：

事件触发器响应属性变化或事件(如按钮的Click事件)，并控制故事板。例如，为了开始动画，事件触发器必须开始故事板。

创建侧边栏的内容，此处用listview简单添加一些标签

   <ListView >
       <ListViewItem Height="45" Padding="0">
           <TextBlock Text="Recycle" Margin="10"/>
       </ListViewItem>
       <ListViewItem Height="45" Padding="0">
           <TextBlock Text="Help" Margin="10"/>
       </ListViewItem>
       <ListViewItem Height="45" Padding="0">
           <TextBlock Text="Send Feedback" Margin="10"/>
       </ListViewItem>
       <ListViewItem Height="45" Padding="0">
           <TextBlock Text="Recommend" Margin="10"/>
       </ListViewItem>
       <ListViewItem Height="45" Padding="0">
           <TextBlock Text="Premium Subscription" Margin="10"/>
       </ListViewItem>
       <ListViewItem Height="45" Padding="0">
           <TextBlock Text="Settings" Margin="10"/>
       </ListViewItem>
   </ListView>

在空间布局中添加变换方式

           <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform />
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>

在静态资源中添加故事板

添加打开和关闭菜单两种故事板，添加开始和结束两个关键帧

<Storyboard x:Key="CloseMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="需要创建动画的目标名">
                <EasingDoubleKeyFrame KeyTime="0" Value="250"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="OpenMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="需要创建动画的目标名">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="250"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

添加触发器

控制故事板

<Window.Triggers>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="触发按钮名">
            <BeginStoryboard Storyboard="{StaticResource CloseMenu}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="触发按钮名">
            <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
        </EventTrigger>
    </Window.Triggers>

添加触发按钮即可

---

还有一种比较简单易懂的实现方式
直接在按钮内部实现故事板。

<BeginStoryboard>
<Storyboard x:Name="HideStackPanel">
    <DoubleAnimation  Storyboard.TargetName="需要创建动画的目标名"
     Storyboard.TargetProperty="Width"
     BeginTime="0:0:0"
     From="230" To="65"
     Duration="0:0:0.2">                                                
   </DoubleAnimation>
</Storyboard>
</BeginStoryboard>

方式二：利用materialDesign:DrawerHost的抽屉效果

涉及到以下知识：

materialDesign控件库

一款开源的wpf样式库和控件集，可以通过nuget直接获取，配置方法百度即可，此处不细说

DrawerHost组件

可以做一个抽屉效果

首先给项目添加materialDesign包，在app.xaml添加资源，在xaml添加引用（此步骤可自行百度）

在需要弹出抽屉的布局外侧包裹DrawerHost

<materialDesign:DrawerHost IsTopDrawerOpen="{Binding .cs文件中定义的绑定属性}" >
          <被弹窗覆盖的部分>
</materialDesign:DrawerHost>

在materialDesign:DrawerHost 内部添加弹窗内容

<materialDesign:DrawerHost IsTopDrawerOpen="{Binding .cs文件中定义的绑定属性}" >
 <materialDesign:DrawerHost.TopDrawerContent >
     <弹窗的具体内容在此定义>
 </materialDesign:DrawerHost.TopDrawerContent>
     <被弹窗遮盖的部分>
</materialDesign:DrawerHost>

方式三：用计时器定时改变控件宽度实现窗口弹出

这种实现方法比较原始，就是按钮开启定时器，在执行函数里改变控件宽度

涉及到以下知识

DispatcherTimer

DispatcherTimer 类的工作方式是指定一个时间间隔，然后订阅每次满足该时间间隔时将发生的Tick事件。在调用Start()方法或将IsEnabled属性设置为 true之前，不会启动 DispatcherTimer 。

在界面对应的后台代码.cs中的初始化函数中创建DispatcherTimer对象，指定时间间隔，订阅事件

public MainWindow()
        {
            InitializeComponent();
            timer = new DispatcherTimer();
            timer.Interval = new TimeSpan(0, 0, 0, 0, 10);
            timer.Tick += Timer_Tick;
        }

在事件函数中对窗口的宽度递减或递增

private void Timer_Tick(object sender, EventArgs e)
        {
            if (hidden)
            {
                sidePanel.Width += 2;
                if (sidePanel.Width >= panelWidth)
                {
                    timer.Stop();
                    hidden = false;
                }
            }
            else
            {
                sidePanel.Width -= 2;
                if (sidePanel.Width <= 35)
                {
                    timer.Stop();
                    hidden = true;
                }
            }

        }

在对应的按钮响应函数中开启定时器即可