Add a hamburger to the Windows 10 app menu

There are only a few days left until the release of dozens, and Visual Studio 2015 is already available for developers. One of the new XAML controls is SplitView. This control, like a Grid container, remains invisible until nothing is placed in it.

Let's look at an example of creating a menu with a hamburger button based on SplitView. The main purpose of SplitView is just the simplification of navigation. In fact, this control replaces the Charm Panel, which still works in Windows 10 applications, but will not be used subsequently. It goes well with the Navigation Framework, introduced in Silverlight applications and now available in Windows UWP.

The appearance of the application window with a menu and a hamburger button is something like this:



A hamburger button is called three horizontal stripes. You can call this button to your taste: a cheeseburger, veggie burger, adidas, an erroneous pregnancy test or something else.

Now, seriously. SplitView contains 2 child property tags - Pane and Content. In a simplified form, together with the child controls, it looks like this:

The contents of the Pane will be the navigation bar, but Content is already the rest of the contents of your application. Pane has 2 states. In the state IsPaneOpen = "false", the width of the panel is quite small, sufficient only to display the buttons. In addition, the panel may be completely absent. Let's set the width of the closed panel to 50 pixels in CompactOverlay mode. In this case, all elements located inside the Pane beyond 50 pixels simply will not be displayed. An attribute tag might look something like this:

The display mode in this case is CompactOverlay. The following picture describes other possible SplitView modes:



In order to make the picture clearer, I will describe the modes with the words:
Inline - when Pane is open, it collides the content. When closed, the content returns to its original position. If the user clicks outside the panel, then it does not close.
Overlay - when Pane is open, it lies on top of the content. When closed, it is invisible. In order to close the panel, the user can click the screen outside of Pane.
Compact Inline - when Pane is open, it pushes content. When closed, the content returns to its original position, but Pane remains visible in compact mode.
Compact overlay- when Pane is open, it lies on top of the content. When closed, it remains visible in compact mode.

To display a button with a width of 50 pixels (for a closed panel), and then, with the panel open, show some other elements, it will be convenient for us to use a StackPanel with a horizontal layout.

So, we use a StackPanel with a vertical layout, inside which there are panels with a horizontal layout:

As you can see, the content of the horizontal StackPanel is a button with a width of 50 px and text that will only become visible when the panel is open.

Pay attention to the font used to display pictures on buttons - glyphs.
In Windows 8.x, we searched for glyphs in the Segoe Symbol font that was present on the system. In 10-ke there is a new font Segoe MDL2 Assets. Incidentally, MDL2 stands for Microsoft Design Language 2.0. This font contains the hamburger icon we need.



You were not going to use pictures for jpg / png / gif icons? Vector characters from a font are much better than bitmaps.

The HamburgerButton button click event is such a simple code that opens the panel:

private void HamburgerButton_Click(object sender, RoutedEventArgs e) 
{
    if (!this.MySplitView.IsPaneOpen)
    {
        this.MySplitView.IsPaneOpen = true;
    }
}

Pane can contain not only buttons and text, but also any other controls that seem appropriate to you. One of her recommended controls is RadioButton.

If we want to set a glyph directly to the value of RadioButton, we cannot do this. But getting around this is quite simple by specifying the binding of the content to the tag like this: Content = {TemplateBinding Tag}

You can get full control over the tag by taking it out of the attributes:

Thus, you can use not only text as a tag, but also, for example, an image (replacing TextBlock with Image).

SplitView.Content inside itself may contain a Grid or some other layout element:

as well as the Frame element that allows us to navigate the content of the application:

In this case, usually the “Back” button is usually added above the hamburger button so that navigation is convenient.

Written based on

Windows 10 SplitView - Build Your First Hamburger Menu
Implementing an Awesome Hamburger Button with XAML's new SplitView control in Windows 10
Video on Channel9 Developer's Guide to Windows 10 Preview: (05) SplitView Control