Create UWP hamburger menu in 10 minutes, uwp hamburger menu

Create UWP hamburger menu in 10 minutes, uwp hamburger menu

What is a hamburger menu?

A hamburger menu refers to a sidebar that can be popped up and pulled back. Hamburger menus are common in UWP and Android applications.

 

First, we will list all the prerequisites:

1,SplitView

2,StackPanel

3,ListBox

3,TextBlock

4,RelativePanel

6,Button

7,Grid

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

First, we split the homepage into two parts.

1 <Grid.RowDefinitions>2     <RowDefinition Height="Auto" />3     <RowDefinition Height="*" />4 </Grid.RowDefinitions>

Then, use RelativePanel to pin the button to the left of the first block. Segoe MDL2 Assets is a built-in font for Windows 10, and the E700 is the "three" icon in the hamburger menu.

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

First, we define SplitView, and then change the Button click event to control the opening and closing of the menu.

1 <SplitView Name = "MySplitView" 2 Grid. row = "1" 3 DisplayMode = "CompactOverlay" 4 OpenPaneLength = "200" 5 CompactPaneLength = "56" 6 HorizontalAlignment = "Left"> 7 <SplitView. pane> 8 <! -- Write the Content in the menu here --> 9 </SplitView. Pane> 10 <SplitView. Content> 11 <! -- Write something outside the menu here --> 12 </SplitView. Content> 13 </SplitView>

Note: Attributes of SplitView:

DisplayMode refers to the pop-up and recovery methods. There are four different effects.

OpenPaneLength and CompactPaneLength indicate the length of the pop-up menu and the length of the recall menu, respectively.

 

Then, set the button event.

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

 

Then, set the options in the menu.

 1 <ListBox SelectionMode="Single"  2          Name="IconsListBox"  3          SelectionChanged="IconsListBox_SelectionChanged"> 4     <ListBoxItem Name="ShareListBoxItem"> 5         <StackPanel Orientation="Horizontal"> 6             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;" /> 7             <TextBlock Text="Share" FontSize="24" Margin="20,0,0,0" /> 8         </StackPanel> 9     </ListBoxItem>10 11     <ListBoxItem Name="FavoritesListBoxItem">12         <StackPanel Orientation="Horizontal">13             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE734;" />14             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />15         </StackPanel>16     </ListBoxItem>
17 </ListBox>

I set the ListBox selection mode to Single, which indicates Single choice, and set an event at the same time.

I set each ListBoxItem to a StackPanel, stacked icons and text horizontally, and fine-tuned them at the same time.

Next, set the selection event.

1 private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)2     {3     if (ShareListBoxItem.IsSelected) {}4     else if (FavoritesListBoxItem.IsSelected) {}5     }

A simple hamburger menu is complete.

Next, paste the complete XAML code.

 1 <Page 2     x:Class="HamburgerExample.MainPage" 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5     xmlns:local="using:HamburgerExample" 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 8     mc:Ignorable="d"> 9 10     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">11         <Grid.RowDefinitions>12             <RowDefinition Height="Auto" />13             <RowDefinition Height="*" />14         </Grid.RowDefinitions>15         <RelativePanel>16             <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" />17         </RelativePanel>18         <SplitView Name="MySplitView" 19                    Grid.Row="1" 20                    DisplayMode="CompactOverlay" 21                    OpenPaneLength="200" 22                    CompactPaneLength="56" 23                    HorizontalAlignment="Left">24             <SplitView.Pane>25                 <ListBox SelectionMode="Single" 26                          Name="IconsListBox" 27                          SelectionChanged="IconsListBox_SelectionChanged">28                     <ListBoxItem Name="ShareListBoxItem">29                         <StackPanel Orientation="Horizontal">30                             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE72D;" />31                             <TextBlock Text="Share" FontSize="24" Margin="20,0,0,0" />32                         </StackPanel>33                     </ListBoxItem>34 35                     <ListBoxItem Name="FavoritesListBoxItem">36                         <StackPanel Orientation="Horizontal">37                             <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE734;" />38                             <TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0" />39                         </StackPanel>40                     </ListBoxItem>41 42                 </ListBox>43             </SplitView.Pane>44             <SplitView.Content>45                 <TextBlock Name="ResultTextBlock" />46             </SplitView.Content>47         </SplitView>48         49     </Grid>50 </Page>