syncfusion-maui-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）
• 处理展开／折叠操作的事件
• 支持 Liquid Glass Effect（iOS 26+、macOS 26+）
• 以编程方式控制滚动

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装 Syncfusion.Maui.Expander NuGet 包
• 使用 ConfigureSyncfusionCore() 注册处理程序
• 在 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 以编程方式滚动
• 集成 Liquid Glass Effect
  • 将 SfAccordion 包装在 SfGlassEffectView 中
  • EnableLiquidGlassEffect 属性
  • 设置透明背景
  • 平台要求（iOS 26+、macOS 26+）
• 使用 Height=Auto 时的 Grid 布局注意事项
• HorizontalOptions 和 VerticalOptions 最佳实践