mirror of
https://github.com/AtomUI/AtomUI.git
synced 2026-10-21 08:32:21 +08:00
chinboy
164 lines
5.5 KiB
Markdown
164 lines
5.5 KiB
Markdown
# OptionButtonGroup 自定义样式指南
|
||
|
||
OptionButtonGroup 的视觉表现通过 `ControlTheme` + Design Token 系统控制。以下介绍几种常见的自定义方式。
|
||
|
||
---
|
||
|
||
## 1. 使用属性直接控制
|
||
|
||
最简单的方式是通过 OptionButtonGroup 的公共属性来控制外观：
|
||
|
||
```xml
|
||
<!-- 两种按钮样式 -->
|
||
<atom:OptionButtonGroup ButtonStyle="Outline">
|
||
<atom:OptionButton IsChecked="True">Apple</atom:OptionButton>
|
||
<atom:OptionButton>Pear</atom:OptionButton>
|
||
<atom:OptionButton>Orange</atom:OptionButton>
|
||
</atom:OptionButtonGroup>
|
||
|
||
<atom:OptionButtonGroup ButtonStyle="Solid">
|
||
<atom:OptionButton IsChecked="True">Apple</atom:OptionButton>
|
||
<atom:OptionButton>Pear</atom:OptionButton>
|
||
<atom:OptionButton>Orange</atom:OptionButton>
|
||
</atom:OptionButtonGroup>
|
||
|
||
<!-- 三种尺寸 -->
|
||
<atom:OptionButtonGroup SizeType="Large">...</atom:OptionButtonGroup>
|
||
<atom:OptionButtonGroup SizeType="Middle">...</atom:OptionButtonGroup>
|
||
<atom:OptionButtonGroup SizeType="Small">...</atom:OptionButtonGroup>
|
||
|
||
<!-- 带图标 -->
|
||
<atom:OptionButtonGroup ButtonStyle="Solid">
|
||
<atom:OptionButton IsChecked="True"
|
||
Icon="{antdicons:AntDesignIconProvider Kind=AppleOutlined}">macOS</atom:OptionButton>
|
||
<atom:OptionButton
|
||
Icon="{antdicons:AntDesignIconProvider Kind=LinuxOutlined}">Linux</atom:OptionButton>
|
||
<atom:OptionButton
|
||
Icon="{antdicons:AntDesignIconProvider Kind=WindowsOutlined}">Windows</atom:OptionButton>
|
||
</atom:OptionButtonGroup>
|
||
|
||
<!-- 禁用单个选项 -->
|
||
<atom:OptionButtonGroup>
|
||
<atom:OptionButton IsChecked="True">Apple</atom:OptionButton>
|
||
<atom:OptionButton IsEnabled="False">Pear</atom:OptionButton>
|
||
<atom:OptionButton>Orange</atom:OptionButton>
|
||
</atom:OptionButtonGroup>
|
||
|
||
<!-- 禁用整个组 -->
|
||
<atom:OptionButtonGroup IsEnabled="False">...</atom:OptionButtonGroup>
|
||
```
|
||
|
||
> 📖 完整示例参考：`controlgallery/AtomUIGallery/ShowCases/Views/DataEntry/RadioButtonShowCase.axaml`
|
||
|
||
---
|
||
|
||
## 2. 通过 Style 覆盖样式
|
||
|
||
可以在 AXAML 中使用 `Style` 对 OptionButton 或 OptionButtonGroup 进行全局或局部样式覆盖：
|
||
|
||
### 全局统一间距
|
||
|
||
```xml
|
||
<Window.Styles>
|
||
<Style Selector="atom|OptionButtonGroup">
|
||
<Setter Property="Margin" Value="0,5" />
|
||
</Style>
|
||
</Window.Styles>
|
||
```
|
||
|
||
### 按尺寸定制样式
|
||
|
||
```xml
|
||
<!-- 大号按钮使用粗体 -->
|
||
<Style Selector="atom|OptionButton[SizeType=Large]">
|
||
<Setter Property="FontWeight" Value="SemiBold" />
|
||
</Style>
|
||
```
|
||
|
||
### 自定义选中态颜色
|
||
|
||
```xml
|
||
<!-- Solid 模式选中时使用自定义颜色 -->
|
||
<Style Selector="atom|OptionButton[ButtonStyle=Solid]:checked">
|
||
<Setter Property="Background" Value="#722ed1" />
|
||
</Style>
|
||
|
||
<!-- Outline 模式选中时使用自定义颜色 -->
|
||
<Style Selector="atom|OptionButton[ButtonStyle=Outline]:checked">
|
||
<Setter Property="Foreground" Value="#722ed1" />
|
||
<Setter Property="BorderBrush" Value="#722ed1" />
|
||
</Style>
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 通过 ControlTheme 完全替换主题
|
||
|
||
如果需要彻底替换模板和样式，可以定义自定义 `ControlTheme`：
|
||
|
||
```xml
|
||
<ControlTheme x:Key="MyCustomOptionButton" TargetType="atom:OptionButton">
|
||
<Setter Property="Template">
|
||
<ControlTemplate>
|
||
<!-- 自定义模板 -->
|
||
</ControlTemplate>
|
||
</Setter>
|
||
</ControlTheme>
|
||
```
|
||
|
||
> ⚠️ 注意：完全替换 ControlTheme 将丢失内置的波纹效果、自定义边框渲染等功能。建议优先使用 Style 覆盖。
|
||
|
||
---
|
||
|
||
## 4. 控制动画行为
|
||
|
||
```xml
|
||
<!-- 禁用过渡动画 -->
|
||
<atom:OptionButtonGroup IsMotionEnabled="False">...</atom:OptionButtonGroup>
|
||
|
||
<!-- 禁用点击波纹 -->
|
||
<atom:OptionButtonGroup IsWaveSpiritEnabled="False">...</atom:OptionButtonGroup>
|
||
```
|
||
|
||
---
|
||
|
||
## 样式选择器速查
|
||
|
||
> 说明：Avalonia 样式选择器中使用 `atom|OptionButton` / `atom|OptionButtonGroup` 语法引用控件类型。
|
||
|
||
### OptionButtonGroup 选择器
|
||
|
||
| 选择器 | 说明 |
|
||
|---|---|
|
||
| `atom\|OptionButtonGroup` | 匹配所有 OptionButtonGroup 实例 |
|
||
| `atom\|OptionButtonGroup[ButtonStyle=Solid]` | 匹配 Solid 样式的组 |
|
||
| `atom\|OptionButtonGroup[ButtonStyle=Outline]` | 匹配 Outline 样式的组 |
|
||
| `atom\|OptionButtonGroup[SizeType=Large]` | 匹配大号组 |
|
||
| `atom\|OptionButtonGroup[SizeType=Middle]` | 匹配中号组 |
|
||
| `atom\|OptionButtonGroup[SizeType=Small]` | 匹配小号组 |
|
||
| `atom\|OptionButtonGroup:disabled` | 匹配禁用态的组 |
|
||
|
||
### OptionButton 选择器
|
||
|
||
| 选择器 | 说明 |
|
||
|---|---|
|
||
| `atom\|OptionButton` | 匹配所有 OptionButton 实例 |
|
||
| `atom\|OptionButton:checked` | 匹配选中状态 |
|
||
| `atom\|OptionButton:unchecked` | 匹配未选中状态 |
|
||
| `atom\|OptionButton:pointerover` | 匹配鼠标悬浮状态 |
|
||
| `atom\|OptionButton:pressed` | 匹配按下状态 |
|
||
| `atom\|OptionButton:disabled` | 匹配禁用状态 |
|
||
| `atom\|OptionButton[ButtonStyle=Solid]` | 匹配 Solid 模式下的按钮 |
|
||
| `atom\|OptionButton[ButtonStyle=Outline]` | 匹配 Outline 模式下的按钮 |
|
||
|
||
### 组合选择器示例
|
||
|
||
| 选择器 | 说明 |
|
||
|---|---|
|
||
| `atom\|OptionButton[ButtonStyle=Solid]:checked:not(:disabled)` | Solid 模式下非禁用的选中按钮 |
|
||
| `atom\|OptionButton[ButtonStyle=Outline]:unchecked:pointerover` | Outline 模式下悬浮的未选中按钮 |
|
||
| `atom\|OptionButton:disabled:checked` | 禁用且选中的按钮 |
|
||
| `atom\|OptionButtonGroup /template/ Border#Frame` | 访问组模板内的外围边框 |
|
||
| `atom\|OptionButton /template/ atom\|WaveSpiritDecorator` | 访问按钮模板内的波纹装饰器 |
|
||
| `atom\|OptionButton /template/ atom\|IconPresenter#IconPresenter` | 访问按钮模板内的图标展示器 |
|