# Button 使用文档
本文档介绍 AtomUI Button 控件的各种使用方式，示例代码摘自 Gallery 演示程序。
> 📖 Gallery 源码位置：`controlgallery/AtomUIGallery/ShowCases/Views/General/ButtonShowCase.axaml`
---
## 前置准备
在 AXAML 中使用 Button，需要引入以下命名空间：
```xml
xmlns:atom="https://atomui.net"
xmlns:antdicons="https://atomui.net/icons/antdesign"
```
在 C# 代码中引入：
```csharp
using AtomUI.Desktop.Controls; // Button 控件
using AtomUI.Controls; // SizeType 等共享类型
```
---
## 1. 按钮类型
AtomUI 提供五种按钮类型，通过 `ButtonType` 属性设置。不设置时默认为 `Default`。
```xml
Primary Button
Default Button
Dashed
Text Button
Link Button
```
**使用场景指引**：
- 一个操作区域只放一个 **Primary** 按钮，引导用户注意力
- 多个并列操作使用 **Default** 按钮
- 添加类操作使用 **Dashed** 按钮
- 内联次级操作使用 **Text** 按钮
- 导航跳转使用 **Link** 按钮
---
## 2. 按钮形状
通过 `Shape` 属性设置按钮形状，支持默认矩形、圆形和胶囊形。
```xml
Primary
Default
Primary
Default
AA
AA
```
**提示**：圆形按钮会强制 `宽度 = 高度`，最适合只放一个图标的场景。
---
## 3. 按钮尺寸
通过 `SizeType` 属性设置尺寸，支持 `Large`、`Middle`（默认）、`Small` 三种。
```xml
Large
Default
Small
```
尺寸也支持数据绑定，可在运行时动态切换：
```xml
Primary
Dashed
Default
Link
```
```csharp
// ViewModel
public class ButtonViewModel : ReactiveObject
{
private SizeType _buttonSizeType;
public SizeType ButtonSizeType
{
get => _buttonSizeType;
set => this.RaiseAndSetIfChanged(ref _buttonSizeType, value);
}
}
```
尺寸与形状和图标组合使用：
```xml
Download
```
---
## 4. 图标按钮
通过 `Icon` 属性设置按钮图标，图标使用 Ant Design 图标集提供：
```xml
Search
Search
Search
Search
```
**图标 + 危险样式组合**：
```xml
Search
Search
```
---
## 5. 加载中状态
通过设置 `IsLoading` 属性控制按钮加载状态。加载中时按钮显示旋转图标，不透明度降低。
### 静态加载状态
```xml
Loading
Loading
```
### 点击后动态进入加载态
这是最常见的使用场景——点击按钮发起异步请求，完成后恢复：
```xml
Click me!
Click me!
```
```csharp
// Code-behind
public void HandleLoadingBtnClick(object? sender, RoutedEventArgs args)
{
if (sender is Button button)
{
button.IsLoading = true;
Dispatcher.UIThread.InvokeAsync(async () =>
{
await Task.Delay(TimeSpan.FromSeconds(3)); // 模拟异步操作
button.IsLoading = false;
});
}
}
```
---
## 6. 危险按钮
通过 `IsDanger="True"` 标记危险操作，所有按钮类型均支持：
```xml
Primary
Default
Dashed
Text
Link
```
**使用场景**：删除、移动、修改权限等不可逆操作，通常需配合二次确认弹窗。
---
## 7. 幽灵按钮
通过 `IsGhost="True"` 使按钮背景透明，适合放置在有色背景上：
```xml
Primary
Default
Dashed
Text
Link
Danger
Primary
Default
Danger
```
---
## 8. Block 按钮
Ant Design 的 `block` 属性在 AtomUI 中通过 Avalonia 原生布局属性 `HorizontalAlignment="Stretch"` 实现，使按钮撑满父容器宽度：
```xml
Primary
Default
Dashed
Text
Link
```
---
## 9. 禁用状态
通过 `IsEnabled="False"` 禁用按钮，所有类型均支持：
```xml
Primary
Primary(disabled)
Default
Default(disabled)
Danger Primary
Danger Primary(disabled)
Ghost
Ghost(disabled)
```
---
## 10. MVVM 命令绑定
Button 继承自 Avalonia 的 `Button`，完整支持 `Command` / `CommandParameter` 绑定模式：
```xml
Save
Delete
```
```csharp
// ViewModel（使用 ReactiveUI）
[Reactive]
public ReactiveCommand SaveCommand { get; }
public MyViewModel()
{
var canSave = this.WhenAnyValue(x => x.IsValid);
SaveCommand = ReactiveCommand.CreateFromTask(
async () => { await _repository.SaveAsync(); },
canSave);
}
```
当 `CanExecute` 返回 `false` 时，按钮会**自动禁用**（灰色调 + 不可点击），无需手动管理 `IsEnabled`。
---
## 11. 键盘快捷键
利用继承自 Avalonia Button 的 `HotKey`、`IsDefault`、`IsCancel` 属性：
```xml
OK
Cancel
Save (Ctrl+S)
```
---
## 12. 控制动画行为
```xml
No Animation
No Wave
```
---
## 常见组合模式
### 操作栏（主 + 次按钮）
```xml
Submit
Cancel
```
### 确认/取消对话框
```xml
Cancel
OK
```
### 危险操作确认
```xml
Cancel
Delete
```
### 工具栏（纯图标按钮组）
```xml
```