标题栏自定义Title bar customization

当你的应用在桌面窗口中运行时,你可以自定义标题栏以匹配应用的个性。When your app is running in a desktop window, you can customize the title bars to match the personality of your app. 利用标题栏自定义 API,你可以为标题栏元素指定颜色,或者将应用内容扩展到标题栏区域并完全控制该内容。The title bar customization APIs let you specify colors for title bar elements, or extend your app content into the title bar area and take full control of it.

重要 APIApplicationView.TitleBar 属性ApplicationViewTitleBar 类CoreApplicationViewTitleBar 类Important APIs: ApplicationView.TitleBar property, ApplicationViewTitleBar class, CoreApplicationViewTitleBar class

标题栏的自定义程度How much to customize the title bar

你可以对标题栏应用两个自定义级别。There are two levels of customization that you can apply to the title bar.

对于简单的颜色自定义,你可以设置 ApplicationViewTitleBar 属性,以指定要用于标题栏元素的颜色。For simple color customization, you can set ApplicationViewTitleBar properties to specify the colors you want to use for title bar elements. 在此情况下,系统仍对标题栏的所有其他方面负责,比如绘制应用标题和定义可拖动区域。In this case, the system retains responsibility for all other aspects of the title bar, such as drawing the app title and defining draggable areas.

你的其他选项是隐藏默认标题栏并将其替换为自己的 XAML 内容。Your other option is to hide the default title bar and replace it with your own XAML content. 例如,你可以在标题栏区域中放置文本、按钮或自定义的菜单。For example, you can place text, buttons, or custom menus in the title bar area. 你将还需要使用此选项将亚克力背景扩展到标题栏区域中。You will also need to use this option to extend an acrylic background into the title bar area.

当你选择完全自定义时,你负责将内容放在标题栏区域中,并且可以定义自己的可拖动区域。When you opt for full customization, you are responsible for putting content in the title bar area, and you can define your own draggable region. 系统的“后退”、“关闭”、“最小化”和“最大化”按钮仍然可用并由系统处理,但是应用标题等元素则不可用。The system Back, Close, Minimize, and Maximize buttons are still available and handled by the system, but elements like the app title are not. 你将需要根据应用的需要自行创建这些元素。You will need to create those elements yourself as needed by your app.

备注

使用 XAML、DirectX 和 HTML 的 Windows 应用程序可使用简单的颜色自定义。Simple color customization is available to Windows apps using XAML, DirectX, and HTML. 完全自定义仅适用于使用 XAML 的 Windows 应用。Full customization is available only to Windows apps using XAML.

简单的颜色自定义Simple color customization

如果只想自定义标题栏的颜色而不做任何太奇特的操作(比如将选项卡放在标题栏中),则可以为应用窗口设置 ApplicationViewTitleBar 的颜色属性。If you want only to customize the title bar colors and not do anything too fancy (such as putting tabs in your title bar), you can set the color properties on the ApplicationViewTitleBar for your app window.

此示例显示了如何获取 ApplicationViewTitleBar 的实例以及如何设置其颜色属性。This example shows how to get an instance of ApplicationViewTitleBar and set its color properties.

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

备注

此代码可放在应用的 OnLaunched 方法 (App.xaml.cs) 中、对 Window.Activate 的调用的后面,或应用的第一页中。This code can be placed in your app's OnLaunched method (App.xaml.cs), after the call to Window.Activate, or in your app's first page.

提示

Windows 社区工具包提供的扩展可用于在 XAML 中设置这些颜色属性。The Windows Community Toolkit provides extensions that let you set these color properties in XAML. 有关详细信息,请参阅 Windows 社区工具包文档For more info, see the Windows Community Toolkit documentation.

设置标题栏颜色时需要注意以下几点:There are a few things to be aware of when setting title bar colors:

  • 按钮背景颜色不会应用于关闭按钮的悬停和按下状态。The button background color is not applied to the close button hover and pressed states. 关闭按钮始终对这些状态使用系统定义的颜色。The close button always uses the system-defined color for those states.
  • 使用系统后退按钮时,按钮颜色属性会应用于该按钮。The button color properties are applied to the system back button when it's used. 请参阅“导航历史记录和向后导航”。)(See Navigation history and backwards navigation.)
  • 将颜色属性设置为 null 会将其重置为默认的系统颜色。Setting a color property to null resets it to the default system color.
  • 你无法设置透明色。You can't set transparent colors. 颜色的 alpha 通道会被忽略。The color's alpha channel is ignored.

Windows 为用户提供了将选定的主题色应用于标题栏的选项。Windows gives a user the option to apply their selected accent color to the title bar. 如果你要设置任何标题栏颜色,那么我们建议你显式设置所有颜色。If you set any title bar color, we recommend that you explicitly set all the colors. 这可以确保不存在因用户定义的颜色设置而出现的意外颜色组合。This ensures that there are no unintended color combinations that occur because of user defined color settings.

完全自定义Full customization

当你选择进行标题栏完全自定义时,应用的客户端区域会进行扩展以覆盖整个窗口,包括标题栏区域。When you opt-in to full title bar customization, your app’s client area is extended to cover the entire window, including the title bar area. 你负责对整个窗口(在应用画布顶部重叠的标题按钮除外)进行绘制和输入处理。You are responsible for drawing and input-handling for the entire window except the caption buttons, which are overlaid on top of the app’s canvas.

若要隐藏默认标题栏并将你的内容扩展到标题栏区域中,请将 CoreApplicationViewTitleBar.ExtendViewIntoTitleBar 属性设置为 trueTo hide the default title bar and extend your content into the title bar area, set the CoreApplicationViewTitleBar.ExtendViewIntoTitleBar property to true.

此示例介绍如何获取 CoreApplicationViewTitleBar 以及如何将 ExtendViewIntoTitleBar 属性设置为 trueThis example shows how to get the CoreApplicationViewTitleBar and set the ExtendViewIntoTitleBar property to true. 此操作可以在应用的 OnLaunched 方法 (App.xaml.cs) 中或在应用的第一页中完成。This can be done in your app's OnLaunched method (App.xaml.cs), or in your app's first page.

// using Windows.ApplicationModel.Core;

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

提示

当应用关闭并重启后,系统会保留此设置。This setting persists when your app is closed and restarted. 在 Visual Studio 中,如果你将 ExtendViewIntoTitleBar 设置为 true,然后要还原为默认值,则应将其显式设置为 false 并运行应用以覆盖保留的设置。In Visual Studio, if you set ExtendViewIntoTitleBar to true, and then want to revert to the default, you should explicitly set it to false and run your app to overwrite the persisted setting.

可拖动区域Draggable regions

标题栏的可拖动区域定义了用户可以在哪里通过单击和拖动来移动窗口(而不是只在应用画布中拖动内容)。The draggable region of the title bar defines where the user can click and drag to move the window around (as opposed to simply dragging content within the app’s canvas). 通过调用 Window.SetTitleBar 方法并传入一个定义可拖动区域的 UIElement,你可以指定可拖动区域。You specify the draggable region by calling the Window.SetTitleBar method and passing in a UIElement that defines the draggable region. (UIElement 通常是一个包含其他元素的面板。)(The UIElement is often a panel that contains other elements.)

下面介绍如何将内容网格设置为可拖动的标题栏区域。Here's how to set a Grid of content as the draggable title bar region. 此代码会写入应用第一页的 XAML 和代码隐藏部分中。This code goes in the XAML and code-behind for your app's first page. 请参阅完全自定义示例部分以获取完整代码。See the Full customization example section for the full code.

重要

默认情况下,某些 UI 元素(例如网格)在没有后台集时不参与命中测试。By default, some UI elements such as Grid do not participate in hit testing when they don't have a background set. 为了 AppTitleBar 使下面的示例中的网格允许拖动,我们需要将背景设置为 TransparentFor the grid AppTitleBar in the sample below to allow dragging, we therefore need to set the background to Transparent.

<Grid x:Name="AppTitleBar" Background="Transparent">
    <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
    <!-- Using padding columns instead of Margin ensures that the background
         paints the area under the caption control buttons (for transparent buttons). -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
        <ColumnDefinition/>
        <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
    </Grid.ColumnDefinitions>
    <Image Source="Assets/Square44x44Logo.png" 
           Grid.Column="1" HorizontalAlignment="Left" 
           Width="20" Height="20" Margin="12,0"/>
    <TextBlock Text="Custom Title Bar" 
               Grid.Column="1" 
               Style="{StaticResource CaptionTextBlockStyle}" 
               Margin="44,8,0,0"/>
</Grid>
public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;
    // Set XAML element as a draggable region.
    Window.Current.SetTitleBar(AppTitleBar);
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    AppTitleBar.Height = sender.Height;
}

UIElement (AppTitleBar) 是应用的 XAML 的一部分。The UIElement (AppTitleBar) is part of the XAML for your app. 你可以在不变的根页面中声明和设置标题栏,也可以在应用可以导航到的每个页面中声明和设置标题栏区域。You can either declare and set the title bar in a root page that doesn’t change, or declare and set a title bar region in each page that your app can navigate to. 如果你在每个页面中对其进行设置,则应该确保当用户在应用中导航时可拖动区域保持一致。If you set it in each page, you should make sure the draggable region stays consistent as a user navigates around your app.

你可以调用 SetTitleBar 以在应用运行时切换到新的标题栏元素。You can call SetTitleBar to switch to a new title bar element while your app is running. 你还可以将 null 作为参数传递给 SetTitleBar 以还原为默认的拖动行为。You can also pass null as the parameter to SetTitleBar to revert to the default dragging behavior. (有关详细信息,请参阅“默认的可拖动区域”。)(See "Default draggable region" for more info.)

重要

你指定的可拖动区域必须可执行点击测试,这意味着对于某些元素,你可能需要设置透明背景画笔。The draggable region you specify needs to be hit testable, which means, for some elements, you might need to set a transparent background brush. 有关详细信息,请参阅关于 VisualTreeHelper.FindElementsInHostCoordinates 的备注。See the remarks on VisualTreeHelper.FindElementsInHostCoordinates for more info.

例如,如果将网格定义为可拖动区域,请设置 Background="Transparent" 以使其可拖动。For example, if you define a Grid as your draggable region, set Background="Transparent" to make it draggable.

此网格不可拖动(但可拖动其中的可见元素):<Grid x:Name="AppTitleBar">This Grid is not draggable (but visible elements within it are): <Grid x:Name="AppTitleBar">.

此网格看上去相同,但是整个网格可以拖动:<Grid x:Name="AppTitleBar" Background="Transparent">This Grid looks the same, but the whole Grid is draggable: <Grid x:Name="AppTitleBar" Background="Transparent">.

默认的可拖动区域Default draggable region

如果你未指定可拖动区域,则会将宽度为窗口宽度、高度为标题按钮高度且沿窗口顶边放置的矩形设置为默认的可拖动区域。If you don’t specify a draggable region, a rectangle that is the width of the window, the height of the caption buttons, and positioned along the top edge of the window is set as the default draggable region.

如果你定义了可拖动区域,则系统会将默认的可拖动区域缩小为标题按钮大小的小区域,此区域位于标题按钮的左侧(如果标题按钮在窗口左侧,则位于标题按钮的右侧)。If you do define a draggable region, the system shrinks the default draggable region down to a small area the size of a caption button, positioned to the left of the caption buttons (or to the right if the captions buttons are on the left side of the window). 这可以确保始终存在一个用户可以拖动的一致区域。This ensures that there is always a consistent area the user can drag.

系统标题按钮System caption buttons

系统会为系统标题按钮(“后退”、“最小化”、“最大化”、“关闭”)保留应用窗口的左上角或右上角。The system reserves the upper-left or upper-right corner of the app window for the system caption buttons (Back, Minimize, Maximize, Close). 系统会保留对标题控制区域的控制,以保证提供最少功能来拖动、最小化、最大化和关闭窗口。The system retains control of the caption control area to guarantee that minimum functionality is provided for dragging, minimizing, maximizing, and closing the window. 系统在右上方为从左到右的语言绘制“关闭”按钮,在左上方为从右到左的语言绘制“关闭”按钮。The system draws the Close button in the upper-right for left-to-right languages and the upper-left for right-to-left languages.

标题控制区域的尺寸和位置由 CoreApplicationViewTitleBar 类进行传递,以便你可以在标题栏 UI 布局中将其考虑在内。The dimensions and position of the caption control area is communicated by the CoreApplicationViewTitleBar class so that you can account for it in the layout of your title bar UI. 每一侧上的保留区域的宽度由 SystemOverlayLeftInsetSystemOverlayRightInset 属性提供,其高度由 Height 属性提供。The width of the reserved region on each side is given by the SystemOverlayLeftInset or SystemOverlayRightInset properties, and its height is given by the Height property.

你可以在这些属性所定义的标题控制区域下方绘制内容,如应用背景,但不应放置你希望用户能够与之交互的任何 UI。You can draw content underneath the caption control area defined by these properties, such as your app background, but you should not put any UI that you expect the user to be able to interact with. 它不会接收任何输入,因为标题控件的输入由系统进行处理。It does not receive any input because input for the caption controls is handled by the system.

你可以处理 LayoutMetricsChanged 事件,以响应标题按钮的大小变化。You can handle the LayoutMetricsChanged event to respond to changes in the size of the caption buttons. 例如,显示或隐藏系统后退按钮时,可能会发生这种情况。For example, this can happen when the system back button is shown or hidden. 处理此事件可验证并更新取决于标题栏大小的 UI 元素的定位。Handle this event to verify and update the positioning of UI elements that depend on the title bar's size.

此示例介绍如何调整标题栏的布局,以考虑系统后退按钮的显示或隐藏等变化。This example shows how to adjust the layout of your title bar to account for changes like the system back button being shown or hidden. AppTitleBar``LeftPaddingColumn RightPaddingColumn 在前面所示的 XAML 中声明了、和。AppTitleBar, LeftPaddingColumn, and RightPaddingColumn are declared in the XAML shown previously.

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    UpdateTitleBarLayout(sender);
}

private void UpdateTitleBarLayout(CoreApplicationViewTitleBar coreTitleBar)
{
    // Get the size of the caption controls area and back button 
    // (returned in logical pixels), and move your content around as necessary.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
    TitleBarButton.Margin = new Thickness(0,0,coreTitleBar.SystemOverlayRightInset,0);

    // Update title bar control size as needed to account for system size changes.
    AppTitleBar.Height = coreTitleBar.Height;
}

交互式内容Interactive content

你可以在应用顶部放置交互式控件,如按钮、菜单或搜索框,以使它们显示在标题栏中。You can place interactive controls, like buttons, menus, or a search box, in the top part of the app so they appear to be in the title bar. 但是,为了确保交互式元素接收用户输入,必须遵循几个规则。However, there are a few rules you must follow to ensure that your interactive elements receive user input.

  • 你必须调用 SetTitleBar 以将一个区域定义为可拖动的标题栏区域。You must call SetTitleBar to define an area as the draggable title bar region. 如果不这样做,系统会在页面顶部设置默认的可拖动区域。If you don’t, the system sets the default draggable region at the top of the page. 然后,系统将处理此区域的所有用户输入,并阻止输入到达你的控件。The system will then handle all user input to this area, and prevent input from reaching your controls.
  • 将交互式控件放在由 SetTitleBar(具有更高的 z 顺序)调用定义的可拖动区域的顶部。Place your interactive controls over the top of the draggable region defined by the call to SetTitleBar (with a higher z-order). 不要将交互式控件设为传递到 SetTitleBar 的 UIElement 的子项。Don’t make your interactive controls children of the UIElement passed to SetTitleBar. 将元素传递到 SetTitleBar 后,系统会将其视为系统标题栏,并处理该元素的所有指针输入。After you pass an element to SetTitleBar, the system treats it like the system title bar and handles all pointer input to that element.

在此,TitleBarButton 元素比 AppTitleBar 具有更高的 z 顺序,因此它将收到用户输入。Here, the TitleBarButton element has a higher z-order than AppTitleBar, so it receives user input.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>

    <Grid x:Name="AppTitleBar" Background="Transparent">
        <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
        <!-- Using padding columns instead of Margin ensures that the background
             paints the area under the caption control buttons (for transparent buttons). -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
            <ColumnDefinition/>
            <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
        </Grid.ColumnDefinitions>
        <Image Source="Assets/Square44x44Logo.png"
               Grid.Column="1" HorizontalAlignment="Left"
               Width="20" Height="20" Margin="12,0"/>
        <TextBlock Text="Custom Title Bar"
                   Grid.Column="1"
                   Style="{StaticResource CaptionTextBlockStyle}"
                   Margin="44,8,0,0"/>
    </Grid>

    <!-- This Button has a higher z-order than AppTitleBar, 
         so it receives user input. -->
    <Button x:Name="TitleBarButton" Content="Button in the title bar"
        HorizontalAlignment="Right"/>
</Grid>

标题按钮中的透明度Transparency in caption buttons

如果将 ExtendViewIntoTitleBar 设置为 true,则可以使标题按钮的背景变为透明,以使应用背景可隐约显示。When you set ExtendViewIntoTitleBar to true, you can make the background of the caption buttons transparent to let your app background show through. 为了实现完全透明,通常可以将背景设置为 Colors.TransparentYou typically set the background to Colors.Transparent for full transparency. 为了实现部分透明,请将属性设置为 Color 并为其设置 alpha 通道。For partial transparency, set the alpha channel for the Color you set the property to.

以下 ApplicationViewTitleBar 属性可以是透明的:These ApplicationViewTitleBar properties can be transparent:

  • ButtonBackgroundColorButtonBackgroundColor
  • ButtonHoverBackgroundColorButtonHoverBackgroundColor
  • ButtonPressedBackgroundColorButtonPressedBackgroundColor
  • ButtonInactiveBackgroundColorButtonInactiveBackgroundColor

按钮背景颜色不会应用于关闭按钮的悬停和按下状态。The button background color is not applied to the close button hover and pressed states. 关闭按钮始终对这些状态使用系统定义的颜色。The close button always uses the system-defined color for those states.

所有其他颜色属性都将继续忽略 alpha 通道。All other color properties will continue to ignore the alpha channel. 如果将 ExtendViewIntoTitleBar 设置为 false,则始终会对所有 ApplicationViewTitleBar 颜色属性忽略 alpha 通道。If ExtendViewIntoTitleBar is set to false, the alpha channel is always ignored for all ApplicationViewTitleBar color properties.

全屏和平板模式Full screen and tablet mode

当应用在_全屏_或_平板模式_下运行时,系统将隐藏标题栏和标题控制按钮。When your app runs in full screen or tablet mode, the system hides the title bar and caption control buttons. 但是,用户可以调用标题栏,以使其以覆盖形式显示在应用的 UI 顶部。However, the user can invoke the title bar to have it shown as an overlay on top of the app’s UI. 你可以处理隐藏或调用标题栏时将通知的 CoreApplicationViewTitleBar.IsVisibleChanged 事件,并根据需要显示或隐藏你的自定义标题栏内容。You can handle the CoreApplicationViewTitleBar.IsVisibleChanged event to be notified when the title bar is hidden or invoked, and show or hide your custom title bar content as needed.

此示例介绍如何处理 IsVisibleChanged 以显示和隐藏之前显示的 AppTitleBar 元素。This example shows how to handle IsVisibleChanged to show and hide the AppTitleBar element shown previously.

public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;

    // Register a handler for when the title bar visibility changes.
    // For example, when the title bar is invoked in full screen mode.
    coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;
}

private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (sender.IsVisible)
    {
        AppTitleBar.Visibility = Visibility.Visible;
    }
    else
    {
        AppTitleBar.Visibility = Visibility.Collapsed;
    }
}

备注

仅在应用支持时才能进入_全屏_模式。Full screen mode can be entered only if supported by your app. 有关详细信息,请参阅 ApplicationView.IsFullScreenModeSee ApplicationView.IsFullScreenMode for more info. 平板模式是受支持的硬件上的用户选项,以便用户可以选择在平板模式下运行任何应用。Tablet mode is a user option on supported hardware, so a user can choose to run any app in tablet mode.

完全自定义示例Full customization example

<Page
    x:Class="CustomTitleBar.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CustomTitleBar"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid x:Name="AppTitleBar" Background="Transparent">
            <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
            <!-- Using padding columns instead of Margin ensures that the background
                 paints the area under the caption control buttons (for transparent buttons). -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
                <ColumnDefinition/>
                <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
            </Grid.ColumnDefinitions>
            <Image Source="Assets/Square44x44Logo.png" 
                   Grid.Column="1" HorizontalAlignment="Left" 
                   Width="20" Height="20" Margin="12,0"/>
            <TextBlock Text="Custom Title Bar" 
                       Grid.Column="1" 
                       Style="{StaticResource CaptionTextBlockStyle}" 
                       Margin="44,8,0,0"/>
        </Grid>

        <!-- This Button has a higher z-order than MyTitleBar, 
             so it receives user input. -->
        <Button x:Name="TitleBarButton" Content="Button in the title bar"
                HorizontalAlignment="Right"/>
    </Grid>
</Page>
public MainPage()
{
    this.InitializeComponent();

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

    // Set XAML element as a draggable region.
    Window.Current.SetTitleBar(AppTitleBar);

    // Register a handler for when the size of the overlaid caption control changes.
    // For example, when the app moves to a screen with a different DPI.
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;

    // Register a handler for when the title bar visibility changes.
    // For example, when the title bar is invoked in full screen mode.
    coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    UpdateTitleBarLayout(sender);
}

private void UpdateTitleBarLayout(CoreApplicationViewTitleBar coreTitleBar)
{
    // Get the size of the caption controls area and back button 
    // (returned in logical pixels), and move your content around as necessary.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
    TitleBarButton.Margin = new Thickness(0,0,coreTitleBar.SystemOverlayRightInset,0);

    // Update title bar control size as needed to account for system size changes.
    AppTitleBar.Height = coreTitleBar.Height;
}

private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (sender.IsVisible)
    {
        AppTitleBar.Visibility = Visibility.Visible;
    }
    else
    {
        AppTitleBar.Visibility = Visibility.Collapsed;
    }
}

应做事项和禁止事项Do's and don'ts

  • 请在窗口处于活动状态或处于非活动状态时,使其变得显而易见。Do make it obvious when your window is active or inactive. 至少要更改标题栏中文本、图标和按钮的颜色。At a minimum, change the color of the text, icons, and buttons in your title bar.
  • 务必定义一个沿着应用画布上边缘布局的可拖动区域。Do define a draggable region along the top edge of the app canvas. 通过匹配系统标题栏的位置,用户可以更容易找到。Matching the placement of system title bars makes it easier for users to find.
  • 务必定义一个可拖动区域,以匹配应用画布上的可视标题栏(如果有)。Do define a draggable region that matches the visual title bar (if any) on the app’s canvas.