Avalonia 本身不内置独立的“XAML Previewer”应用,但可通过 Visual Studio 或 Rider 的实时预览功能实现高效 XAML 开发体验。关键不是安装某个叫“Avalonia XAML Previewer”的工具,而是正确配置开发环境,启用 Avalonia 支持的实时可视化能力。
Visual Studio 中启用 XAML 实时预览(推荐方式)
从 Visual Studio 2022 v17.14 起,XAML Live Preview 已支持 Avalonia 项目(需确认已安装最新 .NET SDK 和 Avalonia 扩展):
.axaml文件(Avalonia 标准扩展名),且
App.axaml中已正确声明命名空间:
<Application xmlns="https://github.com/avaloniaui" ...>打开任意
.axaml文件(如
MainWindow.axaml) 在顶部菜单栏点击 调试 → Windows → XAML Live Preview
或直接点击工具栏上的 “在 XAML 实时预览中显示” 按钮(图标为 ?️+代码符号)
预览器常用操作
缩放:按Ctrl + +/
Ctrl + -,或
Ctrl + 鼠标滚轮滚动:鼠标滚轮、触摸板双指滑动、按住
Ctrl拖拽 元素选择:点击预览区元素 → 自动高亮并定位到对应 XAML 行(需开启“预览所选项”) 标尺对齐:点击标尺按钮添加垂直/水平参考线,辅助布局校准
Rider 用户注意
JetBrains Rider 内置 Avalonia 支持更早更稳定:
.axaml文件后,右下角会显示 Preview 标签页,点击即可开启双向实时渲染 修改 XAML 后保存(
Ctrl+S),界面即时更新,无需启动调试
确保预览生效的关键点
项目必须引用Avalonia.Desktop或对应平台包(如
Avalonia.Win32)
App.axaml中
<application.styles></application.styles>下应包含主题(如
<fluenttheme></fluenttheme>),否则控件可能无样式显示 若预览空白,检查输出窗口是否有
Avalonia: Failed to load theme类错误,常见于缺失
Avalonia.Themes.FluentNuGet 包
设计时数据支持(Design-time only)
可在
.axaml中使用
Design.PreviewWith指定模拟 ViewModel,让预览器显示真实数据结构:
<Design.PreviewWith> <local:SettingsViewModel /> </Design.PreviewWith>
需确保该 ViewModel 构造函数无运行时依赖(如数据库连接),仅用于设计器上下文。
基本上就这些。不需要额外安装插件,只要环境配对、文件规范、主题就绪,预览就是开箱即用的。
