[UWP Development] Simple Hamburg Navigation using SplitView ---- (2020.2.12 Learning Notes)

Keywords: Windows network

UWP implements Hamburg navigation in two ways, NavigationView and SplitView, which is newer (though newer, over several years old) than SplitView.
Although that's true, this time instead of using NavigationView for burger navigation, you use SplitView for burger navigation. Before using SplitView for burger navigation, several SplitView properties must be known (official document address https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.splitview).
One, DisplayMode
This property specifies the SplitView pane and how its contents are displayed and arranged.There are four display permutations, Overlay, Inline, CompactOverlay, CompactInline. These four display permutations are described below (Picture Source Network)


Two, OpenPaneLength
This property determines the length of the SplitView pane's full expansion
Three, CompactPaneLength
This property determines the state of the SplitView pane when it is not fully expanded (compact)
Fourth, IsPaneOpen
This property determines whether the SplitView pane is expanded
Once you know these three properties, it's easy to navigate. First, set DisplayMode to CompactOverlay, then set CompactPaneLength so that its unfolded length just fits the icon, then set OpenPaneLength so that its expanded length is long enough to display the icon and title, and finally set the click event so that when the button is clicked, IsPaneOpen reverses.This allows the SplitView pane to switch between expanded and unexpanded states via a button (code below)
Code in xaml

<Page
    x:Class="Hamburger_App.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hamburger_App"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
       
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="8*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <Button Height="100" Width="150" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="70" Click="HamburgerButton_Click"/>
        </StackPanel>
        
            <SplitView Name="MySplitViem" 
                       Grid.Row="1"
                       DisplayMode="CompactOverlay"
                       OpenPaneLength="450"
                       HorizontalAlignment="Left"
                       CompactPaneLength="150">
                <SplitView.Pane>
                    <ListBox SelectionMode="Single" Name="IconsListBox" SelectionChanged="IconsItemClick">
                    <ListBoxItem Name="HomeItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE10F;" FontSize="130">
                                
                            </TextBlock>
                            <TextBlock Text="Home" FontSize="100">
                                
                            </TextBlock>
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="StartItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE1CE;" FontSize="130">

                            </TextBlock>
                            <TextBlock Text="Start" FontSize="100">

                            </TextBlock>
                        </StackPanel>
                    </ListBoxItem>
                    
                    </ListBox>
                
                </SplitView.Pane>
           
            </SplitView>
        <Image Grid.Row="1">
            
        </Image>
        
    </Grid>
</Page>

Code in 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 described at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x804

namespace Hamburger_App
{
    /// <summary>
    ///Can be used on itself or to navigate to a blank page inside a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

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

        }

        private void IconsItemClick(object sender, SelectionChangedEventArgs e)
        {
           
        }
    }
}

Well, then the Hamburg Navigation function will be successful (as shown below)

Twenty-four original articles were published. Approved 0. Visited 459
Private letter follow

Posted by nca on Tue, 11 Feb 2020 21:19:54 -0800