显示或隐藏UWP程序标题栏

关键词:
UWP;

这种方式获取的是一个CoreApplicationViewTitleBar对象,主要控制标题栏扩展等相关功能。后面的coreTitleBar指的就是这个对象。

var appTitleBar = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().TitleBar;

这种方式获取的是一个ApplicationViewTitleBar对象,主要用于控制标题栏背景色,最小化、最大化、关闭等按钮的颜色、背景色等。后面的appTitleBar指的就是这个对象。

我们自定义标题栏时这两个对象都会用到。  http://www.cnblogs.com/durow/p/4897773.html

隐藏标题栏:将应用界面扩展至 Titlebar 区域  

CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;  

修改标题栏颜色:

var view = ApplicationView.GetForCurrentView();  

// active  

view.TitleBar.BackgroundColor = Color.FromArgb(255, 8, 87, 180);  

view.TitleBar.ForegroundColor = Colors.White;  

// inactive  

view.TitleBar.InactiveBackgroundColor = Color.FromArgb(255, 8, 87, 180);  

view.TitleBar.InactiveForegroundColor = Colors.Black;  

// button  

view.TitleBar.ButtonBackgroundColor = Color.FromArgb(255, 8, 87, 180);  

view.TitleBar.ButtonForegroundColor = Colors.White;  

view.TitleBar.ButtonHoverBackgroundColor = Colors.Blue;  

view.TitleBar.ButtonHoverForegroundColor = Colors.White;  

view.TitleBar.ButtonPressedBackgroundColor = Colors.Blue;  

view.TitleBar.ButtonPressedForegroundColor = Colors.White;  

view.TitleBar.ButtonInactiveBackgroundColor = Colors.DarkGray;  

view.TitleBar.ButtonInactiveForegroundColor = Colors.Gray;  


我们来看一个与众不同的标题栏:

这样的一个UWP标题栏是怎么做出来的?控件是怎么被放入标题栏上的?

原理解释:

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

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

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

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

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

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

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

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

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

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

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


请注意:原标题栏遮挡扩展过去的控件,解决方法是:把其中一个控件作为标题栏(可以点击拖动等),那么这个控件原有的功能将消失,而作为标题栏使用,因此一般使用无交互的文本控件.


作者:songshizhao 发表于:2018-02-26T12:16:32 访问量:517
评论 [发表评论]