Mobile Blazor Bindings を使用したWindows版アプリケーションでタイトルバーを小さくする方法

概要

Mobile Blazor Bindingsを使用したWindows版アプリケーションのタイトルバー(下の画像の青い部分)の主張が激しいので、タイトルバーを小さくする方法について

• タイトルバーを小さくする前
  

• タイトルバーを小さくした後
  

結論

PART_TopAppBar要素の高さを0にするとタイトルバーが表示されなくなる。

詳細

App.csのMainWindowクラスにWindows版アプリケーションの設定が書かれているのでそこで設定を変更する。

タイトルバーはPART_TopAppBarという名前で要素が設定されているので、その要素の高さを0にする。
また、アプリケーション名を表示したい場合は、PART_System_Title要素のテキストを変更することでアプリケーション名をウィンドウの左上に表示できる。
PART_System_Title要素はPART_CommandsBar要素の中にあるので、名前で検索すればOK。

2つの処理をまとめるとこんなコードになる。

App.cs

public class MainWindow : FormsApplicationPage
{
    // 省略

    protected override void OnActivated (EventArgs e)
    {
        base.OnActivated(e);

        var topAppBar = Template.FindName("PART_TopAppBar", this) as Xamarin.Forms.Platform.WPF.Controls.FormsAppBar; ;

        if (topAppBar != null)
        {
            topAppBar.Height = 0;
        }

        var commandsBar = Template.FindName("PART_CommandsBar", this) as System.Windows.Controls.Grid;

        if (commandsBar != null)
        {
            var titleTextBlock = commandsBar.FindName("PART_System_Title") as System.Windows.Controls.TextBlock;

            if (titleTextBlock != null)
            {
                titleTextBlock.Text = Application.MainPage.Title;
            }
        }
    }
}

終わり

記事を書いてる途中で、この問題ってBlazorじゃなくてXamarinの範囲ではとか思ったけど、ひとまず記事にはBlazorタグを付けておく