# FloatButton 使用文档
本文档介绍 AtomUI FloatButton 控件的各种使用方式，示例代码摘自 Gallery 演示程序。
> 📖 Gallery 源码位置：`controlgallery/AtomUIGallery/ShowCases/Views/General/FloatButtonShowCase.axaml`
---
## 前置准备
```xml
xmlns:atom="https://atomui.net"
xmlns:antdicons="https://atomui.net/icons/antdesign"
```
```csharp
using AtomUI.Desktop.Controls;
```
---
## 1. 基本用法
最基本的悬浮按钮，放在 `ScrollViewer` 的 `Panel` 内：
```xml
```
**要点**：
- `FloatButtonHost` 自动将悬浮按钮放置在 OverlayLayer 上
- 默认图标为 `FileTextOutlined`
- 默认位置为右下角
---
## 2. 按钮类型
通过 `ButtonType` 切换 Default 和 Primary 样式：
```xml
```
---
## 3. 按钮形状
通过 `Shape` 切换圆形和方形：
```xml
```
---
## 4. 带 Tooltip
通过 `Tooltip` 属性设置鼠标悬浮提示，`TooltipColor` 可自定义颜色：
```xml
```
---
## 5. 带描述文本
`Shape="Square"` 时可以通过 `Description` 显示描述：
```xml
```
---
## 6. 按钮组
将多个 FloatButton 放在 `FloatButtonGroupHost` 中。子按钮的 `Shape` 和 `IsMotionEnabled` 会自动从 Group 继承：
```xml
```
---
## 7. 触发模式
通过 `Trigger` 属性控制展开方式：
```xml
```
**要点**：
- `Click` 模式下，点击外部区域自动收起
- `Hover` 模式下，鼠标离开自动收起
- `Default` 模式无触发按钮，所有子按钮始终可见
---
## 8. 展开方向
通过 `MenuPlacement` 控制子按钮展开方向：
```xml
```
**要点**：
- 展开使用 `MoveIn*` 系列动画，收起使用 `MoveOut*` 系列动画
- 方向与 `MenuPlacement` 对应：`Top` 使用 `MoveDownIn/Out`，`Bottom` 使用 `MoveUpIn/Out`
---
## 9. 徽标
通过 `IsBadgeEnabled`、`BadgeCount` 等属性显示徽标：
```xml
```
**要点**：
- `IsDotBadge="True"` 使用圆点徽标（`DotBadgeAdorner`），否则使用数字徽标（`CountBadgeAdorner`）
- `BadgeOverflowCount` 默认 99，超过时显示 `99+`
- `BadgeColor` 支持预设色名（如 `"blue"`、`"red"`）和自定义 hex 值
---
## 10. 返回顶部
```xml
Scroll to bottom
```
**要点**：
- 滚动超过 `VisibilityHeight`（默认 400px）时按钮显示
- 点击后平滑滚动到顶部，时长由 `ToTopDuration`（默认 450ms）控制
- 未指定 `Target` 时自动查找父级 `ScrollViewer`
- `BackTopFloatButton` 的默认图标为 `VerticalAlignTopOutlined`