How to create a hamburger menu control for Windows 8.1 and Windows Phone
You've probably seen many apps on iOS and Android that have a "hamburger menu" layout control for their application. This unfortunately is not an out-of-box control on Windows or Windows Phone and instead requires you to create your own custom built control for this UI paradigm. I've seen several apps on Windows or Windows Phone implement this but they haven't always been done in a way that provides for maximum performance or sometimes lack the full interactions necessary to make the experience great. And most importantly, how it was built isn't always shared. My goal here is to help you implement the hamburger menu in your application without spending a great deal of time reinventing the wheel with creating something that can perform while ensuring it has all the appropriate UX interactions necessary to make it a great hamburger menu application. You'll find sample code attached to this post which you are free to manipulate to suit your needs. I plan on expanding this with a few different styles of hamburger menu I've seen and will post updates once I implement them. But for now, feel free to use this sample to help you get on your way, or even just to learn how a custom control is built.
A piece of advice if you plan on building your own. When it comes to performance, a common mistake I've seen when animating the left panel necessary for a hamburger menu is that devs will just animate on the width of the panel. The problem with this is that as the panel is being expanded or contracted, this will cause the pane to update its layout multiple times which is unnecessary. What you ideally want to just move the pane in or out of view without resizing it and causing any unneeded layout updates. The sample will show you how to do that using a CompositeTransform with the X value changing instead of the width of the pane.
If you have any questions on this control or building controls like this, feel free to post them in the comments section below.
Enjoy!
Microsoft.DX.HamburgerMenu.zip
Comments
Anonymous
April 12, 2015
Could you do a step by step of how to create a hamburger menu. PleaseAnonymous
July 09, 2015
Hi, great example, i added swipe, animation for the toggle button and back button will close the menu: github.com/.../HamburgerMenuAnonymous
July 27, 2015
How can I use this menu as a user control on my project?Anonymous
November 04, 2015
Hello, Great artical ! , I just want page navigation in menu , and CloseDrawer event for that . Can you help me for this ?Anonymous
January 13, 2016
How can I use this menu as a user control on my project? Thanks in advanceAnonymous
February 21, 2016
How can I use this menu as a user control on my project? Thanks in advance