mcpField
S
syncfusion-maui-expander

syncfusion-maui-expander

github.com/syncfusion设计与 UI61208 次安装2 周前更新
代码仓库

关于 syncfusion-maui-expander

面向 .NET MAUI 开发者的 Syncfusion SfExpander 实现与定制指南，讲解可折叠内容区、动画、事件和标题样式，适用于手风琴式布局等场景。

主要功能

  1. 01点击标题展开或折叠内容
  2. 02自定义标题与内容布局
  3. 03设置动画时长和缓动
  4. 04处理可取消的展开折叠事件
  5. 05通过 Visual State Manager 定制样式

适用场景

  1. 01制作 FAQ 折叠区
  2. 02组织设置面板内容
  3. 03展示可展开的收据或发票分区

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/maui-ui-components-skills --skill syncfusion-maui-expander

安装后在 Claude Code 中输入/syncfusion-maui-expander确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
animation-events.md
appearance-styling.md
getting-started.md
header-content-customization.md
liquid-glass-effect.md

详细介绍

实现 .NET MAUI Expander (SfExpander)

Syncfusion .NET MAUI Expander 控件提供可折叠和可展开的内容区块，便于创建节省空间的布局。用户可以轻点标题，通过平滑动画显示或隐藏内容，因此它非常适合手风琴式布局、常见问题解答和有序的数据展示。

何时使用此技能

在以下情况下使用此技能：

  • 实现可折叠区块，以节省布局空间并有序展示内容
  • 创建手风琴式界面，用于常见问题解答、设置面板或分组数据
  • 构建发票或收据视图，并使用可展开区块（日期、商品、付款、地址）
  • 设计动态标题/内容布局，让用户轻点即可查看更多信息
  • 添加带动画的展开/折叠功能，并自定义持续时间和缓动效果
  • 处理展开/折叠事件，以控制用户交互和状态管理
  • 自定义标题外观，包括背景、图标位置和 Visual State Manager 样式
  • 应用现代液态玻璃效果，为高端应用打造优质的半透明设计

组件概览

  • 轻点标题即可交互式展开/折叠
  • 标题和内容视图布局均可完全自定义
  • 支持配置持续时间和缓动效果的平滑动画
  • 提供 Expanding、Expanded、Collapsing 和 Collapsed 状态的事件系统
  • 通过 IsExpanded 属性进行编程控制
  • 支持使用 Visual State Manager 动态设置样式
  • 可自定义标题外观（背景、图标位置、颜色）
  • 现代液态玻璃效果（.NET 10+、macOS 26+、iOS 26+）
  • 可取消 Expanding 和 Collapsing 操作
  • 针对平台优化的渲染和动画

文档和导航指南

入门

📄 阅读： references/getting-started.md

适用场景：首次设置、安装和基本实现

  • 安装 Syncfusion.Maui.Expander NuGet 包
  • 注册 Syncfusion 处理程序（ConfigureSyncfusionCore）
  • 创建基本的 SfExpander 实例
  • 定义 Header 和 Content 视图
  • 使用 IsExpanded 属性控制初始状态
  • 包含多个 expander 的完整发票示例
  • 运行你的第一个 expander 应用
标题和内容自定义

📄 阅读： references/header-content-customization.md

适用场景：使用布局和视图自定义标题和内容区块

  • 在 Header 和 Content 属性中加载任意 UI 视图
  • 使用包含图标和标签的 Grid 布局
  • 使用字体系列集成图标
  • 多个 expander 的布局（包含多个区块的发票）
  • 内容结构最佳实践
  • 避免常见问题（在容器中使用 Label 时的换行问题）
动画和事件

📄 阅读： references/animation-events.md

适用场景：控制动画行为并处理展开/折叠事件

  • AnimationDuration 属性（默认值：300ms）
  • AnimationEasing 属性（Linear、SinOut 等）
  • 使用 IsExpanded 属性进行编程控制
  • Expanding 事件：展开前触发（可取消）
  • Expanded 事件：展开完成后触发
  • Collapsing 事件：折叠前触发（可取消）
  • Collapsed 事件：折叠完成后触发
  • 包含取消逻辑的事件处理程序示例
外观和样式

📄 阅读： references/appearance-styling.md

适用场景：自定义标题外观、颜色、图标和 Visual State Manager 样式

  • HeaderIconPosition 属性（Start、End）
  • 自定义 HeaderBackground 颜色
  • 自定义 HeaderIconColor
  • Visual State Manager (VSM) 状态：Expanded、Collapsed、PointerOver、Normal
  • 根据 expander 状态动态更改外观
  • 包含颜色过渡效果的完整 VSM 示例
液态玻璃效果

📄 阅读： references/liquid-glass-effect.md

阅读时机：应用带自适应色调的现代半透明设计时

  • 何时使用液态玻璃效果（高端 UX 应用）
  • 在 SfGlassEffectView 中包装 SfExpander
  • 在 expander 上设置 EnableLiquidGlassEffect="True"
  • 使用 Background="Transparent" 实现玻璃效果
  • 液态玻璃效果的完整发票示例
  • 平台要求：.NET 10+、macOS 26+、iOS 26+
  • 多个具有一致玻璃效果的 expander

评论

支持 Markdown