# Drawer 使用文档
本文档介绍 AtomUI Drawer 控件的各种使用方式，示例代码摘自 Gallery 演示程序。
> 📖 Gallery 源码位置：`controlgallery/AtomUIGallery/ShowCases/Views/Feedback/DrawerShowCase.axaml`
---
## 前置准备
在 AXAML 中使用 Drawer，需要引入以下命名空间：
```xml
xmlns:atom="https://atomui.net"
```
在 C# 代码中引入：
```csharp
using AtomUI.Desktop.Controls; // Drawer, DrawerPlacement
using AtomUI.Controls; // CustomizableSizeType
using AtomUI; // Dimension, DimensionUnitType
```
---
## 1. 基础抽屉
通过 `IsOpen` 属性控制抽屉的打开和关闭，通常使用数据绑定或控件属性绑定：
```xml
```
---
## 2. 自定义方向
通过 `Placement` 属性设置抽屉从哪个边缘滑入：
```xml
```
使用 OptionButtonGroup 动态切换方向：
```xml
Placement:
Left
Top
Right
Bottom
```
```csharp
private void HandlePlacementChanged(object? sender, OptionCheckedChangedEventArgs args)
{
var option = args.CheckedOption;
if (option.IsChecked == true && option.Tag is DrawerPlacement placement)
{
if (DataContext is MyViewModel vm)
{
vm.DrawerPlacement = placement;
}
}
}
```
---
## 3. 多级抽屉
在一个 Drawer 的内容中声明另一个 Drawer，打开子抽屉时父抽屉会自动推开：
```xml
Two-level drawer
```
```csharp
private void HandleOpenSecondLevel(object? sender, RoutedEventArgs e)
{
SecondLevelDrawer.IsOpen = true;
}
```
> **说明**：子 Drawer 会自动继承父 Drawer 的 `OpenOn` 和 `IsMotionEnabled` 属性。推移量由 `PushOffsetPercent`（默认 40%）控制。
---
## 4. 标题栏额外操作和底部区域
通过 `Extra` 和 `Footer` 属性设置额外内容：
```xml
Cancel
Ok
Edit
Upload
Delete
```
---
## 5. 无遮罩模式
通过 `IsShowMask="False"` 隐藏遮罩层，用户可以同时操作抽屉和主内容区域：
```xml
```
---
## 6. 预设尺寸和自定义尺寸
### 预设尺寸
通过 `SizeType` 属性选择预设尺寸：
```csharp
// 小号（默认 378px）
drawer.SizeType = CustomizableSizeType.Small;
// 大号（736px）
drawer.SizeType = CustomizableSizeType.Large;
```
### 自定义像素尺寸
```csharp
drawer.SizeType = CustomizableSizeType.Custom;
drawer.DialogSize = new Dimension(400); // 400px
drawer.IsOpen = true;
```
### 自定义百分比尺寸
```csharp
drawer.SizeType = CustomizableSizeType.Custom;
drawer.DialogSize = new Dimension(50, DimensionUnitType.Percentage); // 50%
drawer.IsOpen = true;
```
也可以在 AXAML 中使用百分比：
```xml
```
> 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/Feedback/DrawerShowCase.axaml` 中 "Preset size" 示例。
---
## 7. 作用域渲染
默认情况下抽屉在整个窗口区域渲染。通过 `OpenOn` 属性可以限制渲染范围：
```xml
Render in this
```
> **说明**：`OpenOn` 可以绑定到任何 `Control`，Drawer 将仅在该控件区域内渲染。
---
## 常见组合模式
### 列表详情模式
```xml
```
### 设置面板模式
```xml
Save
Theme
Light
Dark
```
### 表单编辑模式
```xml
Cancel
Save
```