10分钟制作UWP汉堡菜单

什么是汉堡菜单？

汉堡菜单，指的是一个可以弹出和收回的侧边栏。在UWP和Android应用中，汉堡菜单都非常常见。

首先我们列出所有需要掌握的前置知识：

1，SplitView

2，StackPanel

3，ListBox

3，TextBlock

4，RelativePanel

6，Button

7，Grid

==============================

首先，我们来分割主页面，将其分为两块。

<Grid.RowDefinitions>
     <RowDefinition Height="Auto" />
     <RowDefinition Height="*" />
 </Grid.RowDefinitions>

之后，用RelativePanel将按钮固定在第一块的左边。Segoe MDL2 Assets是一款Windows 10内置的字体，E700是汉堡菜单的“三”字图标。

<RelativePanel>
     <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" />
 </RelativePanel>

我们先定义SplitView，再将Button的点击事件改成控制菜单的开合。

<SplitView Name="MySplitView" 
             Grid.Row="1" 
             DisplayMode="CompactOverlay" 
             OpenPaneLength="200" 
             CompactPaneLength="56" 
             HorizontalAlignment="Left">
     <SplitView.Pane>
         <!--这里写菜单内的东西-->
     </SplitView.Pane>
     <SplitView.Content>
         <!--这里写菜单外的东西-->
     </SplitView.Content>
 </SplitView>

注意，这里SplitView的各个属性：

DisplayMode指弹出和收回的方式，有四种，效果各不一样。

OpenPaneLength和CompactPaneLength分别指弹出菜单长度和收回菜单长度。

然后设置按钮事件。

private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
    MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}

之后，设置菜单里的选项。

<ListBox SelectionMode="Single" 
          Name="IconsListBox" 
          SelectionChanged="IconsListBox_SelectionChanged">
     <ListBoxItem Name="ShareListBoxItem">
         <StackPanel Orientation="Horizontal">
             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;" />
             <TextBlock Text="Share" FontSize="24" Margin="20,0,0,0" />
         </StackPanel>
     </ListBoxItem>
 
     <ListBoxItem Name="FavoritesListBoxItem">
         <StackPanel Orientation="Horizontal">
             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE734;" />
             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />
         </StackPanel>
     </ListBoxItem>17 </ListBox>

我将ListBox的选择模式设为Single，代表单选，同时设置一个事件。

我将每一个ListBoxItem设为一个StackPanel，横向堆叠了图标和文字，同时进行了微调。

接下来设置选择事件。

private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
     {
     if (ShareListBoxItem.IsSelected) {}
     else if (FavoritesListBoxItem.IsSelected) {}
     }

一个简单的汉堡菜单设置完成。

接下来贴出完整XAML代码。

<Page
     x:Class="HamburgerExample.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:HamburgerExample"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
         <RelativePanel>
             <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" />
         </RelativePanel>
         <SplitView Name="MySplitView" 
                    Grid.Row="1" 
                    DisplayMode="CompactOverlay" 
                    OpenPaneLength="200" 
                    CompactPaneLength="56" 
                    HorizontalAlignment="Left">
             <SplitView.Pane>
                 <ListBox SelectionMode="Single" 
                          Name="IconsListBox" 
                          SelectionChanged="IconsListBox_SelectionChanged">
                     <ListBoxItem Name="ShareListBoxItem">
                         <StackPanel Orientation="Horizontal">
                             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;" />
                             <TextBlock Text="Share" FontSize="24" Margin="20,0,0,0" />
                         </StackPanel>
                     </ListBoxItem>
 
                     <ListBoxItem Name="FavoritesListBoxItem">
                         <StackPanel Orientation="Horizontal">
                             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE734;" />
                             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />
                         </StackPanel>
                     </ListBoxItem>
 
                 </ListBox>
             </SplitView.Pane>
             <SplitView.Content>
                 <TextBlock Name="ResultTextBlock" />
             </SplitView.Content>
         </SplitView>
         
     </Grid>
 </Page>