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>

score 0 · Accepted Answer · answered Jan 15 '17 at 15:56

0

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.

answered Jan 15 '17 at 15:56

Bart

9,925
7
47
64

Thanks Bart, it worked out ... but the problem is, I still can't stack those images right beneath the hamburger button like it is in real apps. I haven't given them any margins, but still they don't arrange themselves like they're supposed to. – Pratyush Pareek Jan 15 '17 at 16:41
Please open a new question if you have a layout specific problem so each question so it can be found easier on google etc. Don't forget to copy your SplitviewLogoStyle in that new question. – Bart Jan 15 '17 at 17:13

The splitview is not opening on debugging

1 Answers1