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>