1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Avalonia UIでタイトルバーなしウィンドウ

Posted at

消したいんですよ。

image.png

Windowsといえばウィンドウ、ウィンドウといえばタイトルバーがありますね。
邪魔です。
端から端まで自分のデザインを入れたいと思ったら、いつものお馴染みのあのUIは取っ払ってしまいたいです。

目標設定

ひとくちにタイトルバーを消したいといっても、関連要素いろいろあるわけですが、ひとまず今回は以下の目標設定でいこうと思います。

  • タイトルバー:消す
  • システムメニュー(左上のアイコン):消す
  • コントロールボタン(右上の3つ):消す
  • サイズ変更の枠:残す

前提

  • Visual Studio 2026 Community Version: 18.1.0
  • Avalonia UI 11.3.6
  • Windows 11

元のコード

MainWindow.axaml
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaHideTitleBarSample.MainWindow"
        Title="AvaloniaHideTitleBarSample">
    Welcome to Avalonia!
</Window>

できたもの

image.png

MainWindow.axaml
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
         x:Class="AvaloniaHideTitleBarSample.MainWindow"
+        ExtendClientAreaToDecorationsHint="True"
+        ExtendClientAreaChromeHints="NoChrome"
+        CanMaximize="False"
+        CanMinimize="False"
         Title="AvaloniaHideTitleBarSample">
     Welcome to Avalonia!
 </Window>

4行追加しただけです。簡単ですね。

コード全文は以下のリポジトリに置いてあります。

説明

ExtendClientAreaToDecorationsHint="True"でクライアント領域を広げる

これは、普通はタイトルバーの中にタブとか検索窓などのUIを埋め込むために使います。
とにかく、ウィンドウ全域がクライアント領域になります。
指定するのがこれだけだと右上のボタンは表示されてしまいますが、むしろそれが良いという人はここで止めるのもありでしょう。

image.png

ExtendClientAreaChromeHints="NoChrome"でボタン類を消す

先ほどのExtendClientAreaToDecorationsHint="True"と組み合わせることで、ボタン類が非表示になります。
ただし、最大化ボタンはないけどWin+↑で最大化、最小化ボタンはないけどWin+↓で最小化ができてしまいます。
また、実は上側にタイトルバーのクリック判定は残っているので、ダブルクリックでも最大化できます。

CanMaximize="False" CanMinimize="False"で最大化・最小化機能も消す

その抜け道をふさぐのがこの指定です。

ちなみにこれ、かなり新しいバージョンで追加されたようで、11.1では使えませんでした。

その他のバリエーション

こっから先のコードは「できたもの」からの差分で書いてます。

ExtendClientAreaTitleBarHeightHint="0"でタイトルバーのクリック判定も消す

先ほどさらっと言いましたが、あの4行ではタイトルバーのクリック判定が残っています。
なので、ドラッグすれば移動できます。

MainWindow.axaml
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
         x:Class="AvaloniaHideTitleBarSample.MainWindow"
         ExtendClientAreaToDecorationsHint="True"
         ExtendClientAreaChromeHints="NoChrome"
+        ExtendClientAreaTitleBarHeightHint="0"
         CanMaximize="False"
         CanMinimize="False"
         Title="AvaloniaHideTitleBarSample">
     Welcome to Avalonia!
 </Window>

それすら消して完全にタイトルバーを亡き者にするのがこれ。

ただし、サイズ変更機能もタイトルバーに依存しているらしく、上側のサイズ変更ができなくなります。

SystemDecorations="None"で枠ごと全部消す

image.png

MainWindow.axaml
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
         x:Class="AvaloniaHideTitleBarSample.MainWindow"
-        ExtendClientAreaToDecorationsHint="True"
-        ExtendClientAreaChromeHints="NoChrome"
+        SystemDecorations="None"
         CanMaximize="False"
         CanMinimize="False"
         Title="AvaloniaHideTitleBarSample">
     Welcome to Avalonia!
 </Window>

枠が無くなって白背景と同化するので、背景に画像入れました。
サイズ変更がいらないならいっそ全部消しちゃえってやつ。
それでもキーボードショートカットは生きているので、CanMaximizeとCanMinimizeは残しているわけです。

SystemDecorations="BorderOnly"で枠を残す

image.png

MainWindow.axaml
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
         x:Class="AvaloniaHideTitleBarSample.MainWindow"
-        ExtendClientAreaToDecorationsHint="True"
-        ExtendClientAreaChromeHints="NoChrome"
+        SystemDecorations="BorderOnly"
         CanMaximize="False"
         CanMinimize="False"
         Title="AvaloniaHideTitleBarSample">
     Welcome to Avalonia!
 </Window>

これだとタイトルバーの判定が完全に消え、ドラッグによる移動もできなくなります。

移動不可能がいいかどうかは場合によると思いますが、これはちょっと欠陥があります。
上側に微妙に余白が開くんですよね。
実は最初に試したのがこれだったんですが、上の余白が許せなくて最初のあれにした次第です。

おわりに

UIフレームワークも最新バージョン使うようにしような!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?