タイトル バーのカスタマイズ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.

重要な API: ApplicationView.TitleBar プロパティApplicationViewTitleBar クラスCoreApplicationViewTitleBar クラスImportant APIs: ApplicationView.TitleBar property, ApplicationViewTitleBar class, CoreApplicationViewTitleBar class

タイトル バーのカスタマイズ レベルHow much to customize the title bar

タイトル バーに適用可能なカスタマイズの度合いとしては、2 つのレベルがあります。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.

もう 1 つのオプションは、既定のタイトル バーを非表示にし、独自の 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 を使う UWP アプリで利用可能です。Simple color customization is available to UWP apps using XAML, DirectX, and HTML. 全面的なカスタマイズでは、XAML を使う UWP アプリのみで利用可能です。Full customization is available only to UWP 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. 色のアルファ チャネルは無視されます。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 プロパティを true に設定します。To hide the default title bar and extend your content into the title bar area, set the CoreApplicationViewTitleBar.ExtendViewIntoTitleBar property to true.

この例は、CoreApplicationViewTitleBar を取得して ExtendViewIntoTitleBar プロパティを true に設定する方法を示しています。This 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.)

ドラッグ可能なタイトル バー領域としてコンテンツの Grid を設定する方法を以下に示します。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.

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

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

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.

たとえば、ドラッグ可能領域として Grid を定義する場合は、Background="Transparent" を設定してドラッグ可能にします。For example, if you define a Grid as your draggable region, set Background="Transparent" to make it draggable.

この Grid はドラッグ可能ではありません (ただし、内部の表示要素はドラッグ可能です):<Grid x:Name="AppTitleBar">This Grid is not draggable (but visible elements within it are): <Grid x:Name="AppTitleBar">.

この Grid は上のものと似ていますが、Grid 全体がドラッグ可能です: <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. 左右に予約されている領域の幅は、SystemOverlayLeftInset プロパティまたは SystemOverlayRightInset プロパティで指定され、高さは 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. AppTitleBarLeftPaddingColumn、および RightPaddingColumn は、前に示した XAML で宣言されています。, 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 unsure 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. 部分的に透明にするには、プロパティ設定対象の Color にアルファ チャネルを設定します。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.

その他のすべての色プロパティでは、引き続きアルファ チャネルが無視されます。All other color properties will continue to ignore the alpha channel. ExtendViewIntoTitleBar が false に設定されている場合は、すべての ApplicationViewTitleBar 色プロパティについて、アルファ チャネルが常に無視されます。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.IsFullScreenMode をご覧ください。See 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 is 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.