AtomUI/docs/Desktop.Controls/DropdownButton/DropdownButtonStyling.md

DropdownButton 自定义样式指南

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

---

1. 使用属性直接控制

最简单的方式是通过 DropdownButton 的公共属性来控制外观和行为：

<!-- 自定义触发方式和弹出位置 -->
<atom:DropdownButton TriggerType="Hover"
                     Placement="Bottom"
                     IsShowArrow="True"
                     IsPointAtCenter="True">
    Options
    <!-- ... DropdownFlyout ... -->
</atom:DropdownButton>

<!-- 隐藏下拉指示器 -->
<atom:DropdownButton IsShowOpenIndicator="False">
    No Arrow
    <!-- ... DropdownFlyout ... -->
</atom:DropdownButton>

<!-- 自定义下拉指示器图标 -->
<atom:DropdownButton OpenIndicator="{antdicons:AntDesignIconProvider Kind=MoreOutlined}">
    Custom Icon
    <!-- ... DropdownFlyout ... -->
</atom:DropdownButton>

---

2. 通过继承 Button 的样式能力

DropdownButton 继承自 Button，所有 Button 的样式技巧均可使用：

<!-- 按钮类型 + 形状 + 尺寸 -->
<atom:DropdownButton ButtonType="Primary" Shape="Round" SizeType="Large">
    Actions
    <!-- ... DropdownFlyout ... -->
</atom:DropdownButton>

<!-- 危险样式 -->
<atom:DropdownButton ButtonType="Primary" IsDanger="True">
    Danger Actions
    <!-- ... DropdownFlyout ... -->
</atom:DropdownButton>

<!-- 幽灵样式（适合有色背景） -->
<Border Background="rgb(190, 200, 200)" Padding="10">
    <atom:DropdownButton ButtonType="Primary" IsGhost="True">
        Ghost Dropdown
        <!-- ... DropdownFlyout ... -->
    </atom:DropdownButton>
</Border>

---

3. 通过 Style 覆盖

全局统一设置

<Window.Styles>
    <Style Selector="atom|DropdownButton">
        <Setter Property="Margin" Value="5" />
        <Setter Property="TriggerType" Value="Hover" />
    </Style>
</Window.Styles>

调整悬浮延迟

<Window.Styles>
    <Style Selector="atom|DropdownButton">
        <Setter Property="MouseEnterDelay" Value="300" />
        <Setter Property="MouseLeaveDelay" Value="200" />
    </Style>
</Window.Styles>

按类型定制

<!-- Primary 类型的 DropdownButton 使用自定义背景色 -->
<Style Selector="atom|DropdownButton[ButtonType=Primary]:not(:disabled)">
    <Setter Property="Background" Value="#722ed1" />
</Style>
<Style Selector="atom|DropdownButton[ButtonType=Primary]:not(:disabled):pointerover">
    <Setter Property="Background" Value="#9254de" />
</Style>

使用伪类选择器

<!-- 加载中时调整不透明度 -->
<Style Selector="atom|DropdownButton:loading">
    <Setter Property="Opacity" Value="0.65" />
</Style>

<!-- 危险按钮加粗字体 -->
<Style Selector="atom|DropdownButton:danger:not(:disabled)">
    <Setter Property="FontWeight" Value="Bold" />
</Style>

---

4. 通过 ControlTheme 完全替换主题

如果需要彻底替换 DropdownButton 的模板和样式，可以定义自定义 ControlTheme：

<ControlTheme x:Key="MyCustomDropdown" TargetType="atom:DropdownButton">
    <Setter Property="Template">
        <ControlTemplate>
            <Border Background="{TemplateBinding Background}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    Padding="{TemplateBinding Padding}">
                <DockPanel>
                    <atom:IconPresenter DockPanel.Dock="Right"
                                        Icon="{TemplateBinding OpenIndicator}"
                                        IsVisible="{TemplateBinding IsShowOpenIndicator}" />
                    <ContentPresenter Content="{TemplateBinding Content}"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center" />
                </DockPanel>
            </Border>
        </ControlTemplate>
    </Setter>
</ControlTheme>

<!-- 使用 -->
<atom:DropdownButton Theme="{StaticResource MyCustomDropdown}">
    Custom Dropdown
</atom:DropdownButton>

⚠️ 注意：完全替换 ControlTheme 将丢失内置的波纹效果、加载图标等功能。建议优先使用 Style 覆盖。

---

5. 控制下拉指示器样式

可以通过模板选择器访问下拉指示器部件：

<!-- 调整下拉指示器的尺寸 -->
<Style Selector="atom|DropdownButton /template/ atom|IconPresenter#PART_DropdownIndicator">
    <Setter Property="Width" Value="16" />
    <Setter Property="Height" Value="16" />
</Style>

---

6. 控制动画行为

<!-- 禁用过渡动画 -->
<atom:DropdownButton ButtonType="Primary" IsMotionEnabled="False">
    No Animation
    <!-- ... DropdownFlyout ... -->
</atom:DropdownButton>

<!-- 禁用点击波纹 -->
<atom:DropdownButton ButtonType="Primary" IsWaveSpiritEnabled="False">
    No Wave
    <!-- ... DropdownFlyout ... -->
</atom:DropdownButton>

📖 Gallery 示例参考：controlgallery/AtomUIGallery/ShowCases/Views/Navigation/DropdownButtonShowCase.axaml

---

样式选择器速查

说明：Avalonia 样式选择器中使用 atom|DropdownButton 语法引用 atom XML 命名空间下的 DropdownButton 类型，其中 | 是命名空间分隔符。

按类型选择

选择器	说明
atom|DropdownButton	匹配所有 DropdownButton 实例
atom|DropdownButton[ButtonType=Primary]	匹配主按钮类型的下拉按钮
atom|DropdownButton[ButtonType=Default]	匹配默认按钮类型的下拉按钮
atom|DropdownButton[ButtonType=Text]	匹配文本按钮类型的下拉按钮
atom|DropdownButton[ButtonType=Link]	匹配链接按钮类型的下拉按钮

按尺寸选择

选择器	说明
atom|DropdownButton[SizeType=Large]	匹配大号下拉按钮
atom|DropdownButton[SizeType=Middle]	匹配中号下拉按钮（默认）
atom|DropdownButton[SizeType=Small]	匹配小号下拉按钮

按伪类选择

选择器	说明
atom|DropdownButton:pointerover	鼠标悬浮
atom|DropdownButton:pressed	按下状态
atom|DropdownButton:disabled	禁用状态
atom|DropdownButton:flyout-open	下拉菜单打开时
atom|DropdownButton:loading	加载中状态
atom|DropdownButton:danger	危险样式

模板部件选择

选择器	说明
atom|DropdownButton /template/ atom|IconPresenter#PART_DropdownIndicator	下拉指示器图标
atom|DropdownButton /template/ Border#Frame	主框架边框
atom|DropdownButton /template/ ContentPresenter#PART_ContentPresenter	内容展示器

组合选择器示例

选择器	说明
atom|DropdownButton[ButtonType=Primary]:not(:disabled)	非禁用的主按钮下拉
atom|DropdownButton:danger:pointerover	悬浮状态的危险下拉按钮
atom|DropdownButton[SizeType=Large]:flyout-open	菜单打开时的大号下拉按钮