I have been developing Windows Universal Platform app (UWP) on windows 10. You can see my latest app here. Windows 10 now presents a solid development platform with most reach as there are definitely more windows PC available. The UWP as we all know is a single windows that runs on phone, tablet and PC. Microsoft has done an excellent job in merging all the OS and creating an unified platform. Along the way there are some new controls that Microsoft has introduced which makes the development easier. We are going to see one such control that helps in implementing a Navigation Pattern.
SplitView control in Windows 10 provides an easier way to implement a modern navigation pattern in UWP. The control contains 2 part to it.
Splitview pane Spilt view content
Split View Pane is to hold the navigational objects like buttons, Hamburger menu etc. The Pane also contains default animation and has properties to control the animation.
There are 4 properties that control the animation and display of the pane.
Display Mode Property :
Inline : Hidden by default and appears when triggered by pushing the body to the left/rightOverlay : Hidden by default and Overlays on top of the content body when triggeredCompactInline : Visible and works the same way as inline.CompactOverlay : Visible and works the same way as overlay.
In addition to setting the display mode to CompactInline or CompactOverlay the OpenPaneLength property can also be specified for how wide the pane should be when opened and CompactPaneLength can be used to specify the width of the pane in compact mode. Note that OpenPaneLength is used by inline and overlay style whereas CompactPaneLength is used only by the compact option of inline and overlay.
Now, lets add the ubiquitous hamburger menu. To do this Microsoft has provided font icons which we can use with out having to install new fonts.Segoe UI MDL2 is the natively supported in windows 10 which is what I will be using and it has a font icon for the hamburger menu. You can view that by opening the Character Map app in your windows 10.
Once you have the character map a simple menu can be created using a button.
<SplitView.Pane>
<StackPanel Background="BurlyWood"><Button Click="Button_Click">
<ContentControl>
<FontIcon FontFamily=”Segoe MDL2 Assets”
Glyph=”” Width=”30" Height=”30" />
</ContentControl>
</Button>
</StackPanel>
</SplitView.Pane>
We will not implement an event handler on the button inside the pane to open and close the pane.
private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
navigation.IsPaneOpen = !navigation.IsPaneOpen;
}
Now that pretty much gives you a hamburger menu based navigation pattern using Windows 10 Splitview Control. You can add more navigation buttons in this pane like home, settings etc. using the same font and button.
There are some inherent problems with this spilt view control as you can see the hamburger menu is part of the splitview pane which mean when using the inline or overlay mode the button is hidden by default. We need to implement the button outside of the split view pane.
The split view as you can see is contained in a page so which creates another problem where this has to be implemented in each and every page in the application. This can be solved by creating a shell frame and loading other page frames instead of the page. We will see an example in future in implementing this pattern. This would be better implemented using MVVM speaking of which I am using MVVM light template in this project.
There are standard boiler plate code which we need to keep adding in every application and every page. This is annoying as a developer and hope Microsoft comes up with a solution. In the mean time I found a great GitHub project by Jerry Nixon creating and templates for lot of these things and I find it immensely helpful. Also, he has a article talking about another way of implementing the hamburger navigation pattern.
