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

  • 时间:
  • 浏览:1

感谢IT之家前网民视频视频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像素,右边“三大金刚”按钮区域最好并不放东西(将会会被那2个键挡住)。还有很久 ,一旦你将布局扩展至标题栏,你就不到用标准的最好的办法给标题栏加进去去后退按钮,你都要本人实现它。