Partager via

Win 10 SplitView – Creating a Hamburger Button

  • Article

**YouTube Video - https://www.youtube.com/watch?v=ykFj582AoDY **

**GitHub sample - https://github.com/jqquick223/Win10Universal/tree/master/HamburgerButton **

 

Although we have added the SplitView control to XAML with the ability to create a hamburger menu, we lack documentation on how to actually create the hamburger button.  Honestly, I have searched and found very few things that provide insight and no documentation that shows exactly how to do so.  Because of this, I figured it would be nice to go ahead and document that here.

The idea is pretty simple, basically we are just creating a button and styling it as a hamburger button.  But where do we find the Hamburger Icon?  For this we are going to use the Segoe MDL2 Assets font.  You can find a list of the different icons available in this font here, https://modernicons.io/segoe-mdl2/cheatsheet/.  This site provides all the codes for the different icons.  So, where exactly is the Hamburger Button?  There it is!  I just did a Control+F to find it.

image

 

Alright, so we know where our icon is, let’s go ahead and create one in XAMl.  Again, we are going to create a simple button and set the FontFamily to the Segoe MDL2 Assets font and the content to the code that references the specific hamburger button icon, “&#E700;”.  The XAML looks like.

 

<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"/>

Here’s a picture of the final result!

image

 

We have not yet create our actual menu, but since there was so little documentation on creating the actual button, i figured we would start there!  That’s it.  It’s that simple!  Comment or find me on twitter @jamesqquick with any questions, comments, or concerns!

Comments

  • Anonymous
    June 09, 2015
    Thank you

  • Anonymous
    August 17, 2015
    @Anil thank you for visiting!

  • Anonymous
    August 23, 2015
    the page with the icons help to much

  • Anonymous
    November 18, 2015
    The comment has been removed

  • Anonymous
    January 24, 2016
    very helping thanks..