微软信仰之路（一）——汉堡菜单

在布局中，我们经常会看到汉堡菜单。它大概是这个样子的：

汉堡菜单效果图

那么这个是怎么做出来的呢？

SplitView控件

做一个汉堡菜单，首先要使用SplitView控件。SplitView控件可以创建一个面板。这个面板可以显示或者隐藏，而且在切换的时候用动画效果。

SplitView分为两个部分。第一部分是可选的，也就是Pane部分；另一部分是必须的，也就是Content部分。

SplitView的两个部分

代码的结构大致是这样：

<SplitView>
    <SplitView.Pane>
        <TextBlock Text="Pane" />
    </SplitView.Pane>
    <SplitView.Content>
         <TextBlock Text="Content" />
    </SplitView.Content>
</SplitView>

需要注意的是，Pane和Content属性只能被设置一次。因此里面只能包含一个标签。如果要加入多个文本，则要用一个Grid或者其他包括起来。

SplitView的属性

SplitView包含几个特殊的属性。利用这些属性，我们就可以做出汉堡菜单的效果来。
首先是IsPaneOpen。这个值表现Pane是显示还是隐藏，而且默认是隐藏的。
其次是DisplayMode。DisplayMode有四种形式。

inline
overlay
CompactInline
CompactOverlay
前面加不加Compact的区别在于是否不完全隐藏。加上Compact就会显示出一部分。例如有很多汉堡菜单会显示一个图标。inline属性在显示的时候，会将Content的内容推开，而overlay属性则会将Content的内容覆盖。
如果加上了Compact，则需要CompactPaneLength属性来设置显示的多少。默认是48px。而还有OpenPaneLength属性，表示显示出来的时候，占多少个像素。当然还有其他的属性，例如可以通过BackGround去设置Content的背景颜色。

Icon

我们要做一个简易版的汉堡菜单。这个汉堡菜单在隐藏的时候，显示图标，而显示的时候显示出图标和文字。为了达到这个目的，我们先了解了解UWP中的Icon控件。
Icon有几种方式，分别是：

符号图标SymbolIcon：这是基于Segoe UI Symbol字体的预定义好的符号列表
字体图标FontIcon：可以使用字体来显示图标
位图图标BitmapIcon：使用位图的图标，缺点是不是矢量的，有可能失真
路径图标PathIcon：基于Path的图标
自定义图标

在这里我们只需要SymbolIcon和FontIcon就足够了。
SymbolIcon最为简单。只需要在里面设置自带的Icon就足够了。
代码如下：

<SymbolIcon Symbol="Switch" />

Symbol可以直接在编辑器中选择。微软的官网也有一览表，方便查看。
https://msdn.microsoft.com/zh-cn/library/windows/apps/windows.ui.xaml.controls.symbol.aspx

FontIcon本质上是字体。我们在寻找合适的字符图标的时候，可以先唤出Cortana，帮助我们找到字符映射表。再从字符映射表中选取合适的图标。

字符映射表

如图找到了空心雪人的图标。于是我们的代码如下：

<FontIcon FontFamily="Segoe UI Emoji" Glyph="$#x26c7;" />

ListBox

ListBox由很多个ListBoxItem组成。每一个Item可以有自己的定义。于是我们定义多个简单的，只包含图标和文本的Item就行了。这里我们写了两个ListBoxItem。一个是未来我们要写点击收缩的部分，另一个是“首页”。分别用了两种不同的Icon。

<ListBox>
     <ListBoxItem Name="HamburgerButton" Margin="0,5,0,5">
         <StackPanel Orientation="Horizontal" >
             <FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""/>
         </StackPanel>
     </ListBoxItem>
     <ListBoxItem Margin="0,5,0,5">
         <StackPanel Orientation="Horizontal" >
              <SymbolIcon Symbol="Emoji2" />
              <TextBlock Text="首页" Margin="24,0,0,0" VerticalAlignment="Center" />
         </StackPanel>
     </ListBoxItem>
</ListBox>

ListBox绑定事件

我们需要在按Name为HamburgerButton的Item时，汉堡菜单隐藏或者出现。为了达到这个目的，我们必须给这个Item绑定事件。当然我们也可以用双向绑定。但是直接绑定事件会更加简单。而且学会绑定事件，也可以照猫画虎地实现其他Item的功能。
在ListBox控件里面没有直接的Click，但是我们找到一个属性：SelectionChanged。当有东西被选中的时候，就调用其绑定的方法。于是我们在代码里面加入了这个属性。

<ListBox SelectionMode="Single" SelectionChanged="ListBox_SelectionChanged">

接着我们在cs文件里面实现这个方法。

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)  {
   if (HamburgerButton.IsSelected) {
      RootSplitView.IsPaneOpen = !RootSplitView.IsPaneOpen;
      HamburgerButton.IsSelected = false;
   }
}

当调用这个方法的时候，我们先判断是哪个Item被选中了。在这里，我们是直接判断HamburgerButton是否被选中。当HamburButton被选中时，我们将IsPaneOpen取反（先设置SplitView的Name，这里为RootSplitView）。接着，由于我们要再次按Item的时候，菜单重新出现，所有我们要保证原来的保持没有被选中的状态，即HamburgerButton.IsSelected = false。
未来，我们需要实现点击其他Item的效果时，只需要在这个方法里面添加其他效果就行。

自适应布局

最后，我们加入自适应布局。使得在窗口比较窄的时候，菜单隐藏，窗口比较宽的时候显示出来。这个比较简单，只需要在Setter里面设置IsPaneOpen即可。代码如下：

<VisualStateManager.VisualStateGroups>
   <VisualStateGroup x:Name="VisualStateGroup">
      <VisualState x:Name="VisualStateMin0">
         <VisualState.Setters>
           <Setter Target="RootSplitView.IsPaneOpen" Value="False" />
         </VisualState.Setters>
         <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="1"/>
         </VisualState.StateTriggers>
      </VisualState>
      <VisualState x:Name="VisualStateMin800">
         <VisualState.Setters>
            <Setter Target="RootSplitView.IsPaneOpen" Value="True" />
         </VisualState.Setters>
         <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="800"/>
         </VisualState.StateTriggers>
     </VisualState>
   </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

自此，一个“乞丐版”的汉堡菜单就完成了。