タイトル バーのカスタマイズ

Windows にはすべてのウィンドウに既定のタイトル バーが用意されており、アプリの個性に合わせてカスタマイズできます。 既定のタイトル バーは、いくつかの標準コンポーネントと、ウィンドウのドラッグやサイズ変更などのコア機能を備えています。

アプリのタイトル バー、許容されるタイトル バー領域のコンテンツ、推奨される UI パターンをカスタマイズする際のガイダンスについては、タイトル バーのデザインに関する記事を参照してください。

タイトル バーのコンポーネント

この一覧では、標準タイトル バーのコンポーネントについて説明します。

• タイトルバーの四角形
• タイトルのテキスト
• システム メニュー - アクセスするには、アプリ アイコンをクリックするか、タイトル バーを右クリックします
• キャプション コントロール
  • 最小化ボタン
  • 最大化/復元ボタン
  • [閉じる] ボタン

UWP アプリケーションでは、 ApplicationView クラスと CoreApplicationView クラスのメンバーを使用してタイトル バーをカスタマイズできます。 必要なカスタマイズのレベルに基づいてタイトル バーの外観を段階的に変更する複数の API があります。

タイトル バーをカスタマイズできるレベル

タイトル バーに適用できるカスタマイズには 2 つのレベルがあります。既定のタイトル バーに軽微な変更を適用する方法と、アプリのキャンバスをタイトル バー領域に拡張して完全なカスタム コンテンツを提供する方法です。

簡単

タイトル バーの色の変更などの簡単なカスタマイズのために、アプリ ウィンドウのタイトル バー オブジェクトにプロパティを設定して、タイトル バーの要素に使用する色を指定できます。 この場合は、タイトル バーの他の部分 (アプリ タイトルの描画やドラッグ領域の定義など) は引き続きシステムが制御します。

完全

もう 1 つのオプションは、既定のタイトル バーを非表示にして、独自のカスタム コンテンツに置き換える方法です。 たとえば、テキスト、検索ボックス、またはカスタム メニューをタイトル バー領域に配置できます。 あなたは、Micaのような 素材 の背景をタイトルバー領域に拡張するために、このオプションを使用する必要があります。

完全なカスタマイズを選択する場合は、タイトル バー領域にコンテンツを配置する必要があり、独自のドラッグ領域を定義できます。 キャプション コントロール (システムの閉じる、最小化、最大化の各ボタン) は引き続き利用可能であり、システムによって処理されますが、アプリ タイトルなどの要素は該当しません。 これらの要素は、アプリの必要に応じて自分で作成する必要があります。

シンプルなカスタマイズ

タイトル バーの色またはアイコンのみをカスタマイズする場合は、アプリ ウィンドウのタイトル バー オブジェクトにプロパティを設定できます。

タイトル

既定では、タイトル バーにはアプリの表示名がウィンドウ タイトルとして表示されます。 表示名は、 Package.appxmanifest ファイルで設定されます。

タイトルにカスタム テキストを追加するには、次に示すように 、ApplicationView.Title プロパティをテキスト値に設定します。

public MainPage()
{
    this.InitializeComponent();

    ApplicationView.GetForCurrentView().Title = "Custom text";
}

テキストはウィンドウ タイトルの前に追加され、"カスタム テキスト - アプリの表示名" として表示されます。 アプリの表示名なしでカスタム タイトルを表示するには、[ 完全なカスタマイズ ] セクションに示すように、既定のタイトル バーを置き換える必要があります。

色彩

この例では、 ApplicationViewTitleBar のインスタンスを取得し、その色プロパティを設定する方法を示します。

このコードは、アプリの OnLaunched メソッド (App.xaml.cs)、 Window.Activate の呼び出し後、またはアプリの最初のページに配置できます。

// using Windows.UI;
// using Windows.UI.ViewManagement;

var titleBar = ApplicationView.GetForCurrentView().TitleBar;

// Set active window colors
titleBar.ForegroundColor = Colors.White;
titleBar.BackgroundColor = Colors.Green;
titleBar.ButtonForegroundColor = Colors.White;
titleBar.ButtonBackgroundColor = Colors.SeaGreen;
titleBar.ButtonHoverForegroundColor = Colors.White;
titleBar.ButtonHoverBackgroundColor = Colors.DarkSeaGreen;
titleBar.ButtonPressedForegroundColor = Colors.Gray;
titleBar.ButtonPressedBackgroundColor = Colors.LightGreen;

// Set inactive window colors
titleBar.InactiveForegroundColor = Colors.Gainsboro;
titleBar.InactiveBackgroundColor = Colors.SeaGreen;
titleBar.ButtonInactiveForegroundColor = Colors.Gainsboro;
titleBar.ButtonInactiveBackgroundColor = Colors.SeaGreen;

タイトル バーの色を設定するときには、次の点に注意する必要があります。

• 閉じるボタンに対して、ホバー状態では背景色 、ホバー状態で が、押された状態では背景色 、押された状態で が適用されていません。 閉じるボタンでは、これらの状態に対して常にシステム定義の色が使用されます。
• color プロパティを null に設定すると、既定のシステム色にリセットされます。
• 透明色は設定できません。 色のアルファ チャネルは無視されます。

Windows には、ユーザーが選んだアクセント カラーをタイトル バーに適用するオプションが用意されています。 タイトル バーの色を設定する場合は、すべての色を明示的に設定することをお勧めします。 これにより、ユーザー定義の色設定によって意図しない色の組み合わせが発生することがなくなります。

完全なカスタマイズ

タイトル バーの全面的なカスタマイズを選択すると、アプリのクライアント領域が拡張され、タイトル バーの領域を含めてウィンドウ全体が対象になります。 キャプション ボタン (ウィンドウによって提供されます) を除き、ウィンドウ全体の描画と入力処理を独自に行う必要があります。

既定のタイトル バーを非表示にし、コンテンツをタイトル バー領域に拡張するには、 ExtendViewIntoTitleBar プロパティを true に設定します。 このプロパティは、アプリの OnLaunched メソッド (App.xaml.cs) またはアプリの最初のページで設定できます。

この例では、 CoreApplicationViewTitleBar を取得し、 ExtendViewIntoTitleBar プロパティを true に設定する方法を示します。

using Windows.ApplicationModel.Core;

public MainPage()
{
    this.InitializeComponent();

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

タイトル バーのコンテンツとドラッグ領域

アプリをタイトル バー領域に拡張する場合は、タイトル バーの UI を定義し、管理する必要があります。 通常、これには少なくともタイトル テキストとドラッグ領域の指定が含まれます。 タイトル バーのドラッグ領域には、ユーザーがクリックとドラッグを使ってウィンドウを移動できる場所を定義します。 これは、ユーザーが右クリックしてシステム メニューを表示できる場所でもあります。

許容されるタイトル バーのコンテンツと推奨される UI パターンの詳細については、タイトル バーのデザインに関する記事を参照してください。

ドラッグ領域を指定するには、 Window.SetTitleBar メソッドを呼び出し、ドラッグ領域を定義する UIElement を渡します。 (UIElementは通常、他の要素を含むパネルです)。ExtendViewIntoTitleBarの呼び出しを有効にするには、true プロパティをSetTitleBarに設定する必要があります。

ドラッグ可能なタイトル バー領域としてコンテンツの Grid を設定する方法を次に示します。 このコードは、アプリの最初のページの XAML とコードビハインドに含まれます。

<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/WindowIcon.png" 
           Grid.Column="1"
           HorizontalAlignment="Left"
           Width="16" Height="16"
           Margin="8,0,0,0"/>
    <TextBlock x:Name="AppTitleTextBlock"
               Text="App title" 
               Style="{StaticResource CaptionTextBlockStyle}" 
               Grid.Column="1"
               VerticalAlignment="Center"
               Margin="28,0,0,0"/>
</Grid>

public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;

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

既定では、システム タイトル バーには、アプリの表示名がウィンドウ タイトルとして表示されます。 表示名は Package.appxmanifest ファイルで設定されます。 この値を取得し、次のようにカスタム タイトル バーで使用できます。

AppTitleTextBlock.Text = AppInfo.Current.DisplayInfo.DisplayName;

対話型コンテンツ

ボタン、メニュー、検索ボックスなどの対話型コントロールをアプリの上部に配置して、タイトル バーにあるように見せることができます。 ただし、対話型要素がユーザー入力を確実に受け取り、ユーザーがウィンドウを移動できるようにするには、いくつかのルールに従う必要があります。

• ドラッグ可能なタイトル バー領域として領域を定義するには、 SetTitleBar を呼び出す必要があります。 そうしないと、ページの上部に既定のドラッグ領域が設定されます。 その後、システムはこの領域に対するすべてのユーザー入力を処理し、入力がコントロールに到達するのを防ぎます。
• 対話型コントロールを、SetTitleBar の呼び出しによって定義されたドラッグ領域の上部に配置します（より高いzオーダーで）。 UIElement の内部に対話型コントロールを配置し、 を SetTitleBarに渡さないでください。 SetTitleBarに要素を渡すと、システムはその要素をシステム タイトル バーと同様に処理し、その要素へのポインター入力をすべて処理します。

ここでは、 AutoSuggestBox 要素は AppTitleBarよりも z オーダーが高いので、ユーザー入力を受け取ります。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="48"/>
        <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/WindowIcon.png" 
               Grid.Column="1"
               HorizontalAlignment="Left"
               Width="16" Height="16"
               Margin="8,0,0,0"/>
        <TextBlock x:Name="AppTitleTextBlock"
                   Text="App title" 
                   Style="{StaticResource CaptionTextBlockStyle}" 
                   Grid.Column="1"
                   VerticalAlignment="Center"
                   Margin="28,0,0,0"/>
    </Grid>

    <!-- This control has a higher z-order than AppTitleBar, 
         so it receives user input. -->
    <AutoSuggestBox QueryIcon="Find"
                    PlaceholderText="Search"
                    HorizontalAlignment="Center"
                    Width="260" Height="32"/>
</Grid>

システム キャプション ボタン

システムは、システム キャプション ボタン (最小化、最大化/復元、閉じる) 用に、アプリ ウィンドウの左上隅または右上隅を予約します。 システムはキャプション ボタン領域の制御を保持し、ウィンドウのドラッグ、最小化、最大化、および閉じのための最小限の機能が提供されることを保証します。 システムは、左から右の言語の場合は右上に[閉じる]ボタンを、右から左の言語の場合は左上に描画します。

アプリの背景など、キャプション コントロール領域の下にコンテンツを描画できますが、ユーザーが操作できる UI は配置しないでください。 キャプション コントロールの入力はシステムによって処理されるため、入力は受け取りません。

前の例のこれらの行は、タイトル バーを定義する XAML の埋め込み列を示しています。 余白の代わりに埋め込み列を使用すると、背景でキャプション コントロール ボタン (透明ボタンの場合) の下の領域が描画されます。 右と左の両方の埋め込み列を使用すると、タイトル バーが右から左と左から右の両方のレイアウトで正しく動作します。

<Grid.ColumnDefinitions>
    <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
    <ColumnDefinition/>
    <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>

キャプション コントロール領域のサイズと位置は CoreApplicationViewTitleBar クラスによって伝達されるため、タイトル バー UI のレイアウトでこれを考慮できます。 両側の予約リージョンの幅は、SystemOverlayLeftInset または SystemOverlayRightInset プロパティで指定され、その高さは Height プロパティで指定されます。

LayoutMetricsChanged イベントを処理して、キャプション ボタンのサイズの変更に対応できます。 たとえば、アプリのレイアウトが左から右から右から左に変更された場合に発生する可能性があります。 このイベントを処理して、タイトル バーのサイズに依存する UI 要素の位置を確認して更新します。

この例では、タイトル バーのメトリックの変更を考慮してタイトル バーのレイアウトを調整する方法を示します。 AppTitleBar、 LeftPaddingColumn、および RightPaddingColumn は、前に示した XAML で宣言されています。

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    // Get the size of the caption controls and set padding.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
}

キャプション ボタンの色と透明度

アプリのコンテンツをタイトル バー領域に拡張する場合、キャプション ボタンの背景を透明にして、アプリの背景が透けて見えるようにすることができます。 通常、完全に透明にするには、背景を Colors.Transparent に設定します。 部分的に透明にする場合は、プロパティを設定した Color のアルファ チャネルを設定します。

タイトルバーのこれらのプロパティは透明に設定できます。

• ボタン背景色
• ボタンホバー背景色
• ボタン押下時の背景色
• ボタン非アクティブ背景色

その他のすべてのカラー プロパティは、アルファ チャネルを無視し続けます。 ExtendViewIntoTitleBar が false に設定されている場合、すべての ApplicationViewTitleBar color プロパティでアルファ チャネルは常に無視されます。

[閉じる] ボタンに対して、背景色がホバー状態の や、押下状態の に やとして適用されていません。 閉じるボタンでは、これらの状態に対して常にシステム定義の色が使用されます。

ウィンドウが非アクティブなときにタイトル バーを暗くする

ウィンドウがアクティブか非アクティブかをわかりやすくしてください。 少なくとも、タイトル バーのテキスト、アイコン、ボタンの色を変更するようにします。

CoreWindow.Activated イベントを処理してウィンドウのアクティブ化状態を判断し、必要に応じてタイトル バーの UI を更新します。

public MainPage()
{
    ...
    Window.Current.CoreWindow.Activated += CoreWindow_Activated;
}

private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
{
    UISettings settings = new UISettings();
    if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
    {
        AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.GrayText));
    }
    else
    {
        AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.WindowText));
    }
}

タイトル バーをリセットする

SetTitleBar を呼び出して、アプリの実行中に新しいタイトル バー要素に切り替えることができます。 nullをパラメーターとしてSetTitleBar渡し、ExtendViewIntoTitleBar を false に設定して、既定のシステム タイトル バーに戻すこともできます。

タイトル バーの表示と非表示

"全画面表示" または "コンパクト オーバーレイ" モードのサポートをアプリに追加する場合、アプリがこれらのモード間を切り替えるときに、必要に応じてタイトル バーを変更します。

アプリが全画面表示モードまたはタブレット モードで実行されている場合 (Windows 10 のみ)、システムはタイトル バーとキャプション コントロール ボタンを非表示にします。 ただし、ユーザーはタイトル バーを呼び出して、アプリの UI の上にオーバーレイとして表示することができます。

CoreApplicationViewTitleBar.IsVisibleChanged イベントを処理して、タイトル バーが非表示または呼び出されたときに通知を受け取り、必要に応じてカスタム タイトル バーのコンテンツを表示または非表示にすることができます。

この例は、前の例の IsVisibleChanged イベントを処理して、AppTitleBar 要素を表示および非表示にする方法を示しています。

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

やるべきこととやってはいけないこと

• ウィンドウがアクティブまたは非アクティブであるときには、それをわかりやすく示してください。 少なくとも、タイトル バーのテキスト、アイコン、ボタンの色を変更します。
• ドラッグ領域は、アプリ キャンバスの上端に沿って定義します。 システム タイトル バーの配置に合わせると、ユーザーは見つけやすくなります。
• ドラッグ領域は、アプリ キャンバス上に表示されるタイトル バー (ある場合) に合わせて定義します。

完全なカスタマイズの例

この例は、「完全なカスタマイズ」セクションで説明したすべてのコードを示しています。

<Page
    x:Class="WinUI2_ExtendedTitleBar.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI2_ExtendedTitleBar"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="48"/>
            <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/WindowIcon.png" 
                   Grid.Column="1"
                   HorizontalAlignment="Left"
                   Width="16" Height="16"
                   Margin="8,0,0,0"/>
            <TextBlock x:Name="AppTitleTextBlock"
                       Text="App title" 
                       Style="{StaticResource CaptionTextBlockStyle}" 
                       Grid.Column="1"
                       VerticalAlignment="Center"
                       Margin="28,0,0,0"/>
        </Grid>

        <!-- This control has a higher z-order than AppTitleBar, 
             so it receives user input. -->
        <AutoSuggestBox QueryIcon="Find"
                        PlaceholderText="Search"
                        HorizontalAlignment="Center"
                        Width="260" Height="32"/>

        <muxc:NavigationView Grid.Row="1"
                             IsBackButtonVisible="Collapsed"
                             IsSettingsVisible="False">
            <StackPanel>
                <TextBlock Text="Content" 
                           Style="{ThemeResource TitleTextBlockStyle}"
                           Margin="12,0,0,0"/>
            </StackPanel>
        </muxc:NavigationView>
    </Grid>
</Page>

public MainPage()
{
    this.InitializeComponent();

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

    // Set caption buttons background to transparent.
    ApplicationViewTitleBar titleBar = 
        ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;

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

    // Register a handler for when the size of the overlaid caption control changes.
    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;

    // Register a handler for when the window activation changes.
    Window.Current.CoreWindow.Activated += CoreWindow_Activated;
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    // Get the size of the caption controls and set padding.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
}

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

 private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
 {
     UISettings settings = new UISettings();
     if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
     {
         AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.GrayText));
     }
     else
     {
         AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.WindowText));
     }
 }

関連資料

• タイトル バーのカスタマイズ (Windows App SDK)
• アクリル
• 雲母
• カラー