mirror of
https://github.com/AtomUI/AtomUI.git
synced 2026-10-22 09:23:53 +08:00
chinboy
233 lines
6.9 KiB
Markdown
233 lines
6.9 KiB
Markdown
# DropdownButton 自定义样式指南
|
||
|
||
DropdownButton 继承自 Button，其视觉表现通过 `ControlTheme` + Design Token 系统控制。以下介绍几种常见的自定义方式。
|
||
|
||
---
|
||
|
||
## 1. 使用属性直接控制
|
||
|
||
最简单的方式是通过 DropdownButton 的公共属性来控制外观和行为：
|
||
|
||
```xml
|
||
<!-- 自定义触发方式和弹出位置 -->
|
||
<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 的样式技巧均可使用：
|
||
|
||
```xml
|
||
<!-- 按钮类型 + 形状 + 尺寸 -->
|
||
<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 覆盖
|
||
|
||
### 全局统一设置
|
||
|
||
```xml
|
||
<Window.Styles>
|
||
<Style Selector="atom|DropdownButton">
|
||
<Setter Property="Margin" Value="5" />
|
||
<Setter Property="TriggerType" Value="Hover" />
|
||
</Style>
|
||
</Window.Styles>
|
||
```
|
||
|
||
### 调整悬浮延迟
|
||
|
||
```xml
|
||
<Window.Styles>
|
||
<Style Selector="atom|DropdownButton">
|
||
<Setter Property="MouseEnterDelay" Value="300" />
|
||
<Setter Property="MouseLeaveDelay" Value="200" />
|
||
</Style>
|
||
</Window.Styles>
|
||
```
|
||
|
||
### 按类型定制
|
||
|
||
```xml
|
||
<!-- 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>
|
||
```
|
||
|
||
### 使用伪类选择器
|
||
|
||
```xml
|
||
<!-- 加载中时调整不透明度 -->
|
||
<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`：
|
||
|
||
```xml
|
||
<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. 控制下拉指示器样式
|
||
|
||
可以通过模板选择器访问下拉指示器部件：
|
||
|
||
```xml
|
||
<!-- 调整下拉指示器的尺寸 -->
|
||
<Style Selector="atom|DropdownButton /template/ atom|IconPresenter#PART_DropdownIndicator">
|
||
<Setter Property="Width" Value="16" />
|
||
<Setter Property="Height" Value="16" />
|
||
</Style>
|
||
```
|
||
|
||
---
|
||
|
||
## 6. 控制动画行为
|
||
|
||
```xml
|
||
<!-- 禁用过渡动画 -->
|
||
<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` | 菜单打开时的大号下拉按钮 |
|
||
|