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

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

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

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

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

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

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

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

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

簡易

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

完全

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

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

シンプルなカスタマイズ

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

Title

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

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

public MainPage()
{
    this.InitializeComponent();

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

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

色

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

このコードは、アプリの 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 オーダーが高くなります)。 対話型コントロールは、SetTitleBar に渡される UIElement の子にしないでください。 要素を SetTitleBar に渡すと、システムはそれをシステム タイトル バーのように扱い、その要素へのポインター入力をすべて処理します。

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

<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 のアルファ チャネルを設定します。

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

• ButtonBackgroundColor
• ButtonHoverBackgroundColor
• ButtonPressedBackgroundColor
• ButtonInactiveBackgroundColor

他のすべての 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 アプリ SDK)
• アクリル
• Mica
• 色