AI 技能AI 插件人工智能【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills点击查看免费下载在 Avalonia 应用中XAML 布局的质量直接决定了代码的可读性与可维护性。Zafiro.Avalonia为常见布局模式提供了语义化容器控件用它们替代裸Border、Grid堆叠能让视图声明更简洁、结构更清晰。本文以本仓库avalonia-layout-zafiro技能包中的containers.md为核心结合同技能包下的themes.md、components.md、icons.md与behaviors.md系统讲解HeaderedContainer、EdgePanel、Card三种语义容器的属性、用法、样式化方式与最佳实践帮助你写出少嵌套、少重复、少魔法的 Avalonia 界面。为什么需要语义容器在传统 Avalonia XAML 中一个带标题的分区通常需要手工组合BorderGrid 多个TextBlock视觉属性和布局逻辑散落在每个元素上。当页面中重复出现这类结构时代码会迅速膨胀且难以统一改版。Zafiro.Avalonia的核心思路是为数据形态选择正确的容器把带标题的分区、左右对齐的信息行、分组卡片这些高频模式固化为专用控件从而简化 XAML让每个控件只表达是什么而非怎么摆提升可维护性样式集中在共享资源中统一管理降低嵌套深度减少渲染树的层级改善性能表现。本技能包SKILL.md将其总结为一句准则关注语义容器、共享样式与最小化 XAML。 HeaderedContainer带标题的分区容器当一个区块需要标题或表头时优先使用HeaderedContainer而不是手写Border加标题行。它把头部区域 内容区域的双层结构内置到控件模板中使用方只需声明 Header 与 Content。基本用法HeaderedContainer HeaderSecurity Settings ClassesWizardSection StackPanel !-- Content here -- /StackPanel /HeaderedContainer关键属性属性作用Header头部内容可以是字符串也可以是任意控件内容HeaderBackground头部区域的画刷Brush用于区分头部与内容区ContentPadding内容区域的内边距避免内容紧贴容器边缘结合模板样式定制内部部件HeaderedContainer的内部由模板构成若需统一调整头部图标的尺寸与外观可以在样式中通过模板选择器定位内部部件。技能包 icons.md 给出了典型写法Style SelectorHeaderedContainer /template/ ContentPresenter#Header EdgePanel /template/ ContentControl#StartContent Setter PropertyIconOptions.Size Value20 / Setter PropertyIconOptions.Fill Value{DynamicResource Accent} / Setter PropertyIconOptions.Padding Value10 / Setter PropertyIconOptions.CornerRadius Value10 / /Style该选择器依次定位HeaderedContainer模板中的ContentPresenter#Header再深入其内部EdgePanel模板中的ContentControl#StartContent从而只针对头部起始图标生效而不会误伤其他图标。这正对应containers.md最佳实践中的建议通过样式模板定制容器内部部件而不是继续嵌套更多控件。↔️ EdgePanel边缘对齐面板EdgePanel用于把元素固定在容器的边缘位置无需编写复杂的Grid列定义。它专为图标 - 文本 - 动作、标签 - 值这类线性行布局设计。基本用法EdgePanel StartContent{Icon fa-wallet} ContentWallet Balance EndContent$1,234.00 /插槽语义插槽对齐位置StartContent对齐到左侧或书写方向起点Content填充中间剩余空间EndContent对齐到右侧或书写方向终点与Grid相比EdgePanel免去了ColumnDefinitions与Grid.Column索引的管理成本与DockPanel相比它把起始/中间/末尾的语义直接固化在属性名中声明即意图。替代重复的 Grid 行components.md中给出了一个典型重构反复出现的标签 - 值Grid行!-- ❌ BAD: Repeated Grid -- Grid ColumnDefinitions*,Auto TextBlock TextTotal: / TextBlock Grid.Column1 Text{Binding Total} / /Grid可以被扁平化为单个EdgePanel!-- ✅ GOOD: Use a specialized control or style -- EdgePanel StartContentTotal: EndContent{Binding Total} ClassesSummaryItem / Card信息分组容器Card是一个轻量容器用于把相关的一组信息聚合成视觉上的卡片常用于HeaderedContainer内部或作为列表中的独立元素。它本身不强制标题结构适合承载表单字段、摘要等。Card HeaderEnter recipient address: TextBox Text{Binding Address} / /Card从components.md的组件粒度分类看Card属于分子级组件——由若干原子标题、内容控件组合而成目标是足够通用以便复用又足够具体以显著简化父视图。 最佳实践让语义容器真正发挥价值containers.md末尾的两条最佳实践是整个技能包的方法论缩影用Classes应用主题变体例如ClassesSection、ClassesHighlight。同一控件在不同语境下通过样式类切换外观而不是复制属性。用模板定制内部部件而非继续嵌套控件当容器内部样式需要调整时优先在样式中编写模板选择器如上一节所示保持视图声明的扁平。这两条实践与 themes.md 中的共享样式策略一脉相承!-- ❌ BAD: Redundant properties -- HeaderedContainer CornerRadius10 BorderThickness1 BorderBrushBlue BackgroundLightBlue / HeaderedContainer CornerRadius10 BorderThickness1 BorderBrushBlue BackgroundLightBlue / !-- ✅ GOOD: Use Classes and Styles -- HeaderedContainer ClassesBlueSection / HeaderedContainer ClassesBlueSection /配套的共享样式定义Style SelectorHeaderedContainer.BlueSection Setter PropertyCornerRadius Value10 / Setter PropertyBorderThickness Value1 / Setter PropertyBorderBrush Value{DynamicResource Accent} / Setter PropertyBackground Value{DynamicResource SurfaceSubtle} / /Style布局选型速查需求推荐容器理由带标题/表头的分区HeaderedContainer头部与内容分层内建支持HeaderBackground、ContentPadding左-中-右单行对齐EdgePanel语义化插槽免去Grid列定义简单线性排列StackPanel配Spacing层级最浅、最易读等尺寸单元格网格UniformGrid所有单元格大小一致信息分组卡片Card轻量分组容器可独立用于列表来源components.md 中的扁平化布局讨论。❌ 反模式自查清单围绕语义容器技能包 SKILL.md 明确列出了应避免的做法在视图中硬编码颜色或尺寸字面量深度嵌套Grid与StackPanel在多个元素上重复书写视觉属性应提取为 Styles为简单逻辑使用IValueConverter应优先放进 ViewModel 属性或 Behaviors。对应的正面做法是颜色与画刷一律使用DynamicResource以支持主题切换详见 themes.md 的Colors.axaml/Theme.axaml组织方式将重复布局抽取为通用组件或语义容器充分利用Zafiro.Avalonia的EdgePanel等专用面板。每完成一个视图可以对照 SKILL.md 中的 CheckList 复核是否使用了语义容器是否避免了冗余属性嵌套是否足够浅图标是否通过{Icon fa-name}扩展使用UI 逻辑是否由Interaction.Behaviors承载总结HeaderedContainer、EdgePanel与Card构成了Zafiro.Avalonia语义容器体系的核心三件套一个负责带标题的分区一个负责边缘对齐的单行布局一个负责信息分组。把它们与Classes 共享样式themes.md、{Icon}扩展与IconOptionsicons.md、Interaction.Behaviorsbehaviors.md配合使用即可系统性减少 XAML 冗余得到结构清晰、易于改版与测试的 Avalonia 布局。本技能包同时可在 plugins/agentic-awesome-skills/skills/avalonia-layout-zafiro 下找到对应的同一套指南方便不同环境按需查阅。赞分享AI 技能AI 插件人工智能【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,600 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/GitHub_Trending/an/agentic-awesome-skills点击查看免费下载相关推荐基于 Zafiro.Avalonia 的 Avalonia UI 现代布局实践语义容器、共享样式与最小化 XAML 冗余基于 Zafiro.Avalonia 的 Avalonia UI 现代布局实践语义容器、共享样式与最小化 XAML 冗余 本文以仓库中 avalonia laAI 技能AI 插件人工智能用 Zafiro.Avalonia 构建通用组件消除 XAML 嵌套与冗余的 Avalonia 布局实践用 Zafiro.Avalonia 构建通用组件消除 XAML 嵌套与冗余的 Avalonia 布局实践 本指南围绕 Avalonia UI 开发中的组件化AI 技能AI 插件人工智能nodeppt 组件语法实战指南用 ::: 容器构建 Grid、Card、Flexblock、Gallery 等复杂幻灯片布局nodeppt 组件语法实战指南用 ::: 容器构建 Grid、Card、Flexblock、Gallery 等复杂幻灯片布局 nodeppt 2.0 在标准前端CLI上一篇在 AAS 中使用 Anti-Deception 技能用 MCP 脚手架拦截 AI 谄媚与权威施压的完整性防线下一篇pandoc Markdown 内联脚注转 AsciiDoc 输出6424 回归测试的转义行为与原理解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考