Win10开发：玩转应用窗体和应用标题栏TitleBar
Windows10 API允许开发者对应用窗体和应用标题栏做修改。
应用标题栏
先说应用标题栏吧，什么是应用标题栏？比如Groove音乐的应用标题栏就是下面这样：
什么，你说看不清楚。因为它是白色的，是微软设计的，这锅我不背。
你不喜欢怎么办？改呗！
Windows10 API提供解决方案，可以更改应用标题栏、右上方三个按钮、鼠标经过时按钮、鼠标按下时按钮、标题栏Inactive时、三个按钮Inactive时的前景色和背景色共12种属性颜色。（这里解释下Inactive，不知道怎么翻译合适，当应用置于你的眼前，在任务栏的应用图标上按住鼠标左键不放时就是Inactive状态，貌似是不可用的状态）
关于标题栏的MSDN看这：链接
什么，你说Edge浏览器的标题栏好像不太一样。没错，因为Edge把应用界面扩展至 Titlebar 的区域，所以看起来不一样。
下面简单的代码实现更改12种属性的颜色值：
var titleBar = ApplicationView.GetForCurrentView().TitleBar;
if (titleBar != null)
{
titleBar.BackgroundColor = Colors.Black;
titleBar.ForegroundColor = Colors.White;
titleBar.ButtonBackgroundColor = Colors.Brown;
titleBar.ButtonForegroundColor = Colors.RoyalBlue;
titleBar.ButtonPressedBackgroundColor = Colors.Green;
titleBar.ButtonPressedForegroundColor = Colors.Orange;
titleBar.ButtonHoverForegroundColor = Colors.Salmon;
titleBar.ButtonHoverBackgroundColor = Colors.Blue;
titleBar.InactiveForegroundColor = Colors.SpringGreen;
titleBar.InactiveBackgroundColor = Colors.Red;
titleBar.ButtonInactiveBackgroundColor = Colors.Tan;
titleBar.ButtonInactiveForegroundColor = Colors.Violet;
}效果图
正常时：
鼠标滑过最大化按钮时：
鼠标按下最大化按钮时：
Inactive状态时：
如果要实现Edge浏览器的效果将应用界面扩展至 Titlebar 区域：
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
如果以上的修改你还不满意怎么办？不好意思你自己设计吧...
Windows 10允许开发者自定义标题栏控件，可以将界面中任意控件指定为标题栏，使用下面的函数
Window.Current.SetTitleBar(UIElement value);其中value是一个自定义控件
官方的Demo(修改)：自定义应用标题栏
首先需要自定义一个用户控件，也就是自定义的TtitleBar控件
XAML：
<Grid x:Name="RootGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="TitleBar" VerticalAlignment="Top" Height="{x:Bind CoreTitleBarHeight, Mode=OneWay}" Canvas.ZIndex="3">
<Rectangle x:Name="BackgroundElement" Fill="Green" />
<Grid Padding="{x:Bind CoreTitleBarPadding, Mode=OneWay}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="TextBlock in Custom TitleBar"/>
<CheckBox Grid.Column="1" Content="CheckBox in Custom TitleBar"/>
</Grid>
</Grid>
</Grid>
最外层Grid分为两行是为了布局需要，Demo给了注释说明其作用：
C#代码部分稍微有点多，但都是逻辑很清晰的：
public sealed partial class CustomTitleBar : UserControl, INotifyPropertyChanged
{
private CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
public CustomTitleBar()
{
this.InitializeComponent();
Loaded += CustomTitleBar_Loaded;
Unloaded += CustomTitleBar_Unloaded;
}
void CustomTitleBar_Loaded(object sender, RoutedEventArgs e)
{
coreTitleBar.LayoutMetricsChanged += OnLayoutMetricsChanged;
coreTitleBar.IsVisibleChanged += OnIsVisibleChanged;
// The SizeChanged event is raised when the view enters or exits full screen mode.
Window.Current.SizeChanged += OnWindowSizeChanged;
UpdateLayoutMetrics();
UpdatePositionAndVisibility();
}
void CustomTitleBar_Unloaded(object sender, RoutedEventArgs e)
{
coreTitleBar.LayoutMetricsChanged -= OnLayoutMetricsChanged;
coreTitleBar.IsVisibleChanged -= OnIsVisibleChanged;
Window.Current.SizeChanged -= OnWindowSizeChanged;
}
void OnLayoutMetricsChanged(CoreApplicationViewTitleBar sender, object e)
{
UpdateLayoutMetrics();
}
void UpdateLayoutMetrics()
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("CoreTitleBarHeight"));
PropertyChanged(this, new PropertyChangedEventArgs("CoreTitleBarPadding"));
}
}
void OnIsVisibleChanged(CoreApplicationViewTitleBar sender, object e)
{
UpdatePositionAndVisibility();
}
void OnWindowSizeChanged(object sender, WindowSizeChangedEventArgs e)
{
UpdatePositionAndVisibility();
}
void UpdatePositionAndVisibility()
{
if (ApplicationView.GetForCurrentView().IsFullScreenMode)
{
// In full screen mode, the title bar overlays the content. and might or might not be visible.
TitleBar.Visibility = coreTitleBar.IsVisible ? Visibility.Visible : Visibility.Collapsed;
Grid.SetRow(TitleBar, 1);
}
else
{
// When not in full screen mode, the title bar is visible and does not overlay content.
TitleBar.Visibility = Visibility.Visible;
Grid.SetRow(TitleBar, 0);
}
}
UIElement pageContent = null;
public UIElement SetPageContent(UIElement newContent)
{
UIElement oldContent = pageContent;
if (oldContent != null)
{
pageContent = null;
RootGrid.Children.Remove(oldContent);
}
pageContent = newContent;
if (newContent != null)
{
RootGrid.Children.Add(newContent);
// The page content is row 1 in our grid. (See diagram above.)
Grid.SetRow((FrameworkElement)pageContent, 1);
}
return oldContent;
}
#region Data binding
public event PropertyChangedEventHandler PropertyChanged;
public Thickness CoreTitleBarPadding
{
get
{
// The SystemOverlayLeftInset and SystemOverlayRightInset values are
// in terms of physical left and right. Therefore, we need to flip
// then when our flow direction is RTL.
if (FlowDirection == FlowDirection.LeftToRight)
{
return new Thickness() { Left = coreTitleBar.SystemOverlayLeftInset, Right = coreTitleBar.SystemOverlayRightInset };
}
else
{
return new Thickness() { Left = coreTitleBar.SystemOverlayRightInset, Right = coreTitleBar.SystemOverlayLeftInset };
}
}
}
public double CoreTitleBarHeight
{
get
{
return coreTitleBar.Height;
}
}
#endregion
public void EnableControlsInTitleBar(bool enable)
{
if (enable)
{
Window.Current.SetTitleBar(BackgroundElement);
}
else
{
Window.Current.SetTitleBar(null);
}
}
}自定义的TitleBar准备好了后，就可以在需要的时候添加或移除这个CustomTitleBar就可以了，使用前需要修改CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
首先需要声明：
CustomTitleBar customTitleBar = null;需要的时候Add：
public void AddCustomTitleBar()
{
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
if (customTitleBar == null)
{
customTitleBar = new CustomTitleBar();
// customTitleBar.EnableControlsInTitleBar(true);
// Make the main page's content a child of the title bar,
// and make the title bar the new page content.
UIElement mainContent = this.Content;
this.Content = null;
customTitleBar.SetPageContent(mainContent);
this.Content = customTitleBar;
}
}不需要的时候Remove：
public void RemoveCustomTitleBar()
{
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = false;
if (customTitleBar != null)
{
// Take the title bar's page content and make it
// the window content.
this.Content = customTitleBar.SetPageContent(null);
customTitleBar = null;
}
}大功告成！
官方示例在此：https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/TitleBar/cs
注意：在Mobie上，应用是没有TitleBar的说法的，同时也是全屏的，因此不存在以上操作
说明一下，上述代码出自官方Demo，注释给的挺清楚，真的可以学到很多
关于自定义TitleBar，stackoverflow上有人提问如何在窗口右上方的三个键旁放一个全屏键（链接：stackoverflow），微博上的@JustinAndDesign 在回答中给出了解决方案，在这里暂不做讲解
应用窗体
到此，TitleBar的基本知识讲解差不多了。
接着说说应用窗体，其实所涉及到的东西前面已经出现过了，主要通过下面的方法获取到当前应用窗体：
var view = ApplicationView.GetForCurrentView();
view有几个主要的属性和方法：
Title:窗体的标题，区别于应用标题栏的标题
TitleBar：当前窗体对应的应用标题栏
Orientation：获取当前窗体的方向，值为Landscape或Portrait
IsFullScreen：布尔值，获取当前窗体是否是最大化
IsFullScreenMode：布尔值，获取当前窗体是否是满屏
IsOnLockScreen：布尔值，获取当前窗体是否位于Windows锁定屏幕上
IsScreenCaptureEnabled：获取或设置窗体是否启用窗体捕获
ExitFullScreenMode()：方法，无返回值。退出全屏模式
TryEnterFullScreenMode()：方法，返回值布尔值，进入全屏模式是否成功
Demo：切换窗体满屏显示
private void ToggleFullScreenMode(object sender, RoutedEventArgs e)
{
var view = ApplicationView.GetForCurrentView();
view.Title = "我是窗体标题";
if (view.IsFullScreenMode)
{
//退出满屏模式
view.ExitFullScreenMode();
}
else
{
if (view.TryEnterFullScreenMode())
{
//进入满屏模式成功
}
else
{
//进入全屏模式失败
}
}
}