Home > Mobile >  How to draw the content of a NavigationView page?
How to draw the content of a NavigationView page?

Time:11-12

I'm trying to make an UWP app.

I decided to add a NavigationView object, and I created some sections. I read the documentation, but I didn't find out how to draw the content of the page.

There is a Content property, but it sets the content of the page's label in the menu, not the content of the page of a single label as I'm trying to do.

How can I do it? Thanks to everyone that will answer.

CodePudding user response:

If I understand you correctly, you want to show a Page in the NavigationView, right? Generally, we will add a Frame object in the NavigationView content. The Frame Object could show the Page as you want.

Here is a very simple example about the NavigationView:

 <NavigationView x:Name="nvSample" ItemInvoked="nvSample_ItemInvoked" Loaded="nvSample_Loaded">
        <NavigationView.MenuItems>
            <NavigationViewItem Icon="Play" Content="Menu Item1" Tag="SamplePage1" />
            <NavigationViewItem Icon="Save" Content="Menu Item2" Tag="SamplePage2" />
            <NavigationViewItem Icon="Refresh" Content="Menu Item3" Tag="SamplePage3" />
            <NavigationViewItem Icon="Download" Content="Menu Item4" Tag="SamplePage4" />
        </NavigationView.MenuItems>
        <Frame x:Name="contentFrame"/>
    </NavigationView>

In the code-behind, you will need to handle the NavigationView.ItemInvoked Event to control the navigation. Like the following code:

void App3::MainPage::nvSample_ItemInvoked(Windows::UI::Xaml::Controls::NavigationView^ sender, Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs^ args)
{
    auto navItemTag = args->InvokedItemContainer->Tag->ToString();

    if (navItemTag != nullptr)
    {
    // navigation logic here. You could use switch or other condition. This if is just a example.
    if (navItemTag->Equals("SamplePage1"))
    {
        contentFrame->Navigate(Windows::UI::Xaml::Interop::TypeName(SamplePage1::typeid));
    }
}
}

void App3::MainPage::nvSample_Loaded(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    //This is the HomePage
    contentFrame->Navigate(Windows::UI::Xaml::Interop::TypeName(HomePage::typeid));
   
}

This is a very simple c /cx demo. You could get more information about the NavigationView Document:NavigationView. Or check it in the XAML Controls Gallery app.

You could also check the NavigationView Source code here: Get the source code (GitHub).

  • Related