The splitview is not opening on debugging

Question

I am using Visual Studio 2015 and learning making UWP Apps. I want to make hamburger style navigation but the splitview doesn't open even after I click the Hamburger button, neither it shows any error. I have also added the event handler on the hamburger button. Another problem that's happening is, that the image (which is getting displayed properly) is shifted slightly to the right and bottom.

Code behind:

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

My page:

<Page
    x:Class="MathAssistant.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MathAssistant"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Name="HBbutton" Click="HBbutton_Click" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"  FontSize="25" Background="BlueViolet"/>

        <TextBlock Name="Heading" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Center"  FontSize="36" Foreground="CornflowerBlue" />

        <SplitView Grid.Row="1" 
                   Name="MySplitView"
                   DisplayMode="CompactOverlay" 
                   OpenPaneLength="200" 
                   CompactPaneLength="56">
            <SplitView.Pane>
                <ListBox SelectionMode="Single" 
                         SelectionChanged="MenuListBox_SelectionChanged">
                    <ListBoxItem Name="MenuItemUnitConverter">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="Assets/unitconverterlogo.png" Style="{StaticResource SplitviewLogoStyle}" />
                            <TextBlock FontSize="24" Margin="20,0,0,0">Unit Converter</TextBlock>
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="MenuItemCalculator">
                        <StackPanel Orientation="Horizontal">
                            <Image  Source="Assets/calculatorlogo.png" Style="{StaticResource SplitviewLogoStyle}"/>
                            <TextBlock FontSize="24" Margin="20,0,0,0">Calculator</TextBlock>
                        </StackPanel>
                    </ListBoxItem>
                </ListBox>
            </SplitView.Pane>
            <SplitView.Content>
                <Frame Name="MyFrame"></Frame>
            </SplitView.Content>

        </SplitView>
    </Grid>
</Page>

Answer 1

Your SplitView is not opening because it's stuck in the first Grid.Column with a Width of 50 pixels. You can fix that by changing the ColumnSpan on the SplitView.

<SplitView Grid.Row="1" Grid.ColumnSpan="2"
           Name="MySplitView"
           DisplayMode="CompactOverlay" 
           OpenPaneLength="200" 
           CompactPaneLength="56">

You typically set your hamburger button inside your SplitView pane, see this MSDN article as a sample implementation of the SplitView.