標題列自訂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.

您可以在這些屬性定義的標題控制項區域下方繪製內容 (例如應用程式背景),但不應該放置您預期使用者可以與之互動的任何使用者介面。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. AppTitleBarLeftPaddingColumnRightPaddingColumn 是在先前顯示的 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 元素在這裡的 Z 軸順序比 AppTitleBar 的高,因此會接收使用者輸入。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.Transparent 以取得完全透明度。You typically set the background to Colors.Transparent for full transparency. 如需部分透明度,請設定您將屬性設定成之色彩的 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.