首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将UWP NavigationView内容设置为页面将显示页面的类型名称

UWP(Universal Windows Platform)是微软推出的一种应用程序开发框架,用于创建适用于所有 Windows 10 设备的应用程序。NavigationView 是 UWP 中的一个控件,用于在应用程序中创建导航菜单。

将 UWP NavigationView 内容设置为页面将显示页面的类型名称,可以通过以下步骤实现:

  1. 在 XAML 中定义 NavigationView 控件,并设置其 PaneDisplayMode 属性为 Left 或 Top,以确定导航菜单的显示位置。
代码语言:txt
复制
<NavigationView x:Name="MyNavigationView" PaneDisplayMode="Left">
    <!-- 导航菜单项 -->
    <NavigationView.MenuItems>
        <NavigationViewItem Icon="Home" Content="首页" Tag="HomePage" />
        <NavigationViewItem Icon="Favorite" Content="收藏" Tag="FavoritesPage" />
        <NavigationViewItem Icon="Settings" Content="设置" Tag="SettingsPage" />
    </NavigationView.MenuItems>
    
    <!-- 页面内容区域 -->
    <Frame x:Name="MyFrame" />
</NavigationView>
  1. 在代码中处理导航菜单项的选择事件,根据选择的菜单项加载对应的页面。
代码语言:txt
复制
private void MyNavigationView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{
    string tag = args.InvokedItemContainer.Tag.ToString();
    Type pageType = Type.GetType("YourAppName." + tag);
    MyFrame.Navigate(pageType);
}
  1. 在每个页面的代码中,重写 OnNavigatedTo 方法,以在页面加载时设置导航菜单项的选中状态和页面标题。
代码语言:txt
复制
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    string pageName = this.GetType().Name;
    foreach (NavigationViewItemBase item in MyNavigationView.MenuItems)
    {
        if (item is NavigationViewItem && item.Tag.ToString() == pageName)
        {
            MyNavigationView.SelectedItem = item;
            break;
        }
    }

    // 设置页面标题
    MyNavigationView.Header = pageName;
}

这样,当用户选择导航菜单中的某个项时,页面内容区域将显示对应的页面,并在导航菜单中高亮显示选中项,并将页面标题设置为选中页面的类型名称。

在腾讯云的产品中,与 UWP 开发相关的产品包括云服务器、云数据库、云存储等。具体推荐的产品和产品介绍链接地址可以根据实际需求和场景进行选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用Fluent Design System (上)

Background acrylic 透视整个应用UI,可以看到应用窗体后的其它应用或桌面(在ThemeResource中名称包含 -AcrylicWindow-)。 ?...In-app acrylic 只透视套用了acrylic brush的元素(在ThemeResource中名称包含 -AcrylicElement-)。 ?...只需在源页面和目标页面的操作对象使用相同的Connected.Key即可轻松实现Connected animations。...3.1 使用NavigationView更新导航菜单 以前很多教程都专门讲解了怎么制作汉堡包菜单,现在UWP终于提供了默认方案。...> 3.2 内容扩展到标题栏 在程序启动或每次更改主题颜色时调用SetupTitlebar()这个函数,注意要根据当前主题颜色改变TitleBar上按钮的颜色(因为官方文档上没有,所以很多人会忘了处理按钮的颜色

2.4K30

Extensions in UWP Community Toolkit - Overview

来看一下简单的代码示例: 我们使用两个 TextBlock 来显示实际绑定尺寸的宽度和高度,图一是 EnableActualSizeBinding True 时的显示,图二时 False 时的错误信息显示...设置 Both;可以看到运行显示中 test01 test03 这些元素的显示设置是一致的。...我们来看一下简单的代码示例: 我们水平放置了两个按钮,Mouse.Cursor 分别设置 UniversalNo 和 Wait,可以看到显示状态和设置的一致。...- 修改 NavigationView 的行为,在用户点击一个已经选择的 Item 时,内容收起; 我们来看一下简单的代码示例: 我们引用了 VSCode 的 Activity Bar 的样式,大家可以和...; 开发者设置正则表达式或内建校验类型后,有两种校验模式:1.

1.3K120

使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题

本文简单了解一下 Microsoft.UI.Xaml 库,然后实际看看它的效果。 ---- Windows 10 的兼容性问题 在创建 UWP 应用的时候,我们可以选择目标版本和最低版本。...▲ 图中目标版本 17134,最低版本 14393。事实上,目标版本必须是 17134,最低只能支持到 14393。 然而,每一次新版本 Windows 10 的推出,都带来大量新的开发 API。...官方对此包的描述: This package provides backward-compatible versions of Windows UI features including UWP XAML...> 还记得本文开头那张 Visual Studio 的兼容性提示图片吗?...实际的错误原因是 —— 目标 SDK 需要设置 17134 —— 这是必须的! ? 当然,这个版本号并不是跟随系统的,而是跟随 Microsoft.UI.Xaml 库的。

3.3K10

Android开发笔记(一百三十三)导航视图NavigationView

导航视图NavigationView 很多App都有个人中心的侧滑菜单,通常在页面左侧边缘右拉时,即可弹出个人中心的菜单页面。...对于Android来说,侧滑功能用到了抽屉布局DrawerLayout,我们只要把页面的根布局设置DrawerLayout,并指定弹出的侧滑视图,就能通过右拉页面左侧边缘,从而拉出定义好的侧滑视图。...如果想让菜单图标显示原来的面貌,可在代码中调用setItemIconTintList方法,图标色彩设置null。下面是显示原始菜单图标颜色的导航页面截图。 ?...比如下面几点界面调整,NavigationView就无法实现: 1、不能动态调整菜单项的个数与内容。...至于导航菜单上面的头部视图,也可调用ListView的addHeaderView方法来实现。 下面是采用ListView定制的导航菜单页面截图。 ?

2.5K40

win10 uwp 关联文件

首先,需要打开 Package.appxmanifest 在声明添加文件 添加一个功能,需要写的最少的项是名称,文件类型两个。 上面的图就是我添加 jpg 关联的方法,建议是写多一些。...如果已经打开了软件,通过 frame.Navigate 重新跳转到主页面页面跳转就是这样,页面传入可以是 StorageFile 但是需要在对应的页面使用对应类型。...可以看到关联的代码很简单,实际上也是很简单 刚才只是用最简单的方式写了显示名称,但是一个好看的应用,需要在关联文件加上图片。...加上图片就是在刚才打开的功能可以看到图标,选择一个好看的图片,在用户打开这个文件的默认应用设置自己的应用时,就会使用这个应用设置的图标 添加 Verb 也就是在文件右键菜单里面显示多个其他选项,注意此时的...FileActivatedEventArgs 的 Verb 判断 在 FileActivatedEventArgs 的 Verb 会设置刚才设置的 Id 的值,如 <uap3:Verb Id="doubi

64520

实现滑动菜单

所谓的滑动菜单就是一些菜单选项隐藏起来,而不是放置在主屏幕上,然后可以通过滑动的方式菜单显示出来。这种方式既节省了屏幕空间,又实现了非常好的动画效果。 下面我们实现一个相对基本的滑动菜单。...参考文献:《第一行代码(第2版)》 主要内容 ---- 1.使用DrawerLayout控件搭建基础框架 2.使用NavigationView优化滑动菜单页面 步骤概要 ---- 1.使用DrawerLayout...,用于作为滑动菜单中显示内容: ?...2.使用NavigationView优化滑动菜单页面 NavigationView是Design Support库中提供的一个控件,它可以滑动菜单页面的实现变得非常简单。...现在menu和header都准备好了,可以使用NavigaView了,修改activity_main.xml中的代码,如下: 其中我们可以看到,如图中27-28行,我们准备好的menu和header设置

1.7K20

张高兴的 Xamarin.Forms 开发笔记: Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

待项目创建完成后,解决方案共包含四个项目:共享代码项目、 Android 项目、 iOS 项目、 UWP 项目。共享代码项目存放共享页面的地方,个人觉得和类库还是有点区别的。 ?...里面的属性有页面的标题 Title,左侧的图标 Icon,图标的字体 FontFamily,目的页面 DestPage,还有左侧的矩形显示 Selected 与 颜色 Color。...要注意的是,Color 类型 Xamarin.Forms 中的。...MasterPage.xaml   MasterPage ”大纲“视图,即左侧显示 ListView 的页面。...Views 中的几个页面 Title 不给可以,但标题栏不会显示页面的 Title,不好看。 四、Android 项目 HamburgerMenuDemo.Android 1.

4.5K100

SwiftUI 4.0 的全新导航系统

样式的做法,一分二的方式让布局表达更加清晰,同时也会强迫开发者 SwiftUI 应用对 iPadOS 和 macOS 做更多的适配。...( 可以堆栈中所有视图的 NavigationLink 处理程序统一到根视图中 ),有利于复杂的逻辑判断,也方便剥离代码 NavigationLink 优先使用最接近的类型目标管理代码。...⚠️ 在使用堆栈管理系统的情况下,请不要在编程式导航中混用声明式导航,这样会破坏当前的视图堆栈数据 下面的代码,如果点击声明式导航,导致堆栈数据重置。...动态控制多栏显示状态 另一个之前困扰多栏 NavigationView 的问题就是,无法通过编程的手段动态地控制多栏显示状态。...NavigationSplitView 在构造方法中提供了 columnVisibility 参数 ( NavigationSplitViewVisibility 类型 ),通过设置该参数,开发者拥有了对导航栏显示状态的控制能力

10.2K62

win10 uwp 关联文件

添加一个功能,需要写的最少的项是名称,文件类型两个。 上面的图就是我添加 jpg 关联的方法,建议是写多一些。如果是作为测试,想看这个功能是如何使用,就只需要写文件类型。...如果已经打开了软件,通过 frame.Navigate 重新跳转到主页面页面跳转就是这样,页面传入可以是 StorageFile 但是需要在对应的页面使用对应类型。...现在尝试运行一下这个项目,然后找到一张 jpg 图片,右击打开方式选择这个项目,这时就可以看到 UWP 应用显示图片。...可以看到关联的代码很简单,实际上也是很简单 刚才只是用最简单的方式写了显示名称,但是一个好看的应用,需要在关联文件加上图片。...加上图片就是在刚才打开的功能可以看到图标,选择一个好看的图片,在用户打开这个文件的默认应用设置自己的应用时,就会使用这个应用设置的图标 ----

82720

本地化入门

在XAML中添加一个TextBox,设置x:UidUsernameTextBox,x:UidXAML元素和资源文件中的资源进行关联: 运行后即可看到UsernameTextBox的Header设置"用户名",Width100。...在“设置\区域和语言”中将"English"设置默认语言,再次运行应用可看到运行在英语环境下的效果。 ? 这样基本的本地化功能就实现了。...只在设置页面及菜单这些在切换语言时不会重新加载的UI上使用Binding,其它地方不变,这样简单的动态切换语言就实现了。运行结果如上,可以看到TextBox右键菜单仍未切换语言,需要重新启动。...Binding Source={StaticResource R},Path=DynamicResources[Main]}"/> 不知道为什么,在VisualStudio上有时没办法获得设计时视图,所有文字都显示

2K40

如何使用Fluent Design System (下)

4.1 使用HamburgerMenu代替NavigationView UWP Community Toolkit中的HamburgerMenu是以前制作汉堡包导航菜单最常用的方案,升级到2.0版本以后它会判断运行的...若要使用条件 XAML,Visual Studio 项目的最低版本必须设置内部版本 15063(Creators Update)或更高版本,且目标版本设置比最低版本更高的版本。...Reveal最大的作用是一组元素提示其可操作区域,例如ListView,NavigationView,或类似计算器应用上的无边框按钮。如果整个UI都用上Reveal,对重要信息反而是种干扰。 6....在触屏时操作十分自然舒适的各种操作(典型的如横向移动)到了桌面的鼠标的操作变得十分别扭。...6.3 未来 通过FDS的五个主题可以看出FDS的一个主要目的是让数字内容通过设备与真实世界链接,这是个很好的愿景。

1.2K20

解析SwiftUI布局细节(二)循环轮播+复杂布局

前言 ---- 上一篇我们总结的主要是VStack里面的东西,由他延伸到 @ViewBuilder, 接着我们上一篇总结的我们这篇内容主要说的是下面的几点,在这些东西说完后我准备解析一下苹果在...这篇我们还是说我们关于SwiftUI的东西,再提一下Demo代码我已经提交上Git了,目前Demo进度一级页面基本上结束,地图点击大头针的添加也刚处理完,代码有需要的小伙伴可以去Git看看,项目地址...具体的代码如下: TabView(selection: $selection) { /// 里面的具体内容,我们写了三 ForEach(0..<3){...有一个还得说明一下,GeometryReader 改变了它显示内容的方式。在 iOS 13.5 中,内容放置方式 .center。在 iOS 14.0 中则为:.topLeading。...在 iOS 13.5 中,内容放置方式 .center。

11.8K20

1. Jetpack源码解析---看完你就知道Navigation是什么了?

2.1.1 DrawerLayout 侧边栏的用法和我们之前的使用一样,配置好我们NavigationView面的_headerLayout_、_menu_即可; **注意:**这里面的menu有一点和我们之前的不一样...默认的起始页面是homeFragment,下面还有一个codeFragment,其实这两个fragment也就是对应着在menu中的两个菜单,同时也对应我们侧边栏中的一个首页和一个代码, <item...,通过编译代码,会自动我们生成一个XXXFragmentDirections类,它里面我们作了参数的封装,而NavController的navigate()方法同时支持direction类型的传递。...接下来我们看到NavController设置了setGraph(),也就是我们xml里面定义的navGraph,导航布局里面的Fragment及action跳转等信息。...4.3.3 NavigationUI 通过NavgationUI类,各个View设置接口监听,View的UI状态和NavController中的切换Fragment做了绑定。

2.5K30

1. Jetpack源码解析---看完你就知道Navigation是什么了?

2.1.1 DrawerLayout 侧边栏的用法和我们之前的使用一样,配置好我们NavigationView面的_headerLayout_、_menu_即可; **注意:**这里面的menu有一点和我们之前的不一样...默认的起始页面是homeFragment,下面还有一个codeFragment,其实这两个fragment也就是对应着在menu中的两个菜单,同时也对应我们侧边栏中的一个首页和一个代码, <item...,通过编译代码,会自动我们生成一个XXXFragmentDirections类,它里面我们作了参数的封装,而NavController的navigate()方法同时支持direction类型的传递。...接下来我们看到NavController设置了setGraph(),也就是我们xml里面定义的navGraph,导航布局里面的Fragment及action跳转等信息。...4.3.3 NavigationUI 通过NavgationUI类,各个View设置接口监听,View的UI状态和NavController中的切换Fragment做了绑定。

2.1K20

1. Android_Jetpack组件---Naviagtion源码解析

2.1.1 DrawerLayout 侧边栏的用法和我们之前的使用一样,配置好我们NavigationView面的_headerLayout_、_menu_即可; **注意:**这里面的menu有一点和我们之前的不一样...默认的起始页面是homeFragment,下面还有一个codeFragment,其实这两个fragment也就是对应着在menu中的两个菜单,同时也对应我们侧边栏中的一个首页和一个代码, <item...,通过编译代码,会自动我们生成一个XXXFragmentDirections类,它里面我们作了参数的封装,而NavController的navigate()方法同时支持direction类型的传递。...接下来我们看到NavController设置了setGraph(),也就是我们xml里面定义的navGraph,导航布局里面的Fragment及action跳转等信息。...4.3.3 NavigationUI 通过NavgationUI类,各个View设置接口监听,View的UI状态和NavController中的切换Fragment做了绑定。

2.1K10
领券