# DropdownButton 使用文档
本文档介绍 AtomUI DropdownButton 控件的各种使用方式，示例代码摘自 Gallery 演示程序。
> 📖 Gallery 源码位置：`controlgallery/AtomUIGallery/ShowCases/Views/Navigation/DropdownButtonShowCase.axaml`
---
## 前置准备
在 AXAML 中使用 DropdownButton，需要引入以下命名空间：
```xml
xmlns:atom="https://atomui.net"
xmlns:antdicons="https://atomui.net/icons/antdesign"
```
在 C# 代码中引入：
```csharp
using AtomUI.Desktop.Controls; // DropdownButton 控件
using AtomUI.Controls; // SizeType 等共享类型
```
---
## 1. 基本用法
最基本的下拉菜单按钮，悬浮触发弹出菜单：
```xml
Hover me
```
**要点**：
- `DropdownFlyout` 属性接受 `MenuFlyout`，其中包含 `MenuItem` 菜单项
- `MenuItem` 支持 `Header`（文本）、`InputGesture`（快捷键提示）、`Icon`（图标）
- 支持嵌套子菜单（MenuItem 中嵌套 MenuItem）
---
## 2. 按钮类型
DropdownButton 继承 Button 的所有类型，通过 `ButtonType` 切换外观风格。点击触发弹出：
```xml
Edit File
Edit File
Edit File
Edit File
```
---
## 3. 带箭头指示
通过 `IsShowArrow="True"` 在弹出菜单上显示指向按钮的箭头。配合不同的 `Placement` 使用效果最佳：
```xml
BottomLeft
Bottom
TopLeft
```
可以使用 `IsPointAtCenter="True"` 让箭头指向按钮中心：
```xml
Centered Arrow
```
---
## 4. 弹出位置
支持 6 种弹出位置，通过 `Placement` 属性设置：
```xml
BottomLeft
Bottom
BottomRight
TopLeft
Top
TopRight
```
---
## 5. 菜单项点击事件
通过 `MenuItemClicked` 事件统一监听弹出菜单中所有菜单项的点击：
```xml
Actions
```
```csharp
private void HandleMenuItemClicked(object? sender, FlyoutMenuItemClickedEventArgs args)
{
var menuItem = args.Item;
// 获取被点击的菜单项，处理相应业务逻辑
var header = menuItem.Header?.ToString();
Debug.WriteLine($"Clicked: {header}");
}
```
---
## 6. 自定义下拉指示器
### 隐藏下拉指示器
```xml
No Arrow Icon
```
### 自定义指示器图标
```xml
Custom Icon
Ellipsis
```
---
## 7. 继承自 Button 的能力
DropdownButton 继承 Button 的全部属性，以下展示一些常用组合：
### 危险样式
```xml
Danger Actions
```
### 不同尺寸
```xml
Large
Default
Small
```
### 带图标
```xml
Settings
```
### 禁用状态
```xml
Disabled
```
---
## 常见组合模式
### 操作更多菜单
主操作使用独立按钮，更多操作使用 DropdownButton：
```xml
Submit
More
```
### 文件操作工具栏
```xml
File
Edit
```
### 悬浮触发 + 自定义延迟
```xml
Slow Hover
```