name: avalonia-layout-zafiro description: 使用 Zafiro.Avalonia 进行现代 Avalonia UI 布局的指南，强调共享样式、通用组件和避免 XAML 冗余。 allowed-tools: 读取、写入、编辑、全局、搜索
Avalonia 布局与 Zafiro.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 模式。