syncfusion-maui-toolkit-expander

实现 .NET MAUI Expander (SfExpander)

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

何时使用此技能

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

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

组件概述

• 点击标题即可交互式地展开或折叠
• 标题和内容视图布局均可完全自定义
• 动画流畅，时长和缓动效果可配置
• 提供 Expanding、Expanded、Collapsing 和 Collapsed 状态的事件系统
• 通过 IsExpanded 属性进行编程控制
• 支持 Visual State Manager 动态设置样式
• 可自定义标题外观（背景、图标位置、颜色）
• 可取消 Expanding 和 Collapsing 操作
• 针对平台优化的渲染和动画

文档与导航指南

入门

📄 阅读： references/getting-started.md

阅读时机：首次设置、安装、基本实现

• 安装 Syncfusion.Maui.Toolkit NuGet 包
• 注册 Syncfusion 处理程序（ConfigureSyncfusionToolkit）
• 创建基本的 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 示例