AtomUI/docs/Desktop.Controls/Drawer/DrawerStyling.md

Drawer 自定义样式指南

Drawer 的视觉表现通过 ControlTheme + Design Token 系统控制。以下介绍几种常见的自定义方式。

---

1. 使用属性直接控制

最简单的方式是通过控件的公共属性来控制外观：

<!-- 基础抽屉 -->
<atom:Drawer Title="Basic Drawer">
    <TextBlock>Some contents...</TextBlock>
</atom:Drawer>

<!-- 自定义方向 -->
<atom:Drawer Placement="Left" Title="Left Drawer" />
<atom:Drawer Placement="Top" Title="Top Drawer" />
<atom:Drawer Placement="Bottom" Title="Bottom Drawer" />

<!-- 不同预设尺寸 -->
<atom:Drawer SizeType="Small" />   <!-- 378px -->
<atom:Drawer SizeType="Middle" />  <!-- 520px -->
<atom:Drawer SizeType="Large" />   <!-- 736px -->

<!-- 自定义尺寸（像素） -->
<atom:Drawer SizeType="Custom" DialogSize="400" />

<!-- 自定义尺寸（百分比） -->
<atom:Drawer SizeType="Custom" DialogSize="50%" />

<!-- 隐藏遮罩层 -->
<atom:Drawer IsShowMask="False" />

<!-- 隐藏关闭按钮 -->
<atom:Drawer IsShowCloseButton="False" />

<!-- 禁止点击遮罩关闭 -->
<atom:Drawer CloseWhenClickOnMask="False" />

📖 完整示例参考：controlgallery/AtomUIGallery/ShowCases/Views/Feedback/DrawerShowCase.axaml

---

2. 通过 Style 覆盖样式

可以在 AXAML 中使用 Style 对 Drawer 进行全局或局部样式覆盖：

全局设置方向

<Window.Styles>
    <Style Selector="atom|Drawer">
        <Setter Property="Placement" Value="Left" />
    </Style>
</Window.Styles>

按方向定制

<!-- 从底部滑入的抽屉增加额外间距 -->
<Style Selector="atom|Drawer[Placement=Bottom]">
    <Setter Property="Margin" Value="0,10" />
</Style>

---

3. 标题和额外操作区域

通过 Title、Extra 和 Footer 属性自定义标题栏和底部：

<atom:Drawer Title="Basic Drawer"
             Placement="{Binding DrawerPlacement}">
    <atom:Drawer.Extra>
        <StackPanel Orientation="Horizontal" Spacing="10">
            <atom:Button>Cancel</atom:Button>
            <atom:Button ButtonType="Primary">Ok</atom:Button>
        </StackPanel>
    </atom:Drawer.Extra>
    <atom:Drawer.Footer>
        <StackPanel Orientation="Horizontal" Spacing="10">
            <atom:Button>Edit</atom:Button>
            <atom:Button ButtonType="Primary">Upload</atom:Button>
            <atom:Button ButtonType="Primary" IsDanger="True">Delete</atom:Button>
        </StackPanel>
    </atom:Drawer.Footer>
    <StackPanel Orientation="Vertical" Spacing="5">
        <atom:TextBlock Text="Some contents..." />
        <atom:TextBlock Text="Some contents..." />
    </StackPanel>
</atom:Drawer>

📖 参考：controlgallery/AtomUIGallery/ShowCases/Views/Feedback/DrawerShowCase.axaml 中 "Extra and Footer" 示例。

---

4. 作用域渲染

默认情况下 Drawer 在整个窗口上渲染。使用 OpenOn 可以限制渲染范围：

<gallery:ShowCaseItem Height="300">
    <Panel>
        <StackPanel Orientation="Vertical" Spacing="10">
            <atom:TextBlock>Render in this</atom:TextBlock>
            <atom:ToggleSwitch />
        </StackPanel>
        <atom:Drawer
            IsOpen="{Binding $parent[Panel].((atom:ToggleSwitch)Children[1]).IsChecked}"
            Title="Basic Drawer"
            OpenOn="{Binding $parent[gallery:ShowCaseItem]}">
            <StackPanel Orientation="Vertical" Spacing="5">
                <atom:TextBlock Text="Some contents..." />
            </StackPanel>
        </atom:Drawer>
    </Panel>
</gallery:ShowCaseItem>

📖 参考：controlgallery/AtomUIGallery/ShowCases/Views/Feedback/DrawerShowCase.axaml 中 "Render in current area" 示例。

---

5. 控制动画行为

<!-- 禁用滑入/滑出动画 -->
<atom:Drawer IsMotionEnabled="False" Title="No Animation" />

---

样式选择器速查

说明：Avalonia 样式选择器中使用 atom|Drawer 语法引用 atom XML 命名空间下的 Drawer 类型，其中 | 是命名空间分隔符。由于 Drawer 的内容在 DrawerContainer / DrawerInfoContainer 中渲染，部分样式需要针对这些内部类型。

按控件类型选择

选择器	说明
atom|Drawer	匹配所有 Drawer 实例
atom|DrawerContainer	匹配抽屉容器（在 AdornerLayer 中渲染）
atom|DrawerInfoContainer	匹配抽屉信息容器（包含标题、内容、底部）

按属性选择

选择器	说明
atom|Drawer[Placement=Left]	匹配从左侧滑入的抽屉
atom|Drawer[Placement=Right]	匹配从右侧滑入的抽屉
atom|Drawer[Placement=Top]	匹配从顶部滑入的抽屉
atom|Drawer[Placement=Bottom]	匹配从底部滑入的抽屉
atom|Drawer[IsShowMask=False]	匹配无遮罩层的抽屉

按尺寸选择

选择器	说明
atom|Drawer[SizeType=Small]	匹配小号抽屉（378px）
atom|Drawer[SizeType=Middle]	匹配中号抽屉（520px）
atom|Drawer[SizeType=Large]	匹配大号抽屉（736px）
atom|Drawer[SizeType=Custom]	匹配自定义尺寸抽屉

模板内部元素选择

选择器	说明
atom|DrawerContainer /template/ atom|DrawerInfoContainer#PART_InfoContainer	抽屉信息容器
atom|DrawerInfoContainer /template/ atom|IconButton#PART_CloseButton	关闭按钮

组合选择器示例

选择器	说明
atom|Drawer[Placement=Right][SizeType=Large]	从右侧滑入的大号抽屉
atom|Drawer[IsShowMask=False][Placement=Left]	无遮罩从左侧滑入的抽屉