Another new addition to the Windows 10 SDK is the SplitView. It’s used to display a side menu, such as the one usually called “hamburger menu”.
It’s quite straightforward to use. The “Pane” property contains the code of the menu itself. The page content goes into the control itself. The “OpenPaneLength” sets the width of the menu. Lastly, the “PanePlacement” property indicates on which side of the page the menu will appear (currently limited to left and right, top and bottom doesn’t seem to be supported). The menu is opened by setting the “IsPaneOpen” property to true, and closed when the property is set to false or the user taps outside.
Wrapping it up, we get this simple implementation (also using the RelativePanel shown in the previous post). I chose to use a thin clickable vertical bar on the left side rather than a button, to show the menu:
In the code-behind, we react to the “Tapped” event to show/collapse the menu:
Launching the app, we get this simple layout which demonstrates my prowess as designer:
Tapping on the red bar brings the menu with a smooth sliding animation (that I can’t show on screenshots):
The control seems a bit limited right now, but we must keep in mind that it’s still an early preview. In any case, it’s a nice addition to the WinRT toolbox.
Is there any support for opening the side menu by swiping? To me it is a must for at side menu…
Not on the version I’ve seen, it’s up to the developer to implement the gesture. That said, it’s still an early preview, things may change a lot before the first release.
Swiping is going to be a challenge as windows 10 desktop owns the swipe from left gesture.
Yeah for desktop it might be a challenge, but on smartphones I think the swiping is a must. Otherwise single-handed users would need to stretch their thumb to be able to tap the button and show the view.