Developing For Windows 10 - SplitView Navigation Menus

Introduction

With the release of Windows 10 and the SDK which followed, I thought I’d share some helpful tips for developers new and old to get themselves up and running with the new platform.

In this topic, I’m going to cover the new SplitView control. The SplitView control essentially allows developers to show content in a side panel and in this post, we’ll look at using that side panel to create a navigation system for your application. That doesn’t mean that it can’t be used for other things however, like this example of an application I’m working on that combines the use of the navigation system with space for showing content.

So many developers out there who have worked with iOS and Android creating sidebar navigation systems will be familiar with a common term referred to as “the hamburger menu”. When working with the SlideView control, developers have the option to choose any means possible to show and hide it. To keep it simple though, Microsoft has added the “hamburger” icon to their Segoe MDL2 font which allows developers to create the same menu toggle button in their Windows 10 applications.

For a quick overview of the SplitView control and what it can do for your application, here are some must-know properties and what they do for your app:

CompactPaneLength – When using either of the compact display modes, this will determine how wide your compacted menu will be.
OpenPaneLength – When your menu is open, this will determine how wide your menu will be.
PanePlacement – This determines which side of the screen you’d like to display the menu, left or right (default is to the left).
IsPaneOpen – This determines whether the menu is open or closed. When bound to, you can control this in your code so you determine when to close or open it.
DisplayMode – This comes in 4 flavors:

Inline – The menu is shown alongside the content of the SplitView, and does not close when the user interacts with the content.
Overlay – The menu covers the content of the SplitView, and does close when the user interacts with the content.
CompactInline – The length provided by the CompactPaneLength is used to determine how much space to show the menu alongside the content of the SplitView. When opened, the content is pushed away from the menu and does not close when the user interacts with the content.
CompactOverlay – The length provided by the CompactPaneLength is used to determine how much space to show the menu alongside the content of the SplitView, When opened, the menu overlays the content and does close when the user interacts with the content.

As I’ve been working through my own applications for Windows 10, I’ve come accustomed to creating app-wide navigation using this new SplitView control. As such, I needed to create a way for me to display the pages of the app without navigating away or having to write the SplitView into my controls multiple times as I may have when I used to create Windows 8.1 universal applications.

As such, I created my own custom template which essentially does all of this for me out of the box, creating me an app template that I can jump into without any modifications to it.

It includes a simple menu system, similar to that shown in the apps in the image at the top of this article, where you can see the icons when the menu is collapsed but you get more content out of it when it’s expanded.

The template also contains a Frame within the SplitView which is used for the main navigation part of the application, so when you select an item in the custom SplitView menu, it will cause a navigation event to occur within the Frame. This means you can create applications that use a common app page utilizing the new SplitView control but also keep that same MVVM friendly navigation of applications that you’re familiar with in Windows 8.1!

As it has been extremely helpful for developing familiar Windows 10 apps, I’ve posted up the source for my template on GitHub which you can take a look at here: Windows-Universal-SplitViewTemplate.

Feel free to leave any feedback, especially if you find any problems with the template, and definitely feel free to contribute towards it if there are areas you feel could be improved!

Summary

In this article, we learned about developing for Windows 10 - SplitView Navigation Menus.