Windows 10 SplitView Hamburger Menu

The new control SplitView added in Windows 10 and are used to display side menu. Many of them called IT hamburger menu. Two things we need to know “Pane” and “Content”.

Pane

These properties contain the menu buttons in your app.

Content

The page content goes in this area.

<SplitView>
    <SplitView.Pane> //Add your menu here </SplitView.Pane>
    <SplitView.Content> //Add your content here </SplitView.Content>
</SplitView>

Using “IsPaneOpen” property you can set true or false, true for open and false to close.

Now create a new Windows 10 project and give proper name. After that open your Mainpage.xaml and you can see the empty Grid control as in the following screenshot,



Delete this grid and paste the following code:

<SplitView x:Name="MyMenu" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150">
    <SplitView.Pane>
        <StackPanel Background="Gray">
            <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" Click="HamburgerButton_Click" />
            <Button x:Name="button1" FontFamily="Segoe MDL2 Assets" Content=""></Button>
            <Button x:Name="button2" FontFamily="Segoe MDL2 Assets" Content=""></Button>
            <Button x:Name="button3" Content="Next Page" Click="button3_Click"></Button>
        </StackPanel>
    </SplitView.Pane>
    <SplitView.Content>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <TextBlock Text="Hamburger Menu Demo" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>
        </Grid>
    </SplitView.Content>
</SplitView>

In the above code we are creating the button in menu and styling to hamburger menu. We don’t need to add icons for button, just change the Font family to “Segoe MDL2 Assets” and set the content (cheat code) as your wish to see more icons cheat sheet codes.

For example, I set the content as “&#E700;” and it shows like the following image.



Now you can create button as per your need. Here I created 4 buttons for sample.

Finally, go to code behind page and I have one button click event to close and open the split view. In handler we simply want to set pane to close if it is open and vice versa like the following code.

private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
   MyMenu.IsPaneOpen = !MyMenu.IsPaneOpen;
}

private void button3_Click(object sender, RoutedEventArgs e)
{
   Frame.Navigate(typeof(Page1))
}

Now run the app and see the excepted output like the following screen.

For source code.