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

Avalonia 无内置 XAML Previewer，但 Visual Studio 2022 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 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），界面即时更新，无需启动调试

确保预览生效的关键点

海螺AI

MiniMax平台的AI对话问答工具，你的AI伙伴

317

查看详情

• 项目必须引用 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 构造函数无运行时依赖（如数据库连接），仅用于设计器上下文。

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

以上就是Avalonia如何使用XAML预览器 Avalonia XAML Previewer设置的详细内容，更多请关注php中文网其它相关文章！