Avalonia 布局 Zafiro

使用 Zafiro.Avalonia 进行 Avalonia 布局

> 精通现代、简洁且可维护的 Avalonia UI 布局。
> 重点关注语义化容器、共享样式和极简 XAML。

🎯 选择性阅读原则

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

---

📑 内容映射

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

---

🔗 相关项目（示例实现）

如需查看实际应用案例，请参考 Angor 项目：
/mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln

---

✅ 简洁布局检查清单

• [ ] 是否使用了语义化容器？ (例如：使用 HeaderedContainer 而非手动添加标题的 Border)

• [ ] 是否避免了冗余属性？ 在 axaml 文件中使用共享样式。

• [ ] 是否尽量减少了嵌套？ 使用 EdgePanel 或通用组件来扁平化布局。

• [ ] 图标是否通过扩展实现？ 使用 {Icon fa-name} 和 IconOptions 进行样式定义。

• [ ] 是否优先使用 Behavior 而非 Code-behind？ 使用 Interaction.Behaviors 处理 UI 逻辑。

• [ ] 是否避免了 Converter？ 除非必要，否则优先使用 ViewModel 属性或 Behavior。

---

❌ 反面模式

避免：

• 在视图中使用硬编码的颜色或尺寸（字面量）。

• 创建深层嵌套的 Grid 和 StackPanel。

• 在多个元素中重复定义视觉属性（应使用 Styles）。

• 对本应属于 ViewModel 的简单逻辑使用 IValueConverter。

推荐：

• 使用 DynamicResource 定义颜色和画刷。

• 将重复的布局提取为通用组件。

• 利用 Zafiro.Avalonia 特有的面板（如 EdgePanel）实现常见 UI 模式。

适用场景

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

局限性

• 仅在任务明确符合上述范围时使用此技能。

• 不要将输出结果视为环境特定验证、测试或专家评审的替代方案。

• 如果缺少必要的输入、权限、安全边界或验收标准，请停止操作并寻求澄清。