1. 前言

每一個有理想的UWP應(yīng)用都會打標題欄的主意，尤其當微軟提供 將 Acrylic 擴展到標題欄 這個功能后，大部分Windows 10的原生應(yīng)用都不乖了，紛紛占領(lǐng)了標題欄的一畝三分地。這篇博客將介紹在UWP中如何自定義標題欄。

站在用戶的角度思考問題，與客戶深入溝通，找到望城網(wǎng)站設(shè)計與望城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋望城地區(qū)。

2.示例代碼

UWP的限制很多，標題欄的自定義幾乎全部內(nèi)容集中在 這篇文檔 里面。但只參考這篇文章做起來還不夠順手，我參考了微軟開源的計算器應(yīng)用中的 TitleBar 寫了一個示例應(yīng)用，可以在 這里 查看它的源碼。我也把TitleBar實際應(yīng)用到了我的 OnePomodoro 應(yīng)用里面了。

3. 簡單的顏色自定義

如果只想簡單地自定義標題欄的顏色可以通過ApplicationViewTitleBar，ApplicationViewTitleBar表示應(yīng)用程序的標題欄，它提供了一些顏色屬性用于控制標題欄的顏色，示例代碼如下：

// using Windows.UI.ViewManagement;

var titleBar = ApplicationView.GetForCurrentView().TitleBar;

// Set active window colors
titleBar.ForegroundColor = Windows.UI.Colors.White;
titleBar.BackgroundColor = Windows.UI.Colors.Green;
titleBar.ButtonForegroundColor = Windows.UI.Colors.White;
titleBar.ButtonBackgroundColor = Windows.UI.Colors.SeaGreen;
titleBar.ButtonHoverForegroundColor = Windows.UI.Colors.White;
titleBar.ButtonHoverBackgroundColor = Windows.UI.Colors.DarkSeaGreen;
titleBar.ButtonPressedForegroundColor = Windows.UI.Colors.Gray;
titleBar.ButtonPressedBackgroundColor = Windows.UI.Colors.LightGreen;

// Set inactive window colors
titleBar.InactiveForegroundColor = Windows.UI.Colors.Gray;
titleBar.InactiveBackgroundColor = Windows.UI.Colors.SeaGreen;
titleBar.ButtonInactiveForegroundColor = Windows.UI.Colors.Gray;
titleBar.ButtonInactiveBackgroundColor = Windows.UI.Colors.SeaGreen;

有幾點需要注意：

• 懸停和按下狀態(tài)的Background定義對關(guān)閉按鈕無效
• Foreground不能設(shè)置透明

4. 將內(nèi)容擴展到標題欄

若要隱藏默認標題欄并將你的內(nèi)容擴展到標題欄區(qū)域中，請將 CoreApplicationViewTitleBar.ExtendViewIntoTitleBar 屬性設(shè)置為 true。CoreApplicationViewTitleBar允許應(yīng)用定義在應(yīng)用窗口中顯示的自定義標題欄。示例代碼如下：

// using Windows.ApplicationModel.Core;

// Hide default title bar.
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;

5. 將內(nèi)容擴展到標題欄時自定義標題按鈕顏色

將內(nèi)容擴展到標題欄，標題按鈕的顏色就變復(fù)雜了。因為應(yīng)用內(nèi)容的顏色可能和按鈕的顏色沖突。這種情況下有幾種方案，其中最簡單的一種方案是寫死為一個不會沖突的顏色，但切換主題時可能會讓這些顏色出問題。計算器應(yīng)用中訂閱UISettings的ColorValuesChanged事件，動態(tài)地根據(jù)ThemeResources的值改變標題欄顏色，并且更進一步地考慮到使用高對比度主題的情況，所以訂閱了AccessibilitySettings的HighContrastChanged事件：

if (_accessibilitySettings.HighContrast)
{
    // Reset to use default colors.
    applicationTitleBar.ButtonBackgroundColor = null;
    applicationTitleBar.ButtonForegroundColor = null;
    applicationTitleBar.ButtonInactiveBackgroundColor = null;
    applicationTitleBar.ButtonInactiveForegroundColor = null;
    applicationTitleBar.ButtonHoverBackgroundColor = null;
    applicationTitleBar.ButtonHoverForegroundColor = null;
    applicationTitleBar.ButtonPressedBackgroundColor = null;
    applicationTitleBar.ButtonPressedForegroundColor = null;
}
else
{
    Color bgColor = Colors.Transparent;
    Color fgColor = ((SolidColorBrush)Application.Current.Resources["SystemControlPageTextBaseHighBrush"]).Color;
    Color inactivefgColor = ((SolidColorBrush)Application.Current.Resources["SystemControlForegroundChromeDisabledLowBrush"]).Color;
    Color hoverbgColor = ((SolidColorBrush)Application.Current.Resources["SystemControlBackgroundListLowBrush"]).Color;
    Color hoverfgColor = ((SolidColorBrush)Application.Current.Resources["SystemControlForegroundBaseHighBrush"]).Color;
    Color pressedbgColor = ((SolidColorBrush)Application.Current.Resources["SystemControlBackgroundListMediumBrush"]).Color;
    Color pressedfgColor = ((SolidColorBrush)Application.Current.Resources["SystemControlForegroundBaseHighBrush"]).Color;

    applicationTitleBar.ButtonBackgroundColor = bgColor;
    applicationTitleBar.ButtonForegroundColor = fgColor;
    applicationTitleBar.ButtonInactiveBackgroundColor = bgColor;
    applicationTitleBar.ButtonInactiveForegroundColor = inactivefgColor;
    applicationTitleBar.ButtonHoverBackgroundColor = hoverbgColor;
    applicationTitleBar.ButtonHoverForegroundColor = hoverfgColor;
    applicationTitleBar.ButtonPressedBackgroundColor = pressedbgColor;
    applicationTitleBar.ButtonPressedForegroundColor = pressedfgColor;
}

這段代碼中，當使用高對比度主題時將標題欄的按鈕顏色還原成默認值，否則設(shè)置成ThemeResource中對應(yīng)的顏色，運行效果如下：

但現(xiàn)在的UWP應(yīng)用常常在Dark和Light主題之間反復(fù)橫跳，而Application.Current.Resources只能拿到程序加載時的ThemeResource的值，所以這段代碼在應(yīng)用內(nèi)的主題切換后無效。我暫時不清楚怎么在代碼里拿到最新的ThemeResource，為解決這個問題只好讓TitleBar自己在XAML中獲取當前的ThemeResource，代碼如下：

Color fgColor = ((SolidColorBrush)Resources["ButtonForegroundColor"]).Color;
Color inactivefgColor = ((SolidColorBrush)Resources["ButtonInactiveForegroundBrush"]).Color;
Color hoverbgColor = ((SolidColorBrush)Resources["ButtonHoverBackgroundBrush"]).Color;
Color hoverfgColor = ((SolidColorBrush)Resources["ButtonHoverForegroundBrush"]).Color;
Color pressedbgColor = ((SolidColorBrush)Resources["ButtonPressedBackgroundBrush"]).Color;
Color pressedfgColor = ((SolidColorBrush)Resources["ButtonPressedForegroundBrush"]).Color;

6. 可拖動區(qū)域

都將內(nèi)容擴展到標題欄了，肯定是想在標題欄上放置自己需要的UI元素，默認情況下標題欄的范圍為拖動、點擊等Windows的窗體行為保留，在這個范圍的自定義UI內(nèi)容沒辦法獲取鼠標點擊。 為了讓自定義的UI內(nèi)容獲取鼠標，可以用Window.SetTitleBar方法指定某一元素能用于窗體的拖動和點擊。

Window.Current.SetTitleBar(BackgroundElement);

上面的代碼指定TitlaBar中的BackgroundElement元素為可拖動區(qū)域，而下面的StackPanel則用于放置交互內(nèi)容，例如標題或后退按鈕。這個StackPanel必須比BackgroundElement具有較高的Z順序才能接收到用戶的鼠標輸入。

7. 標題的系統(tǒng)保留區(qū)域

標題欄的右邊有188像素的系統(tǒng)保留區(qū)域，用于系統(tǒng)標題按鈕（“后退”、“最小化”、“大化”、“關(guān)閉”）。其實這幾個按鈕也就占用了141像素的控件，還有一小塊空間是默認的可拖動區(qū)域，這小塊空間確保了無論怎么設(shè)置都總有一個用戶可拖動的區(qū)域。

上面說的188像素是100%縮放的情況，通過上面的截圖可以看到實際上可能不一樣，通常來說會在窗體加載時，或者訂閱CoreApplicationViewTitleBar.LayoutMetricsChanged事件，然后通過CoreApplicationViewTitleBar獲取具體的值。

_coreTitleBar.LayoutMetricsChanged += OnLayoutMetricsChanged;

private void OnLayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    LayoutRoot.Height = _coreTitleBar.Height;
    SetTitleBarPadding();
}

private void SetTitleBarPadding()
{
    double leftAddition = 0;
    double rightAddition = 0;

    if (FlowDirection == FlowDirection.LeftToRight)
    {
        leftAddition = _coreTitleBar.SystemOverlayLeftInset;
        rightAddition = _coreTitleBar.SystemOverlayRightInset;
    }
    else
    {
        leftAddition = _coreTitleBar.SystemOverlayRightInset;
        rightAddition = _coreTitleBar.SystemOverlayLeftInset;
    }

    LayoutRoot.Padding = new Thickness(leftAddition, 0, rightAddition, 0);
}

8. 可交互區(qū)域的內(nèi)容

上面的StackPanel是可交互區(qū)域，詳細的內(nèi)容如下：

其中AppName用于顯示標題欄，ItemsPanel用于放其它按鈕。TitleBar里定義了Buttons屬性，調(diào)用TitleBar可以通過Buttons屬性指定按鈕（這部分代碼我凌晨兩點寫的，寫得十分敷衍，但寫完又懶得改了）。

public ObservableCollection Buttons { get; } = new ObservableCollection();

private void OnButtonsCollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    ItemsPanel.Children.Clear();
    foreach (var button in Buttons)
    {
        ItemsPanel.Children.Add(button);
    }
}

按鈕的樣式來自NavigationBackButtonNormalStyle并稍作修改，大致上做到和標準的標題欄按鈕一樣。

9. 非激活狀態(tài)的標題欄顏色

當窗體處于非激活狀態(tài)應(yīng)該讓按鈕和標題都變灰，可以訂閱Window的Activated事件，在非激活狀態(tài)時改變顏色：

Window.Current.Activated += OnWindowActivated;

private void OnWindowActivated(Object sender, WindowActivatedEventArgs e)
{
    VisualStateManager.GoToState(
        this, e.WindowActivationState == CoreWindowActivationState.Deactivated ? WindowNotFocused.Name : WindowFocused.Name, false);
}

10. 全屏和平板模式

當應(yīng)用在全屏或平板模式下運行時，系統(tǒng)將隱藏標題欄和標題控制按鈕。 但是，用戶可以調(diào)用標題欄，以使其以覆蓋形式顯示在應(yīng)用的 UI 頂部。 你可以處理隱藏或調(diào)用標題欄時將通知的 CoreApplicationViewTitleBar.IsVisibleChanged 事件，并根據(jù)需要顯示或隱藏你的自定義標題欄內(nèi)容。

LayoutRoot.Visibility = _coreTitleBar.IsVisible ? Visibility.Visible : Visibility.Collapsed;

這部分比較難截圖就不搞了，想看效果可以試玩我的番茄鐘應(yīng)用。

11.結(jié)語

就這樣，令人頭痛的自定義標題欄處理完了。還好微軟開源了它的計算器里正好有我需要的代碼，抄了個爽。有一些處理得不好，如果錯誤請指正。

12.參考

標題欄自定義

calculator_TitleBar.xaml.cpp at master

ApplicationViewTitleBar Class (Windows.UI.ViewManagement) - Windows UWP applications Microsoft Docs

CoreApplicationViewTitleBar Class (Windows.ApplicationModel.Core) - Windows UWP applications Microsoft Docs

13. 源碼

DinoChan_ExtendViewIntoTitleBarDemo How to handle titlebar when ExtendViewIntoTitleBar

OnePomodoro_TitleBar.xaml at master

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁題目：[UWP]占領(lǐng)標題欄-創(chuàng)新互聯(lián)
當前地址：http://weahome.cn/article/gjjsh.html