感謝 網(wǎng)友 DotNet碼農(nóng)的投稿

自從Windows成型開始，標(biāo)題欄留給大家的印象，就是一個(gè)標(biāo)題外加“三大金剛”——最小化，最大化和關(guān)閉，即使在UWP應(yīng)用里，標(biāo)題欄大多也只加上了一個(gè)后退按鈕。所以，在UWP應(yīng)用里看到的標(biāo)題欄一般是這樣的：

這樣的：

或者，這樣的：

看膩了嗎？我們來看一個(gè)與眾不同的標(biāo)題欄：

在Pixiv UWP發(fā)布之初，就有不少UWP愛好者不止一次地詢問過我們開發(fā)社區(qū)：這樣的一個(gè)UWP標(biāo)題欄是怎么做出來的？控件是怎么被放入標(biāo)題欄上的？怎么讓被放了控件的標(biāo)題欄依然完成標(biāo)題欄的功能？這篇教程就帶你手把手做出一個(gè)帶控件的UWP標(biāo)題欄。

原理解釋：

這種標(biāo)題欄實(shí)際上是被擴(kuò)展至標(biāo)題欄區(qū)域的布局。我們只需要在這個(gè)頁面的html' target='_blank'>構(gòu)造函數(shù)里通知框架，我們需要把布局?jǐn)U展至標(biāo)題欄，框架就會(huì)去掉原來的標(biāo)題欄，并把我們編寫的布局?jǐn)U展填充至屬于標(biāo)題欄的那一部分區(qū)域。我們還可以通知框架，我們自己編寫的布局里，有哪一塊依然需要充當(dāng)標(biāo)題欄的功能（響應(yīng)鼠標(biāo)的拖動(dòng)、右擊和雙擊等標(biāo)題欄操作），這樣框架就會(huì)將那一塊作標(biāo)題欄處理。

啟動(dòng)Visual Studio 2017，新建一個(gè)空白頁UWP工程（C#）：

耐心等待解決方案創(chuàng)建完畢，你就會(huì)得到一個(gè)空白的UWP應(yīng)用模板。在“解決方案管理器”里，雙擊打開MainPage.xaml，Visual Studio會(huì)加載一個(gè)XAML設(shè)計(jì)器。我們不需要這個(gè)可視化的設(shè)計(jì)器，直接把分割線拉到頂上，讓代碼區(qū)域占滿整個(gè)Visual Studio工作區(qū)。下面是模板默認(rèn)生成的代碼：

最外層的Page是這個(gè)頁面，中間的Grid是填滿這個(gè)頁面的網(wǎng)格狀布局。我們需要給這個(gè)Grid分出一個(gè)高為32像素的行，留給我們的標(biāo)題欄。在Grid標(biāo)簽里添加代碼，現(xiàn)在Grid標(biāo)簽是這個(gè)樣子：

在Grid標(biāo)簽里繼續(xù)添加代碼，以定義我們標(biāo)題欄區(qū)域的布局，現(xiàn)在代碼看起來是這樣的：

中間那個(gè)方框內(nèi)一個(gè)問號(hào)的那個(gè)字符，其實(shí)是Segoe MDL2字符集里，表示“后退”箭頭標(biāo)志的字符，可以在字符映射表里找到。

我們執(zhí)行這個(gè)東西，注意，編譯需要一定時(shí)間：

（那個(gè)黑色的條條是調(diào)試時(shí)才有的工具條，發(fā)布時(shí)并沒有這個(gè)條）

說好的標(biāo)題欄呢？怎么變成這個(gè)鬼樣子了？其實(shí)是因?yàn)椋覀兺送ㄖ蚣軘U(kuò)展布局至標(biāo)題欄了。關(guān)閉這個(gè)奇怪的窗口，回到設(shè)計(jì)模式，在XAML代碼窗口按下F7，調(diào)出C#代碼編輯器。我們?cè)跇?gòu)造函數(shù)MainPage()里添加代碼，讓它看起來是這個(gè)樣子：

考慮到CoreApplication類所在的名稱空間默認(rèn)沒有被引用，所以在最前面引用名稱空間：

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。