Sample of Microsoft Hamburger Menu (Buttons) with Xaml

Here I will show code sample on how to create Hamburger Buttons with XAML: well what this app does its actually simple but it could be added  to  so as to make it's more dynamic and suit your purpose. I have the Xaml code and the app screenshot  below.

Get access to my Hambuger menu code on github

See screenshorts here.

XAML CODES
Main page.xaml
<Page
x:Class="HamburgerExampTolu.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HamburgerExampTolu"
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"
Content="&#xE700;"
FontFamily="Segoe MDL2 Assets"
FontSize="36"
Click="HamburgerButton_Click"/>
</RelativePanel>
<SplitView Name="MySplitView"
Grid.Row="1"
CompactPaneLength="56"
DisplayMode="CompactOverlay"
FontSize="36"
HorizontalAlignment="Left">
<SplitView.Pane>
<ListBox Name="IconsListBox" SelectionChanged="IconsListBox_SelectionChanged">
<ListBoxItem Name="CallListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock
FontFamily="Segoe MDL2 Assets"
Text=" &#xE717;" FontSize="24"/>
<TextBlock Text="Call" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="LockedListBoxItem">
<StackPanel Orientation="Horizontal" >
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=" &#xE1F6;" FontSize="24" />
<TextBlock Text="Locked" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<SplitView.Content>
<TextBlock Name="ResultTextBlock"/>
</SplitView.Content>
</SplitView>
</Grid>
</Page>

                  MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace HamburgerExampTolu
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}
private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (CallListBoxItem.IsSelected)
{
ResultTextBlock.Text = "Call";
}
else if(LockedListBoxItem.IsSelected)
{
ResultTextBlock.Text = "Locked";
}
}
}
}
SCREENSHOTS
Load the app up and click on the hamburger button, then you have this:











Click on the call Icon an you see "Call"















Click on the Lock Icon  and you have "Locked"

No comments:

Post a Comment

Note: only a member of this blog may post a comment.