SplitView Menu in Universal Windows (UWP) – Part1

uwp split view drawer

Hi All

It’s been a while since I’ve posted anything, primarily because the WPF world had become very stagnant and uninteresting. After a brief flirtation with XAML in Xamarin, I am back with renewed enthusiasm, as I believe Microsoft’s new ‘Universal Windows Platform’ (UWP) is a great new set of XAML-based technologies, and worthy of excitement.
I intend to create a series of posts, as I create custom controls for use in UWP projects. Many of these projects will materialise in the Windows Store at some point, but for the moment I am crafting a suite of controls to provide me with some UX ‘essentials’.

This post is about one of the core visual components that need to be present in many navigation-based apps. The side ‘hamburger’ menu has finally been recognised by Microsoft as a great bit of UX – and essential for mobile navigation schemes.

Windows 10, with its adaptable ‘responsive’ UI capability requires that the SplitView (hamburger) menu needs to work differently for a range of screen size. This is achieved with the use of Adaptive Triggers, and the XAML declaration and use of this responsive technology is shown in the standard template I have created for this component.

(Disclaimer: Some of the code I have written has been inspired by the ‘Microsoft Examples’ sample app collection available from the Windows dev centre. What I have written improves and extends this initial code example, and componentises it for use as an independent control)

NOTE: All source code for this article (including the complete component source-code) is available from my GitHub repository. https://github.com/deanchalk/SplitViewMenuUWP

I have created the component to work for 3 different development use-cases

In this post, I focus on the simplest use-case

1) Scenario 1 – Simple use – where the developer just utilises the standard configuration of the control:

Here is the XAML:

And here is the ViewModel is is bound to:

And this is how it looks:

This is the SplitView on a smaller screen - the side menu has collapsed

This is the SplitView on a larger screen, the menu is visible by default

I hope you like this post series so far. Please follow the next installment – SplitView Menu Control – Part 2

Also, I’d love to know what you think about this post – so please feel free to comment below.

Don’t forget – all source code for this article (including the complete component source-code) is available from my GitHub repository. https://github.com/deanchalk/SplitViewMenuUWP

Dean

About the author

Dean Chalk

I am a freelance (contract) Microsoft WPF developer, specialising in challenging, high-performance user interface development. I have been working exclusively on enterprise WPF app development since 2006, and I have been a part of some of the most demanding WPF projects ever created withing the Investment Banking / trading industry.


>