# SplitButton 使用文档
本文档介绍 AtomUI SplitButton 控件的各种使用方式，示例代码摘自 Gallery 演示程序。
> 📖 Gallery 源码位置：`controlgallery/AtomUIGallery/ShowCases/Views/General/SplitButtonShowCase.axaml`
---
## 前置准备
在 AXAML 中使用 SplitButton，需要引入以下命名空间：
```xml
xmlns:atom="https://atomui.net"
xmlns:antdicons="https://atomui.net/icons/antdesign"
```
在 C# 代码中引入：
```csharp
using AtomUI.Desktop.Controls; // SplitButton 控件
using AtomUI.Controls; // SizeType 等共享类型
```
---
## 1. 基本用法
最基本的组合按钮，左侧主按钮执行默认操作，右侧按钮触发下拉菜单：
```xml
Hover me
```
**要点**：
- `Flyout` 属性接受 `MenuFlyout`，其中包含 `MenuItem` 菜单项
- 左侧主按钮点击触发 `Click` 事件，右侧按钮触发 Flyout 弹出
- 默认下拉按钮图标为 `EllipsisOutlined`（省略号）
- 默认使用 `Default` 样式（白色背景 + 边框）
---
## 2. 按钮类型
SplitButton 支持两种按钮类型，通过 `IsPrimaryButtonType` 属性切换：
```xml
Default
Primary
```
**使用场景指引**：
- **Default**：常规场景，并列操作区域中使用
- **Primary**：需要强调主操作的场景，如「提交」+ 下拉更多提交选项
---
## 3. 按钮尺寸
通过 `SizeType` 属性设置尺寸，支持 `Large`、`Middle`（默认）、`Small` 三种：
```xml
Large
Middle
Small
Large
Middle
Small
```
> 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/General/SplitButtonShowCase.axaml` 中 "Size" 示例。
---
## 4. 危险按钮
通过 `IsDanger="True"` 标记危险操作，Default 和 Primary 类型均支持：
```xml
Default
Primary
```
**使用场景**：删除、移动、修改权限等不可逆操作。
> 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/General/SplitButtonShowCase.axaml` 中 "Danger Buttons" 示例。
---
## 5. 自定义下拉图标
通过 `OpenIndicator` 属性自定义右侧下拉按钮的图标（默认为 `EllipsisOutlined`）：
```xml
Default
Custom Icon
```
> 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/General/SplitButtonShowCase.axaml` 中 "Custom Icon" 示例。
---
## 6. 主按钮带图标
通过 `Icon` 属性为左侧主按钮添加图标：
```xml
Download
```
---
## 7. 触发方式
支持 `Click`（默认）和 `Hover` 两种触发方式：
```xml
Hover Me
Click Me
```
**触发方式说明**：
- **Click**：点击右侧下拉按钮弹出菜单（桌面端推荐，操作明确）
- **Hover**：鼠标悬浮在右侧按钮上时弹出菜单（适合预览场景，减少点击次数）
使用 `Hover` 模式时，可通过 `MouseEnterDelay` 和 `MouseLeaveDelay` 控制延迟：
```xml
Custom Delay
```
> 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/General/SplitButtonShowCase.axaml` 中 "Flyout trigger type" 示例。
---
## 8. 弹出位置和箭头
通过 `Placement` 控制弹出方向，`IsShowArrow` 控制箭头显示：
```xml
Bottom Right
Bottom Center with Arrow
Top
```
---
## 9. 主按钮点击事件与 Command
### 事件方式
```xml
Submit
```
```csharp
// Code-behind
private void HandleSplitButtonClick(object? sender, RoutedEventArgs e)
{
// 处理主按钮点击
Debug.WriteLine("SplitButton primary clicked!");
}
```
### Command 方式（MVVM）
```xml
Submit
```
```csharp
// ViewModel（使用 ReactiveUI）
[Reactive]
public ReactiveCommand SubmitCommand { get; }
public MyViewModel()
{
var canSubmit = this.WhenAnyValue(x => x.IsValid);
SubmitCommand = ReactiveCommand.CreateFromTask(
async (param) => { await _repository.SubmitAsync(param); },
canSubmit);
}
```
当 `CanExecute` 返回 `false` 时，SplitButton 会**自动禁用**（灰色调 + 不可点击），无需手动管理 `IsEnabled`。
---
## 10. 键盘快捷键
利用 `HotKey` 属性设置键盘快捷键：
```xml
Save (Ctrl+S)
```
**内置键盘交互**（无需配置）：
- `Space` / `Enter`：触发主按钮点击
- `Alt+Down` / `F4`：打开 Flyout
- `Escape`：关闭 Flyout
---
## 11. 禁用状态
通过 `IsEnabled="False"` 禁用 SplitButton，两个内部按钮同步禁用：
```xml
Default
Default (disabled)
Primary
Primary (disabled)
```
---
## 12. 控制动画行为
```xml
No Animation
No Wave
```
---
## 常见组合模式
### 主操作 + 更多操作
最常见的场景——主按钮执行默认操作，下拉菜单提供替代方案：
```xml
Submit
```
### 下载按钮 + 格式选择
```xml
Download
```
### 危险操作 + 确认选项
```xml
Delete
```
### 操作栏组合（SplitButton + Button）
```xml
Save
Cancel
```