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

来源:这里教程网 时间:2026-02-21 17:34:38 作者:

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.Fluent
NuGet 包

设计时数据支持(Design-time only)
可在

.axaml
中使用
Design.PreviewWith
指定模拟 ViewModel,让预览器显示真实数据结构:

<Design.PreviewWith>
  <local:SettingsViewModel />
</Design.PreviewWith>

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

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

相关推荐