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>