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

更多內容歡迎訪問我的博客：http://www.durow.vip