[UWP]占领标题栏

1. 前言

每一个有理想的UWP应用都会打标题栏的主意，尤其当微软提供 将 Acrylic 扩展到标题栏 这个功能后，大部分Windows 10的原生应用都不乖了，纷纷占领了标题栏的一亩三分地。这篇博客将介绍在UWP中如何自定义标题栏。

2.示例代码

UWP的限制很多，标题栏的自定义几乎全部内容集中在 这篇文档 里面。但只参考这篇文章做起来还不够顺手，我参考了微软开源的计算器应用中的 TitleBar 写了一个示例应用，可以在 这里 查看它的源码。我也把TitleBar实际应用到了我的 OnePomodoro 应用里面了。

3. 简单的颜色自定义

如果只想简单地自定义标题栏的颜色可以通过ApplicationViewTitleBar，ApplicationViewTitleBar表示应用程序的标题栏，它提供了一些颜色属性用于控制标题栏的颜色，示例代码如下：

// 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;

有几点需要注意：

• 悬停和按下状态的Background定义对关闭按钮无效
• Foreground不能设置透明

4. 将内容扩展到标题栏

若要隐藏默认标题栏并将你的内容扩展到标题栏区域中，请将 CoreApplicationViewTitleBar.ExtendViewIntoTitleBar 属性设置为 true。CoreApplicationViewTitleBar允许应用定义在应用窗口中显示的自定义标题栏。示例代码如下：

// using Windows.ApplicationModel.Core;

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

5. 将内容扩展到标题栏时自定义标题按钮颜色

将内容扩展到标题栏，标题按钮的颜色就变复杂了。因为应用内容的颜色可能和按钮的颜色冲突。这种情况下有几种方案，其中最简单的一种方案是写死为一个不会冲突的颜色，但切换主题时可能会让这些颜色出问题。计算器应用中订阅UISettings的ColorValuesChanged事件，动态地根据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;
}

这段代码中，当使用高对比度主题时将标题栏的按钮颜色还原成默认值，否则设置成ThemeResource中对应的颜色，运行效果如下：

（编辑：ASP站长网）