Back to Details

avalonia-layout-zafiro

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Avalonia Layout with Zafiro.Avalonia

基于Zafiro.Avalonia的Avalonia布局

Master modern, clean, and maintainable Avalonia UI layouts. Focus on semantic containers, shared styles, and minimal XAML.
掌握现代、简洁且可维护的Avalonia UI布局。 重点关注语义化容器、共享样式和精简XAML。

🎯 Selective Reading Rule

🎯 选择性阅读规则

Read ONLY files relevant to the layout challenge!
仅阅读与布局挑战相关的文件！

📑 Content Map

📑 内容地图

FileDescriptionWhen to Read
themes.md
Theme organization and shared stylesSetting up or refining app themes
containers.md
Semantic containers (
HeaderedContainer
, 
EdgePanel
, 
Card
)		Structuring views and layouts
icons.md
Icon usage with 
IconExtension
and 
IconOptions
Adding and customizing icons
behaviors.md
Xaml.Interaction.Behaviors
and avoiding Converters		Implementing complex interactions
components.md
Generic components and avoiding nestingCreating reusable UI elements
文件描述阅读时机
themes.md
主题组织与共享样式设置或优化应用主题时
containers.md
语义化容器（
HeaderedContainer
、
EdgePanel
、
Card
）		构建视图与布局结构时
icons.md
使用
IconExtension
和
IconOptions
处理图标		添加或自定义图标时
behaviors.md
Xaml.Interaction.Behaviors
及避免使用转换器		实现复杂交互时
components.md
通用组件与避免嵌套创建可复用UI元素时

🔗 Related Project (Exemplary Implementation)

🔗 相关项目（示例实现）

For a real-world example, refer to the Angor project: 
/mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln
如需真实世界示例，请参考Angor项目： 
/mnt/fast/Repos/angor/src/Angor/Avalonia/Angor.Avalonia.sln

✅ Checklist for Clean Layouts

✅ 简洁布局检查清单

  • Used semantic containers? (e.g., 
    HeaderedContainer
    instead of 
    Border
    with manual header)
  • Avoided redundant properties? Use shared styles in 
    axaml
    files.
  • Minimized nesting? Flatten layouts using 
    EdgePanel
    or generic components.
  • Icons via extension? Use 
    {Icon fa-name}
    and 
    IconOptions
    for styling.
  • Behaviors over code-behind? Use 
    Interaction.Behaviors
    for UI-logic.
  • Avoided Converters? Prefer ViewModel properties or Behaviors unless necessary.
  • 是否使用了语义化容器？（例如，使用
    HeaderedContainer
    替代手动添加标题的
    Border
    ）
  • 是否避免了冗余属性？ 在
    axaml
    文件中使用共享样式。
  • 是否最小化了嵌套？ 使用
    EdgePanel
    或通用组件扁平化布局。
  • 是否通过扩展使用图标？ 使用
    {Icon fa-name}
    和
    IconOptions
    进行样式设置。
  • 是否优先使用Behaviors而非代码后置？ 使用
    Interaction.Behaviors
    处理UI逻辑。
  • 是否避免了转换器？ 除非必要，否则优先使用ViewModel属性或Behaviors。

❌ Anti-Patterns

❌ 反模式

DON'T:
  • Use hardcoded colors or sizes (literals) in views.
  • Create deep nesting of 
    Grid
    and 
    StackPanel
    .
  • Repeat visual properties across multiple elements (use Styles).
  • Use 
    IValueConverter
    for simple logic that belongs in the ViewModel.
DO:
  • Use 
    DynamicResource
    for colors and brushes.
  • Extract repeated layouts into generic components.
  • Leverage 
    Zafiro.Avalonia
    specific panels like 
    EdgePanel
    for common UI patterns.
不要：
  • 在视图中使用硬编码的颜色或尺寸（字面量）。
  • 创建
    Grid
    和
    StackPanel
    的深层嵌套。
  • 在多个元素中重复设置视觉属性（请使用样式）。
  • 对属于ViewModel的简单逻辑使用
    IValueConverter
    。
应该：
  • 对颜色和画刷使用
    DynamicResource
    。
  • 将重复的布局提取为通用组件。
  • 利用
    Zafiro.Avalonia
    特有的面板（如
    EdgePanel
    ）实现常见UI模式。