在布局中，我們經常會看到漢堡菜單。它大概是這個樣子的：
那么這個是怎么做出來的呢？
SplitView控件
做一個漢堡菜單，首先要使用SplitView控件。SplitView控件可以創建一個面板。這個面板可以顯示或者隱藏，而且在切換的時候用動畫效果。
SplitView分為兩個部分。第一部分是可選的，也就是Pane部分；另一部分是必須的，也就是Content部分。
代碼的結構大致是這樣：
<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>
自此，一個“乞丐版”的漢堡菜單就完成了。
