在 Windows 10 的前幾個版本中將頁面內容擴展到標題欄上還算簡單，主要是沒什么坑。直到一些新控件的引入和一些外觀設計趨勢變化之后，擴展標題欄開始出現一些坑了。

本文將重溫 UWP 自定義標題欄或者擴展標題欄的方法，但更重要的是解決一些坑。

---

本文內容

• • 擴展/自定義標題欄
  • 一些概念
  • 一些坑
  • • 控件在標題欄區域無法交互
    • 更高的標題欄，或者被遮擋
    • 在什么時機調用？
  • 適配移動設備

擴展/自定義標題欄

要擴展標題欄，只需要拿到 CoreApplicationView 的實例，然后設置 TitleBar 的 ExtendViewIntoTitleBar 屬性為 true 即可。

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

要自定義標題欄，只需要拿到 ApplicationView 的實例，然后設置 TitleBar 里各種屬性接口。

var titleBar = ApplicationView.GetForCurrentView().TitleBar; titleBar.BackgroundColor = Colors.Khaki; titleBar.ButtonBackgroundColor = Colors.Transparent;

一些概念

那么問題來了，為什么前者需要拿到 CoreApplicationView 的實例，后者需要拿到 ApplicationView 的實例？它們到底是什么區別？

我在 CoreApplication/Application、CoreWindow/Window 之間的區別 一文中提到過 CoreApplication、CoreWindow 和 CoreDispatcher 之間的關系。繼續借用那篇文章中的圖：

其中，Window 是對 CoreWindow 的封裝，提供了更多與 XAML 相關的功能。這里的 ApplicationView 也是這樣，是對 CoreApplication 的封裝，提供了 XAML 相關的功能。

那篇文章中詳細描述了這幾個概念之間的關系和區別。考慮到閱讀的一致性，我摘抄過來：

具體來說，CoreWindow 是與操作系統、與整個應用打交道的類型，提供了諸如窗口的尺寸、位置、輸入狀態等設置或調用；Window 是與應用內 UI 打交道的類型，比如可以設置窗口內顯示的 UI，設置內部哪個控件屬于標題欄，獲取此窗口內的 Compositor。與之對應的，CoreApplicationView 是應用與操作系統交互，與窗口消息循環機制協同工作的類型，包含窗口客戶區和非客戶區設置；ApplicationView 也是與應用內 UI 打交道的類型，它可以使用 XAML 相關的類型對應用程序視圖進行更方便的設置。

總結起來，CoreWindow 和 CoreApplicationView 提供更加核心的操作系統或應用底層功能，而 Window 和 ApplicationView 對前者進行了封裝，使得我們能夠使用 Windows.UI.Xaml 命名空間下的類型對窗口和應用視圖進行控制。

于是，我們便能夠理解為什么擴展標題欄和設置標題欄顏色會使用到兩個不一樣的類型了。

ExtendViewIntoTitleBar 是改變了窗口的客戶區（Client Area）和非客戶區（Non-client Area）組成，這是傳統 Win32 編程中的概念，是更接近操作系統底層的概念。BackgroundColor 和 ButtonBackgroundColor 這里需要用到 Windows.UI.Xaml 命名空間中的顏色，而 CoreApplicationView 太底層，無法使用 XAML 顏色。

一些坑

控件在標題欄區域無法交互

想必當你擴展到標題欄后，在標題欄區域增加一些按鈕的時候，肯定會遇到下面的情況：

▲ 按鈕在標題欄區域的一半無法交互

這顯然是無法接受的。

然而，當我們將一個 XAML 控件指定為標題欄之后，就只會是那個控件所在的區域響應標題欄操作，其他地方就會恢復正常。

// TitleBar 是我在 XAML 中寫的一個 x:Name="TitleBar" 的控件。 Window.Current.SetTitleBar(TitleBar);

▲ 按鈕在標題欄區域現在可以交互了

特別說明一下，SetTitleBar 傳入的是 UIElement 類型的實例，也就是說這也是 XAML 交互的一部分。我們需要使用 Window 的實例，而不是 CoreWindow 的實例。

更高的標題欄，或者被遮擋

如果被指定為標題欄的控件更大，超出標題欄區域了，它還會成為標題欄嗎？如果被其他控件遮擋了，它還會響應標題欄事件嗎？

實際看來，無論它多大，都能響應標題欄事件；但被遮擋的部分就真的被遮擋了，沒有標題欄響應。

▲ 更高的標題欄，或者被遮擋

事實上，指定為標題欄的控件可以在界面的任何地方，不需要一定在頂部。只不過，絕大多數不作死的應用都不會這樣設置吧！

在什么時機調用？

擴展標題欄用的是 CoreApplicationView，自定義標題欄顏色用的是 ApplicationView，將控件指定為標題欄用的是 Window。如果我們的應用只有一個視圖，其實我們隨便找一個初始化的地方調用就好了。但如果我們的應用有多個視圖，那么給非主要視圖調用的時候就需要在其初始化之后了。閱讀 理解 UWP 視圖的概念，讓 UWP 應用顯示多個窗口（多視圖） 了解如何編寫多個視圖的 UWP 應用，了解非主要視圖的初始化時機。

當然，如果你比較極客，從 Main 函數開始寫 UWP 應用，就像我在 為了理解 UWP 的啟動流程，我從零開始創建了一個 UWP 程序 一文中做的一樣，那么你也需要等到初始化完畢之后才能調用（至少是 SetWindow 之后了）。

適配移動設備

移動設備上并不是標題欄，而是狀態了和虛擬按鍵。關于擴展視圖到這些區域，可以閱讀 win10 uwp 標題欄 - 林德熙。

---

參考資料

• Title bar customization - UWP app developer - Microsoft Docs

---

我的博客會首發于 https://blog.walterlv.com/，而 CSDN 會從其中精選發布，但是一旦發布了就很少更新。

如果在博客看到有任何不懂的內容，歡迎交流。我搭建了 dotnet 職業技術學院 歡迎大家加入。

本作品采用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名呂毅（包含鏈接：https://walterlv.blog.csdn.net/），不得用于商業目的，基于本文修改后的作品務必以相同的許可發布。如有任何疑問，請與我聯系。

總結

以上是生活随笔為你收集整理的UWP 扩展/自定义标题栏的方法，一些概念和一些注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。