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:
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