在布局中，我們經常會看到漢堡菜單。它大概是這個樣子的：

漢堡菜單效果圖

那么這個是怎么做出來的呢？

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>

自此，一個“乞丐版”的漢堡菜單就完成了。