感謝 網(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)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答
圖片精選