# SplitView 使用文档
本文档介绍 AtomUI SplitView 控件的各种使用方式。
> 📖 注意：当前 Gallery 演示程序中尚未包含 SplitView 的独立 ShowCase。以下示例基于控件源码和主题模板编写。
---
## 前置准备
在 AXAML 中使用 SplitView，需要引入以下命名空间：
```xml
xmlns:atom="https://atomui.net"
```
在 C# 代码中引入：
```csharp
using AtomUI.Desktop.Controls; // SplitView 控件
using Avalonia.Controls; // SplitViewDisplayMode, SplitViewPanePlacement 等枚举
```
---
## 1. 基础用法
最简单的 SplitView 用法——左侧面板 + 主内容区域：
```xml
```
---
## 2. 显示模式
### Overlay 模式
面板覆盖在主内容之上，不影响主内容布局。适用于窄屏或临时弹出的导航面板：
```xml
切换面板
```
### Inline 模式
面板与主内容并排，展开时主内容被压缩：
```xml
```
### CompactInline 模式
收起时保留紧凑条（通常只显示图标），展开时压缩主内容显示完整导航：
```xml
```
### CompactOverlay 模式
收起时保留紧凑条，展开时覆盖主内容：
```xml
```
---
## 3. 面板位置
### 右侧面板
```xml
```
### 顶部面板
```xml
```
### 底部面板
```xml
```
---
## 4. 展开/收起切换
### 通过按钮切换
```xml
切换侧边栏
```
```csharp
private void TogglePane(object? sender, RoutedEventArgs e)
{
MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}
```
### 通过 MVVM 数据绑定
```xml
Toggle Sidebar
```
```csharp
public class MainViewModel : ReactiveObject
{
private bool _isSidebarOpen = true;
public bool IsSidebarOpen
{
get => _isSidebarOpen;
set => this.RaiseAndSetIfChanged(ref _isSidebarOpen, value);
}
}
```
---
## 5. 轻量关闭遮罩
在 Overlay 模式下启用轻量关闭遮罩，点击遮罩自动关闭面板：
```xml
```
---
## 6. 自定义动画参数
### 自定义展开/收起时长
```xml
```
### 禁用动画
```xml
```
---
## 7. 响应面板关闭事件
```xml
```
```csharp
private void OnPaneClosing(object? sender, CancelRoutedEventArgs e)
{
// 可以条件性地阻止面板关闭
if (HasUnsavedChanges)
{
e.Cancel = true; // 取消关闭
}
}
private void OnPaneClosed(object? sender, RoutedEventArgs e)
{
// 面板已关闭后的清理逻辑
}
```
---
## 常见组合模式
### 应用主框架布局
```xml
```
### 右侧属性面板
```xml
```
### 底部信息面板（类似 IDE 输出面板）
```xml
```