UWP 扩展/自定义标题栏的方法,一些概念和一些注意事项
在 Windows 10 的前几个版本中将页面内容扩展到标题栏上还算简单,主要是没什么坑。直到一些新控件的引入和一些外观设计趋势变化之后,扩展标题栏开始出现一些坑了。
本文将重温 UWP 自定义标题栏或者扩展标题栏的方法,但更重要的是解决一些坑。
本文内容
- 扩展/自定义标题栏
- 一些概念
- 一些坑
- 控件在标题栏区域无法交互
- 更高的标题栏,或者被遮挡
- 在什么时机调用?
- 适配移动设备
扩展/自定义标题栏
要扩展标题栏,只需要拿到 CoreApplicationView
的实例,然后设置 TitleBar
的 ExtendViewIntoTitleBar
属性为 true
即可。
var applicationView = CoreApplication.GetCurrentView();
applicationView.TitleBar.ExtendViewIntoTitleBar = true;
要自定义标题栏,只需要拿到 ApplicationView
的实例,然后设置 TitleBar
里各种属性接口。
var titleBar = ApplicationView.GetForCurrentView().TitleBar;
titleBar.BackgroundColor = Colors.Khaki;
titleBar.ButtonBackgroundColor = Colors.Transparent;
一些概念
那么问题来了,为什么前者需要拿到 CoreApplicationView
的实例,后者需要拿到 ApplicationView
的实例?它们到底是什么区别?
我在 CoreApplication/Application、CoreWindow/Window 之间的区别 一文中提到过 CoreApplication
、CoreWindow
和 CoreDispatcher
之间的关系。继续借用那篇文章中的图:
其中,Window
是对 CoreWindow
的封装,提供了更多与 XAML 相关的功能。这里的 ApplicationView
也是这样,是对 CoreApplication
的封装,提供了 XAML 相关的功能。
那篇文章中详细描述了这几个概念之间的关系和区别。考虑到阅读的一致性,我摘抄过来:
具体来说,
CoreWindow
是与操作系统、与整个应用打交道的类型,提供了诸如窗口的尺寸、位置、输入状态等设置或调用;Window
是与应用内 UI 打交道的类型,比如可以设置窗口内显示的 UI,设置内部哪个控件属于标题栏,获取此窗口内的Compositor
。与之对应的,CoreApplicationView
是应用与操作系统交互,与窗口消息循环机制协同工作的类型,包含窗口客户区和非客户区设置;ApplicationView
也是与应用内 UI 打交道的类型,它可以使用 XAML 相关的类型对应用程序视图进行更方便的设置。总结起来,
CoreWindow
和CoreApplicationView
提供更加核心的操作系统或应用底层功能,而Window
和ApplicationView
对前者进行了封装,使得我们能够使用Windows.UI.Xaml
命名空间下的类型对窗口和应用视图进行控制。
于是,我们便能够理解为什么扩展标题栏和设置标题栏颜色会使用到两个不一样的类型了。
ExtendViewIntoTitleBar
是改变了窗口的客户区(Client Area)和非客户区(Non-client Area)组成,这是传统 Win32 编程中的概念,是更接近操作系统底层的概念。BackgroundColor
和 ButtonBackgroundColor
这里需要用到 Windows.UI.Xaml
命名空间中的颜色,而 CoreApplicationView
太底层,无法使用 XAML 颜色。
一些坑
控件在标题栏区域无法交互
想必当你扩展到标题栏后,在标题栏区域增加一些按钮的时候,肯定会遇到下面的情况:
▲ 按钮在标题栏区域的一半无法交互
这显然是无法接受的。
然而,当我们将一个 XAML 控件指定为标题栏之后,就只会是那个控件所在的区域响应标题栏操作,其他地方就会恢复正常。
// TitleBar 是我在 XAML 中写的一个 x:Name="TitleBar" 的控件。
Window.Current.SetTitleBar(TitleBar);
▲ 按钮在标题栏区域现在可以交互了
特别说明一下,SetTitleBar
传入的是 UIElement
类型的实例,也就是说这也是 XAML 交互的一部分。我们需要使用 Window
的实例,而不是 CoreWindow
的实例。
更高的标题栏,或者被遮挡
如果被指定为标题栏的控件更大,超出标题栏区域了,它还会成为标题栏吗?如果被其他控件遮挡了,它还会响应标题栏事件吗?
实际看来,无论它多大,都能响应标题栏事件;但被遮挡的部分就真的被遮挡了,没有标题栏响应。
▲ 更高的标题栏,或者被遮挡
事实上,指定为标题栏的控件可以在界面的任何地方,不需要一定在顶部。只不过,绝大多数不作死的应用都不会这样设置吧!
在什么时机调用?
扩展标题栏用的是 CoreApplicationView
,自定义标题栏颜色用的是 ApplicationView
,将控件指定为标题栏用的是 Window
。如果我们的应用只有一个视图,其实我们随便找一个初始化的地方调用就好了。但如果我们的应用有多个视图,那么给非主要视图调用的时候就需要在其初始化之后了。阅读 理解 UWP 视图的概念,让 UWP 应用显示多个窗口(多视图) 了解如何编写多个视图的 UWP 应用,了解非主要视图的初始化时机。
当然,如果你比较极客,从 Main
函数开始写 UWP 应用,就像我在 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序 一文中做的一样,那么你也需要等到初始化完毕之后才能调用(至少是 SetWindow
之后了)。
适配移动设备
移动设备上并不是标题栏,而是状态了和虚拟按键。关于扩展视图到这些区域,可以阅读 win10 uwp 标题栏 - 林德熙。
参考资料
- Title bar customization - UWP app developer - Microsoft Docs
我的博客会首发于 https://blog.walterlv.com/,而 CSDN 会从其中精选发布,但是一旦发布了就很少更新。
如果在博客看到有任何不懂的内容,欢迎交流。我搭建了 dotnet 职业技术学院 欢迎大家加入。
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名吕毅(包含链接:https://walterlv.blog.csdn.net/),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系。
UWP 扩展/自定义标题栏的方法,一些概念和一些注意事项相关推荐
- pccad自定义图框_(PCCAD自定义标题栏详细方法.doc
PCCAD2011自定义标题栏详细方法 下面以图3-1为例说明标题栏的自定义过程. 图3-1 1.新建文件(用New 命令). 2.用绘图和文字中的相关命令设计出图3-1所示的图形.其中在使用中不变的 ...
- php自定义扩展函数,Laravel框架中扩展函数、扩展自定义类的方法
一.扩展自己的类 在app/ 下建立目录 libraries\class 然后myTest.php 类名格式 驼峰 myTest 复制代码 代码如下: class myTest { public f ...
- android 标题栏进度圈使用方法,Android 自定义标题栏 显示网页加载进度的方法实例...
这阵子在做Lephone的适配,测试组提交一个bug:标题栏的文字较长时没有显示完全,其实这并不能算个bug,并且这个问题在以前其他机器也没有出现,只是说在Lephone的这个平台上显示得不怎么美观, ...
- 【Win10开发】自定义标题栏
UWP 现在已经可以自定义标题栏了,毕竟看灰色时间长了也会厌烦,开发者们还是希望能够将自己的UI做的更加漂亮,更加与众不同.那么废话不多说,我们开始吧! 首先要了解ApplicationViewTit ...
- 【WinUI 3】实现自定义标题栏交互控件捕获输入
问题背景描述 Windows为每个窗口提供默认标题栏,并允许自定义它以匹配应用的个性. 默认标题栏附带一些标准组件和核心功能,例如拖动和调整窗口大小. WinUI 3 中的窗口功能是通过基于 Win3 ...
- WPF 自定义标题栏 自定义菜单栏
原文:WPF 自定义标题栏 自定义菜单栏 自定义标题栏 自定义列表,可以直接修改WPF中的ListBox模板,也用这样类似的效果.但是ListBox是不能设置默认选中状态的. 而我们需要一些复杂的UI ...
- android分享的主标题,Android 自定义标题栏(title栏)
近日 需要在android的标题栏上添加按钮,所以对android的标题栏进行了一下简单的研究- 第一步,向实现自定义标题栏,需要在onCreate方法里这样写 requestWindowFeatur ...
- Easyui validatebox修改——1.当text发生变化时在校验,2.取消校验,3扩展自定义验证
1.当text发生变化时在校验: Easyui validatebox个人感觉还是比较好用的,但是发现他不是只有text改变并离开编辑框的时候才验证,而是不停的做验证:如果是js脚本的本地验证还好,如 ...
- android标题栏上增加按钮,Android:向自定义标题栏添加按钮
我创建了一个自定义标题栏,如本例所示 "一个自定义标题栏" – 一半下来. 在某些活动中,我想在标题栏的右侧放置一个按钮(与facebook app相同).我试图按如下方式向视图添 ...
最新文章
- Java项目:房屋租赁系统设计和实现(java+ssm+mysql+spring+jsp)
- Git详解之五 分布式Git
- 大牛带你深入SpringBoot:自定义Endpoint 及实现原理
- tensorflow-读写数据最佳代码组合方式
- sublime配置c++环境
- mysql time类型转换_mysql8 参考手册--Date日期和Time时间类型之间的转换
- 如何设置背景图(前端开发)
- c++求n的几次方_14.八年级数学:若a+b+c=1,怎么求 a+b+c的值?分式培优拓展
- python制作等高线云图,matplot 画等高线图
- Linux无网络升级gcc,Linux离线(手动)升级GCC
- WPF/Silverlight中MVVM运用
- 直播带货,碾压无数上市公司
- stm32单片机OLED显示图片 位图转换 Image2Lcd使用
- 洛谷2486 【SDOI2011】染色(线段树+树链剖分)
- python使用抓包工具Fiddler4和selenium获取国家药监局网站数据
- 寻找丢失的LZY(dfs)
- 2022年终总结与2023新年展望
- 手机免流量,还会是天方夜谭吗?
- ChatGPT插件与简要介绍(已收集70个)了解添加插件后的chatgpt能做什么
- cBridge 2.0: 基于Celer状态守卫者网络的通用跨链平台
热门文章
- 基础计算机知识代码,计算机基础知识(示例代码)
- 解决win10系统WiFi间歇性掉线,只有重启电脑才能连接WiFi的问题
- 游戏策划的excel配置表转成json文件(二)
- ASEMI肖特基二极管10V45参数,10V45规格书,10V45尺寸
- 2023-4-24第一天
- 暴走:从核弹级技术Deepfake与区块链攻防战开始说起
- Elasticsearch 同义词(dynamic-synonym插件)远程热词更新
- PowerDesigner数据库结构设计导出到Word
- 树莓派查看CPU和GPU温度
- 计算机中央处理器相关知识,软考程序员考点计算机硬件基础知识之中央处理器CPU...