# Collapse 使用文档
本文档介绍 AtomUI Collapse 控件的各种使用方式，示例代码摘自 Gallery 演示程序。
> 📖 Gallery 源码位置：`controlgallery/AtomUIGallery/ShowCases/Views/DataDisplay/CollapseShowCase.axaml`
---
## 前置准备
在 AXAML 中使用 Collapse，需要引入以下命名空间：
```xml
xmlns:atom="https://atomui.net"
xmlns:antdicons="https://atomui.net/icons/antdesign"
```
在 C# 代码中引入：
```csharp
using AtomUI.Desktop.Controls; // Collapse, CollapseItem 控件
using AtomUI.Controls; // SizeType 等共享类型
```
---
## 1. 基本用法
默认模式下，任意数量的面板可以同时展开。通过 `IsSelected="True"` 设置默认展开的面板：
```xml
A dog is a type of domesticated animal. Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
```
---
## 2. 手风琴模式
通过 `IsAccordion="True"` 启用手风琴模式，同时只能展开一个面板：
```xml
Content 1
Content 2
Content 3
```
**使用场景**：FAQ 列表、设置项分组等「一次只关注一件事」的场景。
---
## 3. 三种尺寸
通过 `SizeType` 属性设置面板尺寸，支持 `Large`、`Middle`（默认）、`Small` 三种：
```xml
Default size content
Small size content
Large size content
```
**使用场景指引**：
- **Large**：信息密度低的场景，如产品详情页
- **Middle**：大多数常规场景
- **Small**：信息密度高的场景，如侧边栏、辅助面板
---
## 4. 无边框模式
通过 `IsBorderless="True"` 去除外边框，视觉更轻量：
```xml
Content 1
Content 2
Content 3
```
---
## 5. 幽灵模式
通过 `IsGhostStyle="True"` 使面板背景透明，最轻量化视觉效果：
```xml
Content 1
Content 2
Content 3
```
**使用场景**：嵌入到有背景色的区域中，需要与周围内容融为一体。
---
## 6. 展开图标位置
通过 `ExpandIconPosition` 控制展开图标在左侧或右侧：
```xml
Content 1
Content 1
```
展开图标位置支持数据绑定，可在运行时动态切换：
```xml
Content 1
```
---
## 7. 触发方式
通过 `TriggerType` 控制折叠/展开的触发区域：
```xml
Content
Content
```
**使用场景**：当头部包含可交互元素（如按钮、链接）时，使用 `TriggerType="Icon"` 避免误触。
---
## 8. 隐藏特定面板的展开图标
通过 CollapseItem 的 `IsShowExpandIcon="False"` 隐藏单个面板的展开图标：
```xml
Content
Content (can still be collapsed by clicking header)
```
---
## 9. 附加内容（AddOnContent）
在头部右侧放置操作按钮或图标，通过 `AddOnContent` 属性设置：
```xml
Content with extra action
Another content
```
也可以使用 `AddOnContentTemplate` 设置更复杂的附加内容。
---
## 10. 嵌套折叠面板
Collapse 支持嵌套使用：
```xml
Nested content
Regular content
```
---
## 11. 自定义头部和内容间距
通过 `ItemHeaderPadding` 和 `ItemContentPadding` 统一设置所有面板的间距：
```xml
Content 1
Content 2
Content 1
Content 2
```
也可以在 CollapseItem 级别单独设置：
```xml
Content with more padding
Content with default padding
```
---
## 12. 禁用状态
通过 `IsEnabled="False"` 禁用整个折叠面板：
```xml
Content
Content
```
---
## 13. 数据驱动（ItemsSource）
通过 `ItemsSource` 绑定数据集合自动生成面板，配合 `ICollapseItemData` 接口映射属性：
```csharp
// 数据模型
public class MyCollapseData : ICollapseItemData
{
public object? Header { get; set; }
public bool IsSelected { get; set; }
public bool IsEnabled { get; set; } = true;
public bool IsShowExpandIcon { get; set; } = true;
public string Content { get; set; } = "";
}
// ViewModel
public ObservableCollection CollapsePanels { get; } = new()
{
new MyCollapseData { Header = "Panel 1", Content = "Content 1", IsSelected = true },
new MyCollapseData { Header = "Panel 2", Content = "Content 2" },
new MyCollapseData { Header = "Panel 3", Content = "Content 3" },
};
```
```xml
```
也可以使用内置的 `CollapseItemData` record：
```csharp
var panels = new ObservableCollection
{
new() { Header = "Panel 1", IsSelected = true },
new() { Header = "Panel 2" },
new() { Header = "Panel 3", IsShowExpandIcon = false },
};
```
---
## 14. 控制动画行为
```xml
Content
```
---
## 常见组合模式
### FAQ 列表
```xml
AtomUI is a cross-platform UI control library that reproduces
Ant Design 5.0 on .NET / Avalonia.
Currently supports Windows, macOS, and Linux. Mobile support is planned.
```
### 设置面板
```xml
```
### 带操作按钮的面板
```xml
```
### 嵌套分组（仅图标触发）
```xml
Connection settings
Performance tuning
Cache configuration
```