如何绘制 NavigationView 页面的内容？

Question

我正在尝试制作一个 UWP 应用程序。

我决定添加一个 NavigationView 对象，并创建了一些部分。我阅读了文档，但我没有找到如何绘制页面的内容。

有一个Content 属性，但它在菜单中设置了页面标签的内容，而不是我正在尝试做的单个标签的页面内容。

我该怎么做？感谢所有会回答的人。

Answer 1

更新：

对于设置页面，如果您通过启用IsSettingsVisible property来使用NavigationView的默认项，您可以检查IsSettingsInvoked值NavigationViewItemInvokedEventArgs.

这是您可以参考的代码

void App3::MainPage::nvSample_ItemInvoked(Windows::UI::Xaml::Controls::NavigationView^ sender, Windows::UI::Xaml::Controls::NavigationViewItemInvokedEventArgs^ args)
{
    if (args->IsSettingsInvoked == true)
    {
        contentFrame->Navigate(Windows::UI::Xaml::Interop::TypeName(SettingPage::typeid));
    }
    else
    {
        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));
        }
    }
}
}

如果我没理解错的话，你想在NavigationView中显示一个Page，对吧？一般我们会在NavigationView内容里加一个Frame object。 Frame Object 可以根据需要显示页面。

这是一个关于 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>

在代码隐藏中，您需要处理 NavigationView.ItemInvoked Event 来控制导航。喜欢下面的代码：

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));
   
}

这是一个非常简单的 c++/cx 演示。您可以获得有关 NavigationView 文档的更多信息：NavigationView. Or check it in the XAML Controls Gallery app.

您还可以在此处查看 NavigationView 源代码：Get the source code (GitHub)。

如何绘制 NavigationView 页面的内容？

How to draw the content of a NavigationView page?

c++

xaml

uwp

uwp-xaml