如何绘制 NavigationView 页面的内容？

Posted 2023-03-25

【中文标题】如何绘制 NavigationView 页面的内容？

【英文标题】：How to draw the content of a NavigationView page?

【发布时间】：2021-12-23 06:45:39

【问题描述】：

我正在尝试制作 UWP 应用。

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

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

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

【参考方案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 我已经更新了我的答案，请检查一下。