avalonia-layout-zafiro

# 使用 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` 进行样式设置。 - [ ] **使用行为 (Behaviors) 代替后台代码 (Code-behind) 吗？** 使用 `Interaction.Behaviors` 处理 UI 逻辑。 - [ ] **避免了转换器 (Converters) 吗？** 除非必要，否则优先使用 ViewModel 属性或行为。 --- ## ❌ 反模式 **不要：** - 在视图中使用硬编码的颜色或尺寸 (字面量)。 - 创建 `Grid` 和 `StackPanel` 的深度嵌套。 - 在多个元素中重复视觉属性 (请使用样式)。 - 对属于 ViewModel 的简单逻辑使用 `IValueConverter`。 **要：** - 对颜色和画笔使用 `DynamicResource`。 - 将重复的布局提取为通用组件。 - 利用 `Zafiro.Avalonia` 特有的面板（如 `EdgePanel`）处理常见 UI 模式。