OptionButtonGroup 自定义样式指南

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

1. 使用属性直接控制

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

<!-- 两种按钮样式 -->
<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 进行全局或局部样式覆盖：

全局统一间距

<Window.Styles>
    <Style Selector="atom|OptionButtonGroup">
        <Setter Property="Margin" Value="0,5" />
    </Style>
</Window.Styles>

按尺寸定制样式

<!-- 大号按钮使用粗体 -->
<Style Selector="atom|OptionButton[SizeType=Large]">
    <Setter Property="FontWeight" Value="SemiBold" />
</Style>

自定义选中态颜色

<!-- 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：

<ControlTheme x:Key="MyCustomOptionButton" TargetType="atom:OptionButton">
    <Setter Property="Template">
        <ControlTemplate>
            <!-- 自定义模板 -->
        </ControlTemplate>
    </Setter>
</ControlTheme>

⚠️ 注意：完全替换 ControlTheme 将丢失内置的波纹效果、自定义边框渲染等功能。建议优先使用 Style 覆盖。

4. 控制动画行为

<!-- 禁用过渡动画 -->
<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`	访问按钮模板内的图标展示器

5.5 KiB Raw Permalink Blame History Unescape Escape