How I do Hamburger menu on SplitView, quick and dirty

I wanted to do a nice hamburger menu on my app, but it seems that all the samples found are doing it in different way compared how the default apps on Windows 10 seem to implement it. I don’t want to have CompactInlay menu always visible on the side of the screen, but just the hamburger button which would open it when clicked. This is how I implemented mine, hope you can get something out of it:

First I created BoolToVisibilityConverter class, so I can later on bind the visibility of the menu to the hamburger button (right click on project, add new item, class):

public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return (bool)value ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Then I open the MainPage.xaml and add the reference to the namespace in the page element after xmlns:local -line:

xmlns:utils="using:MyNameSpace.Utils"

where the MyNameSpace.Utils is the namespace where you created the BoolToVisibilityConverter -class in previous step.

After that, you would need to add in the resources the following:

<Page.Resources>
        <utils:BoolToVisibilityConverter x:Name="BoolToVisibilityConverter" />
    </Page.Resources>

Now that we have all the prerequisities in place, we can build the page itself. This is the barebone structure for the main page with hamburger menu and splitview:

<Grid Background="#FFFF8000">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <!--Menu bar on top-->
    <RelativePanel Grid.Row="0" >
        <ToggleButton x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="?" Width="50" Height="50" Background="Transparent" IsChecked="False"/>
        <TextBlock Text="My title" FontSize="32" Width="300" Height="40" Foreground="Black" RelativePanel.RightOf="HamburgerButton"/>
    </RelativePanel>
    <!--Hamburger menu-->
    <SplitView Grid.Row="1" x:Name="MySplitView" PanePlacement="Left" CompactPaneLength="50" OpenPaneLength="300" 
            IsPaneOpen="{Binding IsChecked, ElementName=HamburgerButton}" DisplayMode="Overlay" >
        <SplitView.Pane>
            <StackPanel Orientation="Vertical">
                <StackPanel x:Name="SettingsPanel" Orientation="Horizontal">
                    <Button x:Name="SettingsButton" FontFamily="Segoe MDL2 Assets" Content="?" Width="50" Height="50"/>
                    <TextBlock Text="Settings" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel x:Name="AboutPanel" Orientation="Horizontal">
                    <Button x:Name="AboutButton" FontFamily="Segoe MDL2 Assets" Content="&#xE77B" Width="50" Height="50"/>
                    <TextBlock Text="About" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
            </StackPanel>
        </SplitView.Pane>
        <!--Main content-->
        <Grid Grid.Row="1">
            
        </Grid>
    </SplitView>
</Grid>

On the code above, the RelativePanel section is for the menu bar, where the button and title are. In the SplitView section there is the SplitView.Pane where the actual menu is built, each item consists of vertical StackPanel, Button and TextBlock. Inside then there is the Grid where the actual page content can be put. That’s all required for simple hamburger menu, hope it’s helpful!