Avalonia如何使用XAML预览器 Avalonia XAML Previewer设置

Avalonia 无内置 XAML Previewer,但 Visual Studio 2025 v17.14+ 和 Rider 均支持实时预览:需使用 .axaml 文件、正确配置命名空间与主题(如 FluentTheme)、引用 Avalonia.Desktop 等平台包,并可借助 Design.PreviewWith 实现设计时数据模拟。

Avalonia 本身不内置独立的“XAML Previewer”应用,但可通过 Visual Studio 或 Rider 的实时预览功能实现高效 XAML 开发体验。关键不是安装某个叫“Avalonia XAML Previewer”的工具,而是正确配置开发环境,启用 Avalonia 支持的实时可视化能力。

Visual Studio 中启用 XAML 实时预览(推荐方式)
从 Visual Studio 2025 v17.14 起,XAML Live Preview 已支持 Avalonia 项目(需确认已安装最新 .NET SDK 和 Avalonia 扩展):

  • 确保项目使用 .axaml 文件(Avalonia 标准扩展名),且 App.axaml 中已正确声明命名空间:
  • 打开任意 .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 下应包含主题(如 ),否则控件可能无样式显示
  • 若预览空白,检查输出窗口是否有 Avalonia: Failed to load theme 类错误,常见于缺失 Avalonia.Themes.Fluent NuGet 包

设计时数据支持(Design-time only)
可在 .axaml 中使用 Design.PreviewWith 指定模拟 ViewModel,让预览器显示真实数据结构:


  

需确保该 ViewModel 构造函数无运行时依赖(如数据库连接),仅用于设计器上下文。

基本上就这些。不需要额外安装插件,只要环境配对、文件规范、主题就绪,预览就是开箱即用的。