CODEWITHSUNDEEP
c#xaml
Chris
Chris

Reputation: 1654

Hamburger Menu in XAML disappears after Frame is opened

I created this 'Hamburger Menu' in XAML for my UWP application. I'm using a frame to show different pages when a menu item is clicked.

My XAML:

<Grid.Background>
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF298025" Offset="0"/>
            <GradientStop Color="#FF107C10" Offset="1"/>
       </LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
       <RowDefinition Height="auto" />
       <RowDefinition Height="*" />
</Grid.RowDefinitions>
<RelativePanel>
       <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" />
</RelativePanel>
<SplitView x:Name="MySplitView"
                 Grid.Row="1" 
                 DisplayMode="CompactOverlay" 
                 OpenPaneLength="200" 
                 CompactPaneLength="56" 
                 HorizontalAlignment="Left">
        <SplitView.Pane>
              <ListBox SelectionMode="Single" x:Name="IconsListBox" SelectionChanged="IconsListBox_SelectionChanged">
                 <ListBoxItem x:Name="VoteListBoxItem">
                      <StackPanel Orientation="Horizontal">
                          <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE8E1;" />
                          <TextBlock Text="Vote" FontSize="24" Margin="20,0,0,0" />
                      </StackPanel>
                  </ListBoxItem>
                  <ListBoxItem x:Name="AppDetailsListBoxItem">
                      <StackPanel Orientation="Horizontal">
                          <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE115;" />
                          <TextBlock Text="App Details" FontSize="24" Margin="20,0,0,0" />
                      </StackPanel>
                  </ListBoxItem>
              </ListBox>
        </SplitView.Pane>
        <SplitView.Content>
              <Frame x:Name="ViewFrame" />
        </SplitView.Content>
</SplitView>

My C#:

private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
     ViewFrame = this.Frame;
     if (VoteListBoxItem.IsSelected) { Frame.Navigate(typeof(VotePage)); }
     else if (AppDetailsListBoxItem.IsSelected) { Frame.Navigate(typeof(AppDetailsPage)); }
}

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

The problem with this code is whenever a menu item is clicked, a page is indeed loaded into the frame, but the whole 'Burger Menu' disappears.

Upvotes: 1

Views: 338

Answers (1)

Arnaud Develay
Arnaud Develay

Reputation: 3970

You are navigating with the main frame, you should use the one declared in the SlipView Content like this:

private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (VoteListBoxItem.IsSelected)
        ViewFrame.Navigate(typeof(VotePage));
    else if (AppDetailsListBoxItem.IsSelected)
        ViewFrame.Navigate(typeof(AppDetailsPage));
}

Indeed ViewFrame is already created and you don't need to override it with a reference to the main page frame.

Upvotes: 1

Related Questions