---

name: avalonia-layout-zafiro description: "使用 Zafiro.Avalonia 进行现代 Avalonia UI 布局的指南，强调共享样式、通用组件和避免 XAML 冗余。" risk: unknown source: community date_added: "2026-02-27"

使用 Zafiro.Avalonia 的 Avalonia 布局

掌握现代、整洁、可维护的 Avalonia UI 布局。 专注于语义容器、共享样式和最小化 XAML。

选择性阅读规则

仅阅读与布局挑战相关的文件！

---

内容地图

| 文件 | 描述 | 何时阅读 | |------|-------------|--------------| | themes.md | 主题组织和共享样式 | 设置或优化应用主题时 | | containers.md | 语义容器（HeaderedContainer、EdgePanel、Card） | 构建视图和布局时 | | icons.md | 使用 IconExtension 和 IconOptions 的图标用法 | 添加和自定义图标时 | | behaviors.md | Xaml.Interaction.Behaviors 和避免转换器 | 实现复杂交互时 | | components.md | 通用组件和避免嵌套 | 创建可复用 UI 元素时 |

---

相关项目（示范实现）

真实世界示例，参考 Angor 项目： /mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln

---

整洁布局检查清单

• [ ] 使用了语义容器？（例如用 HeaderedContainer 代替带手动标题的 Border）
• [ ] 避免了冗余属性？ 在 axaml 文件中使用共享样式。
• [ ] 最小化了嵌套？ 使用 EdgePanel 或通用组件扁平化布局。
• [ ] 通过扩展使用图标？ 使用 {Icon fa-name} 和 IconOptions 进行样式设置。
• [ ] 行为优于代码后置？ 使用 Interaction.Behaviors 处理 UI 逻辑。
• [ ] 避免了转换器？ 除非必要，优先使用 ViewModel 属性或行为。

---

反模式

不要：

• 在视图中使用硬编码的颜色或尺寸（字面量）。
• 创建 Grid 和 StackPanel 的深层嵌套。
• 在多个元素间重复视觉属性（使用样式）。
• 对属于 ViewModel 的简单逻辑使用 IValueConverter。

要做：

• 对颜色和画刷使用 DynamicResource。
• 将重复布局提取为通用组件。
• 利用 Zafiro.Avalonia 特有的面板如 EdgePanel 处理常见 UI 模式。

何时使用

此技能适用于执行概述中描述的工作流或操作。

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为特定环境验证、测试或专家审查的替代品。
• 如果缺少所需输入、权限、安全边界或成功标准，请停下来要求澄清。