在 Avalonia 中实现自定义窗口标题栏(即无边框窗口),核心是关闭系统原生边框 + 手动绘制标题栏区域 + 自行处理拖拽、最小化、最大化、关闭等窗口操作。这需要配合
Window的属性设置、XAML 布局控制,以及 C# 事件逻辑。
1. 启用无边框窗口模式
在窗口 XAML 中,将
Window的
HasSystemDecorations设为
false,并建议同时设置
ResizeMode="CanResize"(否则无法拖拽调整大小):
ResizeMode="CanResize"
ExtendClientAreaToDecorationsHint="True">
注意:
ExtendClientAreaToDecorationsHint="True"是关键,它让客户端区域(即你的 UI)能延伸到系统标题栏位置,从而允许你在顶部绘制自定义标题栏。
2. 在 XAML 中手动布局标题栏
推荐使用
Grid划分顶部标题栏区域(例如高度 32px),并添加拖拽区、图标、标题文本和控制按钮: 顶部
Grid.Row="0"区域设为
Height="32",背景色可自定义 内部放一个
TextBlock显示窗口标题(绑定
{Binding Title} 或硬编码)
右侧放三个 Button:最小化、最大化/还原、关闭(图标可用
Path或字体图标) 整个标题栏区域需设置
Classes="titlebar"并在 CSS 中加
-avalonia-extensions: drag-region;(见下一步)
3. 标记可拖拽区域(关键!)
Avalonia 使用 CSS 扩展属性标记哪些区域支持窗口拖拽。在
Styles.xaml或内联样式中添加: .titlebar {
-avalonia-extensions: drag-region;
}
这样用户点击该区域即可拖动整个窗口。若只希望标题文字部分可拖拽,就把
drag-region加在
TextBlock上;若整行都可拖,就加在外层容器上。
4. 实现窗口控制按钮逻辑
为最小化、最大化、关闭按钮绑定命令或事件处理程序:
关闭:调用this.Close()最小化:调用
this.WindowState = WindowState.Minimized最大化/还原:根据当前
WindowState切换:
若为
Normal→ 设为
Maximized;
若为
Maximized→ 设为
Normal
也可用
Window.ExtendClientAreaChromeHints控制是否显示系统阴影、是否允许 Aero 毛玻璃(Windows)等视觉效果。
基本上就这些。不复杂但容易忽略
ExtendClientAreaToDecorationsHint和 CSS 的
drag-region,这两项缺一不可。
