首页 > 资讯列表 > 科技资讯 >> 业界动态

Win10 UWP开发技巧:充分利用标题栏空间

业界动态 2017-04-19 12:42:08 转载来源: IThome

感谢站搜网网友 DotNet码农 的投稿自从Windows成型开始,标题栏留给大家的印象,就是一个标题外加“三大金刚”——最小化,最大化和关闭,即使在UWP应用里,标题栏大多也只加上了一个后退按钮。所以,在UWP应用里看到的标题栏一般是这样的:这样的:或者,这样的:看腻了吗?我们来看一个与众不同的标题栏:在Pixiv UWP发布之初,就有不少UWP爱好者不止一次地询问过我们开发社区:这样的一个UWP标题栏是怎么做出来的?控件是怎么被放入标题栏上的?怎么让被放了控件的标题栏依然完成标题栏的功能?这篇教程就带你手把手做出一个带控件的UWP标题栏

感谢站搜网网友 DotNet码农 的投稿

自从Windows成型开始,标题栏留给大家的印象,就是一个标题外加“三大金刚”——最小化,最大化和关闭,即使在UWP应用里,标题栏大多也只加上了一个后退按钮。所以,在UWP应用里看到的标题栏一般是这样的:

这样的:

或者,这样的:

看腻了吗?我们来看一个与众不同的标题栏:

在Pixiv UWP发布之初,就有不少UWP爱好者不止一次地询问过我们开发社区:这样的一个UWP标题栏是怎么做出来的?控件是怎么被放入标题栏上的?怎么让被放了控件的标题栏依然完成标题栏的功能?这篇教程就带你手把手做出一个带控件的UWP标题栏。

原理解释:

这种标题栏实际上是被扩展至标题栏区域的布局。我们只需要在这个页面的构造函数里通知框架,我们需要把布局扩展至标题栏,框架就会去掉原来的标题栏,并把我们编写的布局扩展填充至属于标题栏的那一部分区域。我们还可以通知框架,我们自己编写的布局里,有哪一块依然需要充当标题栏的功能(响应鼠标的拖动、右击和双击等标题栏操作),这样框架就会将那一块作标题栏处理。

启动Visual Studio 2017,新建一个空白页UWP工程(C#):

耐心等待解决方案创建完毕,你就会得到一个空白的UWP应用模板。在“解决方案管理器”里,双击打开MainPage.xaml,Visual Studio会加载一个XAML设计器。我们不需要这个可视化的设计器,直接把分割线拉到顶上,让代码区域占满整个Visual Studio工作区。下面是模板默认生成的代码:

最外层的Page是这个页面,中间的Grid是填满这个页面的网格状布局。我们需要给这个Grid分出一个高为32像素的行,留给我们的标题栏。在Grid标签里添加代码,现在Grid标签是这个样子:

在Grid标签里继续添加代码,以定义我们标题栏区域的布局,现在代码看起来是这样的:

中间那个方框内一个问号的那个字符,其实是Segoe MDL2字符集里,表示“后退”箭头标志的字符,可以在字符映射表里找到。

我们执行这个东西,注意,编译需要一定时间:

(那个黑色的条条是调试时才有的工具条,发布时并没有这个条)

说好的标题栏呢?怎么变成这个鬼样子了?其实是因为,我们忘了通知框架扩展布局至标题栏了。关闭这个奇怪的窗口,回到设计模式,在XAML代码窗口按下F7,调出C#代码编辑器。我们在构造函数MainPage()里添加代码,让它看起来是这个样子:

考虑到CoreApplication类所在的名称空间默认没有被引用,所以在最前面引用名称空间:

再次执行应用,标题栏终于变成了我们定义的样子:

挺难看的,是吧。不仅难看,它甚至还没有功能:后退按钮不能点,框框也不能输入东西。这是因为,我们没有通知框架哪一部分是“真正”的标题栏,所以框架默认把这一整片区域当成了标题栏,从而,为了响应标题栏操作的覆盖层盖住了我们的控件,我们也就不能和那些控件交互了。在MainPage()构造函数里继续添加代码,通知框架哪部分是真正的标题栏:

再次执行应用,你会发现,执行状况完全符合我们的预期:

你得到了一个自定义的标题栏。这个例子里做出的标题栏很丑,但是鉴于这是布局的一部分,所以你能很轻易地把它做成任何一个样子,只要注意:标题栏的高度一般是32像素,按钮默认宽度是48像素,右边“三大金刚”按钮区域最好不要放东西(因为会被那几个键挡住)。还有一点,一旦你将布局扩展至标题栏,你就不能用标准的方法给标题栏添加后退按钮,你必须自己实现它。

标签: Win10 UWP 开发 技巧 充分 利用 标题栏 空间


声明:本文内容来源自网络,文字、图片等素材版权属于原作者,平台转载素材出于传递更多信息,文章内容仅供参考与学习,切勿作为商业目的使用。如果侵害了您的合法权益,请您及时与我们联系,我们会在第一时间进行处理!我们尊重版权,也致力于保护版权,站搜网感谢您的分享!

站长搜索

http://www.adminso.com

Copyright @ 2007~2024 All Rights Reserved.

Powered By 站长搜索

打开手机扫描上面的二维码打开手机版


使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

站长搜索目录系统技术支持