Win 10 app對窗口標題欄的自定義包括兩個層面：一是只定義標題中各部分的顏色，如標題欄上文本的顏色、三個系統按鈕（最大化，最小化，關閉）的背景顏色等；另一層是把窗口的可視區域直接擴展到標題欄上，當然三個系統按鈕是保留的。也可以用某個UI元素來作為標題欄來呈現。

先看最簡單的一層，即設置標題欄各部分的顏色。

ApplicationView類表示當前應用程序視圖相關操作，它公開了一個TitleBar屬性，訪問該屬性可以獲取到一個ApplicationViewTitleBar實例，通過該ApplicationViewTitleBar實例的公共屬性，可以設置各部分的顏色。

其實這些屬性，你看它的名字就知道干嗎用的，這里老周只是簡單劃分一下。

BackgroundColor ForegroundColor	標題欄的背景色和前景色。背景色是標題欄的顏色，前景色是標題欄上顯示的標題文本的顏色。
InactiveBackgroundColor InactiveForegroundColor	當窗口處于非活動狀態時，標題欄的背景色與前景色。和上一行中的屬性相對，上一行中的屬性是窗口在活動狀態時的顏色。
ButtonBackgroundColor ButtonForegroundColor	當窗口處于活動狀態時，右邊的三個按鈕的背景色和前景色。
ButtonInactiveBackgroundColor ButtonInactiveForegroundColor	當窗口處于非活動狀態時，標題欄右邊的三個按鈕的顏色。
ButtonHoverBackgroundColor ButtonHoverForegroundColor	當鼠標移到按鈕上時的顏色。
ButtonPressedBackgroundColor ButtonPressedForegroundColor	當按鈕被按下時的顏色。

?

上表中的各屬性的含義，老周就不說了，弄個表格出來已經很厚道了，你懂的，老周最討厭把某個類的成員列表格的；老周也很討厭抄襲MSDN的書。

接下來，就有一個問題了。其實設置這些顏色的代碼不難寫，重點是這些自定義代碼該放到哪里。因為是自定義當前視圖的外觀的代碼，注意這些設置只能是當前視圖下的，如果你新建了新視圖，還要重新設置外觀。比較合理的位置是放到應用程序級別的代碼中。當然，如果你能保證某個頁面是應用程序的主頁面，也可以寫到頁面的代碼里。

App類有兩個地方可以寫，一個是App的構造函數內，經測試，此處發生異常。所以，也只有一處可用了，就是OnLaunch方法。

下面給個例子，很是TNND簡單，代碼放在OnLaunch方法中。

ApplicationView view = ApplicationView.GetForCurrentView();ApplicationViewTitleBar bar = view.TitleBar;bar.BackgroundColor = Colors.Green;bar.ForegroundColor = Colors.Yellow;bar.ButtonBackgroundColor = Colors.DarkGoldenrod;bar.ButtonForegroundColor = Colors.DarkBlue;bar.ButtonHoverBackgroundColor = Colors.LightYellow;bar.ButtonHoverForegroundColor = Colors.Pink;bar.ButtonPressedBackgroundColor = Colors.Orange;bar.ButtonPressedForegroundColor = Colors.Purple;

?是吧，很簡單，找到對應的屬性，拼命地賦值就行了。你沒有賦值的屬性就采用系統默認的顏色。

然后看看結果。

有一點，你可以注意到：當鼠標移到關閉按鈕上時，它的背景始終是紅色，無論你怎么改都一樣。

?

好了，上面的例子完結，下面我們看看如何將應用程序的可視區域伸展到標題欄中。

同樣，在App類的OnLaunch方法中加入以下代碼：

ApplicationView view = ApplicationView.GetForCurrentView();var bar = view.TitleBar;bar.ButtonBackgroundColor = Colors.Blue;bar.ButtonForegroundColor = Colors.White;bar.ButtonHoverBackgroundColor = Colors.SkyBlue;CoreApplicationView coreappview = CoreApplication.GetCurrentView();coreappview.TitleBar.ExtendViewIntoTitleBar = true;

通過CoreApplication.GetCurrentView靜態方法，可以得到表示當前視圖的CoreApplicationView實例，再通過以下語句，把ExtendViewIntoTitleBar設置為true，表示允許窗口的可視部分擴展到標題欄上。

coreappview.TitleBar.ExtendViewIntoTitleBar = true;

?

得到效果如下圖所示：

?

大概有些時候，僅僅擴充到標題欄還不夠，可能希望自定義一下標題欄。上面的代碼已經允許可視區域擴展到標題欄，接下來我們只需要定義一下自定義標題欄的內容，然后通過Window類就可以自定義為標題欄了。

現在，我們設計一些主頁面的UI。

<Grid Background="#FFD3CA94"><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition/></Grid.RowDefinitions><StackPanel Name="tbar" Background="#FF916A88" Orientation="Horizontal"><Button Background="Blue"><SymbolIcon Symbol="Back"/></Button><Button Background="Green"><SymbolIcon Symbol="Forward"/></Button><TextBlock Margin="16,0,0,0" VerticalAlignment="Center" Text="我的應用" Foreground="White" /></StackPanel><TextBlock Text="My App" FontSize="100" Grid.Row="1"/></Grid>

然后在頁面的代碼中，將StackPanel元素作為標題欄。

public MainPage(){this.InitializeComponent();Window.Current.SetTitleBar(this.tbar);}

調用SetTitleBar方法可以將某個UI元素設置為標題欄的內容。

?

得到的結果如下：

?

?

好，扯完了，肚子餓了，開飯。

示例源碼下載

?

轉載于:https://www.cnblogs.com/tcjiaan/p/4783049.html

總結

以上是生活随笔為你收集整理的【Win10 应用开发】自定义应用标题栏的全部內容，希望文章能夠幫你解決所遇到的問題。

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