syncfusion-maui-toolkit-accordion

实现 Syncfusion .NET MAUI Accordion

全面介绍如何实现 Syncfusion .NET MAUI Accordion（SfAccordion）——一种垂直可折叠面板控件，可让用户同时展开或折叠一个或多个项目。

何时使用此技能

在以下情况使用此技能：

• 在 .NET MAUI 中实现可折叠／可展开的内容区域
• 显示员工目录、联系人列表或详细记录
• 创建可展开答案的常见问题解答区域
• 构建带分组选项的设置面板
• 显示支持展开／折叠操作的层次结构数据
• 实现垂直展开面板
• 将 Accordion 项绑定到 ObservableCollection 数据源
• 使用主题和 Visual States 自定义 Accordion 外观
• 通过验证处理展开／折叠事件

组件概览

.NET MAUI Accordion 提供垂直堆叠的界面，每个项目都由标题和内容区域组成。用户可以点击标题来展开／折叠内容，因此它非常适合显示层次结构信息、常见问题解答、员工目录，或任何需要以节省空间的方式显示分组内容的场景。

• 单项或多项展开模式
• 使用 .NET MAUI BindableLayout 进行数据绑定
• 可自定义动画（时长和缓动）
• 丰富的外观自定义选项（颜色、图标、Visual States）
• 处理展开／折叠操作的事件
• 以编程方式控制滚动

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装 Syncfusion.Maui.Toolkit NuGet 包
• 使用 ConfigureSyncfusionToolkit() 注册处理程序
• 在 XAML 和 C# 中进行基本的 SfAccordion 设置
• 使用 Header 和 Content 创建 AccordionItem
• 展开模式：Single、Multiple、MultipleOrNone
• 自定义动画时长和缓动
• 配置项目间距
• 自动滚动位置设置
• 使用 BringIntoView 方法以编程方式滚动

使用 BindableLayout 进行数据绑定

📄 阅读： references/data-binding.md

• 使用 INotifyPropertyChanged 创建数据模型
• 为 Accordion 项设置 ObservableCollection
• 配置 BindingContext
• 使用 BindableLayout.ItemsSource 进行数据绑定
• 使用 BindableLayout.ItemTemplate 定义项目外观
• 通过 IsExpanded 属性进行双向绑定
• 从集合动态生成项目
• 包含数据绑定的完整员工列表示例

外观自定义

📄 阅读： references/appearance-customization.md

• 标题图标位置（Start、End）
• 自定义标题背景色
• 自定义图标颜色
• 使用 Visual State Manager 设置基于状态的样式
  • Expanded 和 Collapsed 状态
  • 用于键盘导航的 Focused 状态
  • 用于悬停效果的 PointerOver 状态
  • Normal 状态样式
• 完整的 Visual State 样式示例

事件与交互

📄 阅读： references/events.md

• Expanding 事件（可取消）
• Expanded 事件（完成通知）
• Collapsing 事件（可取消）
• Collapsed 事件（完成通知）
• 事件参数：Cancel 和 Index 属性
• 展开／折叠前进行验证
• 常见事件处理模式

高级功能

📄 阅读： references/advanced-features.md

• 自动滚动位置（Top、MakeVisible）
• 使用 BringIntoView 以编程方式滚动
• 使用 Height=Auto 时的 Grid 布局注意事项
• HorizontalOptions 和 VerticalOptions 最佳实践