在布局中，我们经常会看到汉堡菜单。它大概是这个样子的：
汉堡菜单效果图
那么这个是怎么做出来的呢？
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>
自此，一个“乞丐版”的汉堡菜单就完成了。
网友评论