如何绘制 NavigationView 页面的内容？答案

【问题标题】：How to draw the content of a NavigationView page?如何绘制 NavigationView 页面的内容？
【发布时间】：2021-12-23 06:45:39
【问题描述】：

我正在尝试制作 UWP 应用。

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

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

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

【问题讨论】：

标签： c++ xaml uwp uwp-xaml

【解决方案1】：

更新：

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

这是你可以参考的代码

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。或查看XAML Controls Gallery app。

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

【讨论】：

非常感谢，但是设置页面呢？我在文档中找不到它的规则...
@Seaender07 我已经更新了我的答案，请检查一下。