Панель навигации представляет один из распространенных способов навигации по разделам внутри приложения. Вместе с панелью навигации, как правило, используется специальная кнопка с изображением трех полосок. За эти три полоски подобную организацию меню назвали "гамбургером". При нажатии на кнопку панель навигации раскрывается, отображая список элементов меню для выбора, а при повторном нажатии закрывается. Панель навигации хорошо подходит для тех случаев, когда в нашем приложении есть несколько различных разделов и когда необходимо, чтобы меню скрывалось, освобождало место основному контенту страницы.
Для примера создадим новый проект и прежде всего добавим в него три пустые страницы 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="" 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=""
Шрифт "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="" 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="" /> <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="" /> <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="" /> <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">