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.

New Post

TSQL-Working With Date And Time

Here you will learn how to work with the date and time in SQL Server. select  GETDATE() as dateNow This returns the current date and time. s...