avalonia-layout-zafiro

使用 Zafiro.Avalonia 进行 Avalonia 布局

掌握现代、简洁且易于维护的 Avalonia UI 布局。 重点关注语义容器、共享样式和精简的 XAML。

🎯 选择性阅读规则

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

---

下方列出的五份指南均已打包；作者本地的 Angor 解决方案未包含在内。示例并不完整，需要使用实际的 Avalonia/Zafiro/软件包版本和 XML 命名空间声明；UntouchedClassBehavior 和图标资源必须存在于对应安装环境中。不要假设 MultiBinding 在没有合适转换器的情况下会提供逻辑 And/Or；如果样式文件的根节点包含 Styles，也不要将其作为 ResourceDictionary 资源合并。请根据文件根节点的类型，分别使用 StyleInclude 加载样式集合，或使用 ResourceInclude 加载资源字典。确保图标可访问，保留焦点和键盘操作行为，并测试浅色/深色主题、文本缩放和本地化。避免使用转换器或代码隐藏是一种设计偏好，并非通用的正确性或性能规则。

📑 内容索引

文件	说明	阅读时机
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 模式。

适用场景

当任务涉及执行概述中描述的工作流或操作时，可使用此技能。

限制

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