avalonia-layout-zafiro
使用 Zafiro 构建简洁的 Avalonia UI 布局
使用语义化容器和共享样式创建可维护的 Avalonia 应用程序。通过 Zafiro.Avalonia 组件和最佳实践减少 XAML 冗余。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“avalonia-layout-zafiro”。 Create a wallet balance display with icon, label, and value
预期结果:
Use EdgePanel with StartContent for the wallet icon, Content for the label, and EndContent for the balance value. Apply IconOptions.Size and IconOptions.Fill for consistent icon styling.
正在使用“avalonia-layout-zafiro”。 How do I avoid repeating border and color settings?
预期结果:
Define a Style in Containers.axaml with selector 'HeaderedContainer.BlueSection', set CornerRadius, BorderThickness, BorderBrush, and Background using DynamicResource. Apply with Classes='BlueSection'.
安全审计
安全Static analysis detected 100 pattern matches but all are false positives. The skill contains only Markdown documentation files with XAML examples for Avalonia UI development. Detected patterns like backticks are Markdown code fences, not shell execution. No executable code or security risks present.
质量评分
你能构建什么
桌面应用开发者
重构现有 Avalonia 视图以使用语义化容器和共享样式，实现更简洁、更可维护的 XAML。
UI 架构师
使用 Zafiro 组件和主题组织在大型 Avalonia 代码库中建立一致的 UI 模式。
跨平台开发者
学习适用于 Windows、macOS 和 Linux 平台的现代 Avalonia 布局技术。
试试这些提示
我需要创建一个带标题和内容的设置部分。应该使用哪个 Zafiro 容器，如何使用？
展示如何使用 IconExtension 将 FontAwesome 图标添加到按钮和标题，并保持一致的样式。
我在多个 HeaderedContainer 元素中有重复的属性设置。帮助我使用 Classes 将它们提取为共享样式。
我需要处理 TextBox 的焦点管理而不使用代码后置。展示如何使用 Interaction.Behaviors 实现这一点。
最佳实践
- 使用 DynamicResource 定义颜色和画刷以支持主题切换
- 使用 EdgePanel 扁平化布局，避免嵌套的 Grid 和 StackPanel 结构
- 将重复的布局提取为可重用的泛型 UserControl 组件
避免
- 在视图 XAML 中直接使用硬编码的颜色或尺寸，而不是使用资源
- 使用多层 Grid 和 StackPanel 创建深度嵌套
- 将本应放在 ViewModel 中的简单逻辑使用 IValueConverter 处理