Windows 10 - Split View, Unleashing Hamburger Menu

Windows 10 is available for development and it's SDK has been released. Split View is a new addition to XAML in Windows 10. Let's learn about the Split View control. The Split View control can be used to make a nav pane pattern. To build this pattern, the developer needs to add an expand/collapse button that is formally called a Hamburger control.



The Split View control has an expandable pane and a content area. The content area is always visible. The pane can expand and collapse and remain in an open state and can present itself from either the left or the right side of an app's windows.

A Split View has one of the following 3 modes.

Overlay

The pane is hidden until opened. When open, the pane overlays the content area.

Inline

The pane is always visible and doesn't overlay the content area. The pane and content areas divide the available screen.

Compact

The pane is always visible in this mode that is just wide enough to show icons.

Note: usually 48 epx wide.

The pane and the content area divide the available screen real estate. Although the standard compact mode doesn't overlay the content area, it can transform to a wider pane to show more content that will overlay the content area.

Let's try to use a Split View to create a Hamburger menu.

Step 1

Ensure you have the development environment all set. The first thing you need to do is be sure you are running some version of Windows 10 that you can find on Windows Insider. You need to have Visual Studio 2015 Community Edition installed as well. Those are the only two things to ensure you have installed.

Step 2

Open Visual Studio Community Edition 2015. Now that you have opened Visual Studio, you need to select the Windows 10 section. In that you need to click on Blank Application and create that.

Step 3

Visual Studio will create the project and now you can see the project listings in the Solution Explorer. You will see that this project does not have a Windows Phone and Windows Store. There is only one project for both the Windows Phone store and the other.

Step 4

Go to MainPage.xaml and let's edit some XAML, you will see the Grid tag here, you just need to remove that and let's start our work by adding a SplitView control. Split View has two main elements, the pane and the content. The pane represents the menu that you want to be able to interact with and the content represents the main content of your page.

Here is the code:

<SplitView>
    <SplitView.Pane></SplitView.Pane>
    <SplitView.Content></SplitView.Content>
</SplitView>

Before you add content, you should specify the length of the pane in compact form and in open form and also some other properties just like I have done here.

<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
CompactPaneLength="50" OpenPaneLength="150">

Now each of the part needs a container that might be of any type, Grid, StackPanel or anything.

Let's add the grid and a simple textblock now.

<SplitView.Content>
    <Grid>
        <TextBlock Text="Content of SplitView " FontSize="45" Foreground="White"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</SplitView.Content>

Step 5

Now to create a Hamburger Button to be used to expand or contract the pane and to be used as the Menu Button. Now Hamburgers are quite famous and are used in Android and iOS. It's sign is 3 horizontal lines.

Let's add that, remember you need to add that in the <SplitView.Pane> tag and don't forget to add a container in that before you add a Hamburger Menu Button (StackPanel).

<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>

You would see that the click event handler is attached to the XAML of the Hamburger menu, I will explain later the purpose of this click event.

Step 6

You may add some more buttons below the Hamburger menu button, just like this:

<StackPanel Orientation="Horizontal">
    <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
    <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
    <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
    <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
    <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
    <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
</StackPanel>

Now our XAML is ready, you just need one more line in C# to make you Hamburger Menu working.

Step 7

You just need to add this simple line to the click event of the Hamburger menu button.

MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;

Conclusion

This is everything you need to make your own Hamburger menu. I hope you learned something good today, until the next article happy coding!

Screen shots





References 

• SplitView class

Code: GitHub.