Меню "Гамбургер" и панель навигации

Панель навигации представляет один из распространенных способов навигации по разделам внутри приложения. Вместе с панелью навигации, как правило, используется специальная кнопка с изображением трех полосок. За эти три полоски подобную организацию меню назвали "гамбургером". При нажатии на кнопку панель навигации раскрывается, отображая список элементов меню для выбора, а при повторном нажатии закрывается. Панель навигации хорошо подходит для тех случаев, когда в нашем приложении есть несколько различных разделов и когда необходимо, чтобы меню скрывалось, освобождало место основному контенту страницы.

Для примера создадим новый проект и прежде всего добавим в него три пустые страницы XAML по шаблону Blank Page, которые назовем home.xaml, share.xaml и settings.xaml:

И на каждой из страниц определим какой-нибудь содержимое, например, просто выведем какой-нибудь заголовок, чтобы эти страницы визуально друг от друга отличались.

Для создания панели навигации используется элемент SplitView. Так, определим в приложении на главной странице MainPage.xaml следующий интерфейс:

<Page
    x:Class="HamburgerMenuApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HamburgerMenuApp"
    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 x:Name="HamburgerButton" RelativePanel.AlignLeftWithPanel="True" 
                    FontFamily="Segoe MDL2 Assets" FontSize="36" 
                    Content="&#xE700;" Click="HamburgerButton_Click"/>
            <TextBlock Name="TitleTextBlock" RelativePanel.RightOf="HamburgerButton" 
                       FontSize="28" FontWeight="Bold" Margin="30 5 0 0" />
        </RelativePanel>

        <SplitView Name="mySplitView" Grid.Row="1" OpenPaneLength="200">
            <SplitView.Pane>
                <ListBox SelectionMode="Single" SelectionChanged="ListBox_SelectionChanged">
                    <ListBoxItem Name="home">
                        <TextBlock FontSize="24" Text="Главная" />
                    </ListBoxItem>
                    <ListBoxItem Name="share">
                        <TextBlock FontSize="24" Text="Поделиться" />
                    </ListBoxItem>
                    <ListBoxItem Name="settings">
                        <TextBlock FontSize="24" Text="Настройки" />
					</ListBoxItem>
                </ListBox>
            </SplitView.Pane>
            <SplitView.Content>
                <Frame Name="myFrame" />
            </SplitView.Content>
        </SplitView>
    </Grid>
</Page>

Для создания кнопки "Гамбургер" применяется элемент Button со следующими настройками:

<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" FontSize="36" Content="&#xE700;"

Шрифт "Segoe MDL2 Assets" имеет встроенные иконки, которые мы можем использовать в качестве значков на кнопках и других элементах управления. "Гамбургер" создается с помощью значения "". Все значения для данного шрифта можно посмотреть в таблице системных шрифтов.

В SplitView в виде скрытого списка ListBox помещено меню навигации. А в справа в SplitView находится элемент Frame, в который будут загружаться выше определенные страницы home.xaml, share.xaml и settings.xaml.

Перейдем к файлу кода и определим в нем следующее содержимое:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace HamburgerMenuApp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // по умолчанию открываем страницу home.xaml
            myFrame.Navigate(typeof(home));
            TitleTextBlock.Text = "Главная";
        }

        private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (home.IsSelected)
            {
                myFrame.Navigate(typeof(home));
                TitleTextBlock.Text = "Главная";
            }
            else if (share.IsSelected)
            {
                myFrame.Navigate(typeof(share));
                TitleTextBlock.Text = "Поделиться";
            }
            else if (settings.IsSelected)
            {
                myFrame.Navigate(typeof(settings));
                TitleTextBlock.Text = "Настройки";
            }
        }

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

В коде все относительно просто: в обработчике нажатия кнопки переключаем скрытость/раскрытость панели SplitView с меню навигации, а в обработчике выбора элемента списка загружаем нужную страницу во фрейм с помощью метода myFrame.Navigate();

Это был так называемый режим наложения, при котором выдвигающаяся панель меню частично перекрывает основное содержимое. Теперь рассмотрим другой режим - компактный. Для этого изменим разметку интерфейса:

<Page
    x:Class="HamburgerMenuApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HamburgerMenuApp"
    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 x:Name="HamburgerButton" RelativePanel.AlignLeftWithPanel="True" 
                    FontFamily="Segoe MDL2 Assets" FontSize="36" 
                    Background="{Binding ElementName=menu, Path=Background}" 
                    Content="&#xE700;" Click="HamburgerButton_Click"/>
            <TextBlock Name="TitleTextBlock" RelativePanel.RightOf="HamburgerButton" 
                       FontSize="28" FontWeight="Bold" Margin="30 5 0 0" />
        </RelativePanel>

        <SplitView Name="mySplitView" Grid.Row="1" OpenPaneLength="200" 
                   DisplayMode="CompactOverlay" CompactPaneLength="56">
            <SplitView.Pane>
                <ListBox x:Name="menu" SelectionMode="Single" SelectionChanged="ListBox_SelectionChanged">
                    <ListBoxItem Name="home">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontSize="36" FontFamily="Segoe MDL2 Assets" Text="&#xE80F;" />
                            <TextBlock FontSize="24" Text="Главная" Margin="10 0 0 0" />
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="share">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontSize="36" FontFamily="Segoe MDL2 Assets" Text="&#xE72D;" />
                            <TextBlock FontSize="24" Text="Поделиться" Margin="10 0 0 0" />
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="settings">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontSize="36" FontFamily="Segoe MDL2 Assets" Text="&#xE713;" />
                            <TextBlock FontSize="24" Text="Настройки" Margin="10 0 0 0" />
                        </StackPanel>
                    </ListBoxItem>
                </ListBox>
            </SplitView.Pane>
            <SplitView.Content>
                <Frame Name="myFrame" />
            </SplitView.Content>
        </SplitView>
    </Grid>
</Page>

Теперь к каждому пункту меню добавились специальные значки - символы из шрифта Segoe MDL2 Assets. Полный набор значков можно посмотреть в таблице шрифтов или в msdn

Неполное раскрытие панели меню позволяет увидеть значки и выбирать нужный пункт, не раскрывая полностью панель. Хотя в данном случае мы также можем воспользоваться кнопкой-Гамбургером:

Код C# в данном случае остается без изменений.

Есть еще один режим - раскрытый или закрепленный: панель меню закреплена в раскрытом виде. Панель меню может быть частично раскрыта, либо полностью. В этом случае кнопка-гамбургер может не потребоваться, если меню открыто полностью. В тоже время если меню открыто полностью, то оно может занимать много места на мобильных аппаратах или устройствах с малой шириной экрана, поэтому полностью раскрытый режим рекомендуется только для экранов с шириной о 720px и больше. Для этого режима изменим определение панели SplitView:

<SplitView Name="mySplitView" Grid.Row="1" OpenPaneLength="200" 
        DisplayMode="CompactInline" CompactPaneLength="56">