UWP タイトルバーにコントロール配置する方法

タイトルバーにコントロールを表示する。

モダンなデスクトップアプリはタイトルバーにコントロールを配置する傾向がある。VisualStusio2019もタイトルバーに表示している。

下記のコードで、タイトルバーへコントロールを配置可能になる。

MainPage.xaml.cs

public MainPage()
{
    this.InitializeComponent();

    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationView.GetForCurrentView().TitleBar.ButtonBackgroundColor = Windows.UI.Colors.Transparent;
    ApplicationView.GetForCurrentView().TitleBar.ButtonInactiveBackgroundColor = Windows.UI.Colors.Transparent;
    Window.Current.SetTitleBar(TitleBar);

    CoreApplication.GetCurrentView().TitleBar.LayoutMetricsChanged += TitleBar_LayoutMetricsChanged;
}

サンプルコード

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

コントロールの配置タイトルバーまで広げる。

ApplicationView.GetForCurrentView().TitleBar.ButtonBackgroundColor = Windows.UI.Colors.Transparent;

ウィンドウの右上のボタンの背景色を設定する。(ここでは透明)

ApplicationView.GetForCurrentView().TitleBar.ButtonInactiveBackgroundColor = Windows.UI.Colors.Transparent;

ウィンドウの右上のボタンの非アクティブ時の背景色を設定する。(ここでは透明)
これがないとアプリが非アクティブ状態のときこのように背景色を透明にしたつもりが、透明でなくなる。

Window.Current.SetTitleBar(TitleBar);

タイトルバーにフォーカスを受け取るコントロールがあるときは別途自作した任意のコントロールをタイトルバーに設定する必要がある。

CoreApplication.GetCurrentView().TitleBar.LayoutMetricsChanged

ウィンドウが表示されるときなどに発生するイベント。
タイトルバーのサイズなどの情報を持っている。
下記のようにイベントハンドラーを設定してサイズ情報を受け取る。

MainPage.xaml.cs

private void TitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    RightText.Margin = new Thickness(0, 0, sender.SystemOverlayRightInset, 0);
}

位置を調整しないと下の画像のように文字が閉じるボタンと被ったりする。

通常のデスクトップなどではあんまり感じないけど、タブレットなんかを考えるとタイトルバーがないほうが便利なのかも