感謝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圖元，右邊“三大金剛”按鈕區域最好不要放東西（因為會被那幾個鍵擋住）。還有一點，一旦你將佈局擴展至標題列，你就不能用標準的方法給標題列添加後退按鈕，你必須自己實現它。