UWP中实现自定义标题栏

UWP中实现自定义标题栏

0x00 起因

在UWP开发中,有时候我们希望实现自定义标题栏,例如在标题栏中加入搜索框、按钮之类的控件。搜了下资料居然在一个日文网站找到了一篇介绍这个主题的文章:

http://www.atmarkit.co.jp/ait/articles/1510/14/news022.html

看了下本想着翻译过来分享,但有些地方说的不是特别明确,所以自己实现了下,结合自己的体会总结了这篇文章。

0x01 UWP中的标题栏

一个普通的UWP窗口如下图所示:

我们可以通过两种方式获取不同的标题栏对象,不同对象操作侧重点不同。

var coreTitleBar = Windows.ApplicationModel.Core.CoreApplication.GetCurrentView().TitleBar;

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

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

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

我们自定义标题栏时这两个对象都会用到。

0x02 实现自定义标题栏

coreTitleBar中有一个属性为ExtendViewIntoTitleBar,将其设置为true就允许将我们在窗体中用XAML定义的视图扩展至标题栏区域

coreTitleBar.ExtendViewIntoTitleBar = true;

这个设置后标题栏原有的地方就消失了,我们定义的试图扩展了过去,如下图所示:

看上去离我们的目标近了一些,标题栏消失了,我们在XAML中定义的Grid上移占据了原有标题栏的位置,原有的appTitleBar上的最大化、最小化、关闭按钮都可用。如果只是一副图片扩展至标题栏用作背景的话貌似可以了,不过我们希望在标题栏上加个搜索栏,所以还是存在几个问题的:

appTitleBar的背景色不协调。

要解决这个问题,我们需要把appTitleBar上按钮的背景色设置为透明:

appTitleBar.ButtonBackgroundColor = Colors.Transparent;

设置后窗体就变成这样了:

按钮背景色变成了透明,但系统标题栏上的按钮和我们自定义标题栏上的搜索框重叠了。要解决这个问题我们可以利用coreTitleBar上的属性SystemOverlayLeftInset和SystemOverlayRightInset,分别表示了coreTitleBar嵌入时的左边距和右边距,我们可以通过设置自定义标题栏的Padding属性达到目的:

//TitleBar为我们自己的标题栏
TitleBar.Height = coreTitleBar.Height;
TitleBar.Padding = new Thickness(
    coreTitleBar.SystemOverlayLeftInset,
    0,
    coreTitleBar.SystemOverlayRightInset,
    0 );

那么在什么时候进行这个设置比较好呢,coreTitleBar有一个事件叫做LayoutMetricsChanged,当页面布局发生变化时触发,例如屏幕旋转导致页面重新布局就会触发这个事件。我们可以吧标题栏Padding属性的设置放在这个事件里。设置好后运行程序标题栏如下图所示:

这样似乎好多了,但是当我想在搜索栏输入点内容时发现根本点不进去啊,放大镜按钮也没法点,按住搜索栏还能拖动窗口,看来是我们自己的标题栏被系统标题栏遮挡在下面了。

大概就是上图这么一种感觉。

对于这个问题,我们可以使用Window对象中的SetTitleBar()方法只把文字区域设置为标题栏:

Window.Current.SetTitleBar(TitleText);

其中TitleText是我们自定义标题栏中的文本控件的区域,这个方法就把TitleText这个控件设置为了标题栏。效果就是TitleText控件可以拖动窗体,双击可以最大化/恢复等。这样其他需要接收输入的控件就不属于标题栏,就可以正常接收输入了。

另外我还考虑了一种方式就是重叠两层Grid,底层通过SetTitleBar设置为标题栏,放置不需要接收输入的控件如文本、图片等,上层放置需要接收输入的控件,如TextBox等,不过没有实际测试。

除此之外还可以考虑给标题栏加入返回按钮,按钮调用Frame.GoBack()方法,根据Frame.CanGoBack属性决定返回按钮是否显示。这个也很容易实现,就不作说明了。

程序最后运行效果如图所示,其中手机终端本身就不显示标题栏

0x03 相关下载

https://github.com/durow/TestArea/tree/master/UWPTest/TitleBarTest

时间: 2024-10-02 21:23:26

UWP中实现自定义标题栏的相关文章

Qt 自定义标题栏

1 头文件 #ifndef TITLEBAR_H #define TITLEBAR_H #include <QLabel> #include <QPushButton> #include "ui_TitleBar.h" class TitleBar : public QWidget { Q_OBJECT public: explicit TitleBar(QWidget *parent = nullptr); ~TitleBar(); void setMiniB

自定义圆形滚动条(在自定义标题栏中显示)--利用开源项目ProgressWheel(二)

本篇是ProgressWheel使用的第二篇(尾篇),功能是在自定义标题栏中显示ProgressWheel滚动条. 本篇引用的开源项目依然是ProgressWheel,地址: https://github.com/Todd-Davies/ProgressWheel 本篇效果图: 自定义滚动条(在自定义标题栏中显示)的实现: 1)activity_progress_wheel_test. xml: <RelativeLayout xmlns:android="http://schemas.a

WPF中自定义标题栏时窗体最大化处理之WindowChrome

注意: 本文方法基础是WindowChrome,而WindowChrome在.NET Framework 4.5之后才集成发布的.见:WindowChrome Class 在.NET Framework 4.0中使用WindowChrome,需要安装Ribbon来支持WindowChrome 目前官方文档的内容较为陈旧(但仍有参考价值),其中提到了SystemParameters2,这个应该是Ribbon里的东西,4.5想用可以安装Xceed.Wpf.AvalonDock库,这里面有现成的Mic

【Win 10开发】自定义标题栏

UWP 现在已经可以自定义标题栏了,毕竟看灰色时间长了也会厌烦,开发者们还是希望能够将自己的UI做的更加漂亮,更加与众不同.那么废话不多说,我们开始吧! 首先要了解ApplicationViewTitleBar这个类.其中提供了以下属性: MSDN参考地址:ApplicationViewTitleBar class 首先,我们写一个TitleBarChanged方法,在里面先获取到当前窗口的实例. 1 ApplicationView view = ApplicationView.GetForCu

android 自定义标题栏

今天来看一下如何通过组合多个控件实现自定义标题栏 众所周知,标题栏是应用中必不可少的控件,为了避免多次重写,将其封装起来,供每个布局调用即可. 这里我们采用经典的左中右布局,也可以根据项目需要自行调整,比如在右侧再加一个控件,或者将标题偏左都可以 注:其中应用到了上一篇文章中的ButtonM控件,大家可以先简单了解一下. 还是先来看一下效果图:    图一 初始状态                                         图二 按下了右侧的搜索按钮 下面来看代码实现,共四

安卓学习随笔 -- 自定义标题栏

在安卓中不喜欢系统默认的标题栏,那么如何让自定义一个自己的标题栏呢. 自定义后的标题栏如下: 首先这里需要定义一个自定义的标题栏布局 title.xml文件 (里边需要两个图片这个很简单) <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fi

android自定义标题栏,背景颜色填充满

设置标题栏背景 1> 准备背景图片: background_pix.png 注:用背景图片比用颜色好处,可以让背景看起来有凹凸感. 2> drawable文件夹下放xml文件 bitmap_repeat.xml <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android"

Android -- 自定义标题栏,背景颜色填充满

设置标题栏背景 1> 准备背景图片: background_pix.png 注:用背景图片比用颜色好处,可以让背景看起来有凹凸感. 2> drawable文件夹下放xml文件 bitmap_repeat.xml <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android"

详解 UWP 中的两种 HttpClient API

摘要: 本文为个人博客备份文章,原文地址:http://validvoid.net/demystifying-httpclient-apis-in-the-uwp/ 本文编译自微软 Building Apps for Windows 博客,原文地址:Demystifying HttpClient APIs in the Universal Windows Platform.本文原文由 Windows 网络 API 组的 Program Manager Sidharth Nabar 撰写. UWP