UWP Navigation View disappeared

Question

I have NavigationView with 3 Buttons

<NavigationView x:Name="nvTopLevelNav"
            Margin="0,0,0,0"
            ItemInvoked="nvTopLevelNav_ItemInvoked"
            IsTabStop="False"
            AlwaysShowHeader="False"
            VerticalContentAlignment="Stretch" 
            HorizontalContentAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            Grid.RowSpan="1" 
            Grid.Row="1" 
            Grid.Column="1" 
            Grid.ColumnSpan="1"
            Padding="0,0,0,0" >
        <NavigationView.MenuItems>
            <NavigationViewItem Tag="Nav_BlankPage1" VerticalContentAlignment="Center">
                <TextBlock Tag="Nav_BlankPage1" Text="Nav_BlankPage1" />
            </NavigationViewItem>
            <NavigationViewItem Tag="Nav_BlankPage2" VerticalContentAlignment="Center">
                <TextBlock Tag="Nav_BlankPage2"   Text="Nav_BlankPage2"/>
            </NavigationViewItem>
            <NavigationViewItem Tag="Nav_BlankPage3" VerticalContentAlignment="Center">
                <TextBlock Tag="Nav_BlankPage3"   Text="Nav_BlankPage3" />
            </NavigationViewItem>
        </NavigationView.MenuItems>
        <Frame x:Name="MainFrame" 
           Grid.Column="1" 
           Grid.Row="1"
           VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Padding="0,0,0,0">
            <RelativePanel Grid.Column="0"
                   Grid.Row="1">
             </RelativePanel>
        </Frame>
    </NavigationView>

Code behind MainPage:

private void nvTopLevelNav_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
    if (args.IsSettingsInvoked)
    {
    }
    else
    {
        TextBlock ItemContent = args.InvokedItem as TextBlock;
        if (ItemContent != null)
        {
            switch (ItemContent.Tag)
            {
                case "Nav_BlankPage1":
                    MainFrame.Navigate(typeof(BlankPage1));

                    break;
                case "Nav_BlankPage2":
                    MainFrame.Navigate(typeof(BlankPage2));

                    break;
                case "Nav_BlankPage3":
                    MainFrame.Navigate(typeof(BlankPage3));

                    break;
                case "Nav_Settings":

                    break;
            }
        }
    }
}

Every Page has 3 buttons (code behind for the first):

private void btnBlankPage1_Click(object sender, RoutedEventArgs e)
{
    var _frame = (Frame)Window.Current.Content;
    _frame.Navigate(typeof(BlankPage1));
}

If I use NavigationView buttons everything is fine, but if I use buttons on the Page NavigationView disappeared.

Could you please clarify?

Answer 1

The reason is that you are navigating using the wrong Frame. The UI tree looks kind of like this in your case:

• Window
  • Frame
    • NavigationViewPage
      • MainFrame
        • Page

When you navigate through the NavigationView menu, things are okay, as you are using the inner MainFrame. However, on the other page you take the Frame at the root of the Window ((Frame)Window.Current.Content) and navigate in it. This navigates away the page containing the NavigationView and navigates in BlankPage1 on its place and hence the NavigationView disappears.

Instead you must navigate using MainFrame in the NavigationView. The easiest way to do this would be to add a Frame property to the page that contains the NavigationView and then use it for navigation:

public static Frame AppFrame { get; private set; }

And in the page constructor you assign it:

AppFrame = MainFrame;

Now you use this to navigate:

NavigationViewPage.AppFrame.Navigate(typeof(BlankPage1));

Where NavigationViewPage is the page that contains the NavigationView

Finally a note - you don't have to apologize for posting a question, that's what this site is for ;-) .