# OptionButtonGroup 使用文档本文档介绍 AtomUI OptionButtonGroup 控件的各种使用方式，示例代码摘自 Gallery 演示程序。 > 📖 Gallery 源码位置：`controlgallery/AtomUIGallery/ShowCases/Views/DataEntry/RadioButtonShowCase.axaml` --- ## 前置准备在 AXAML 中使用 OptionButtonGroup，需要引入以下命名空间： ```xml xmlns:atom="https://atomui.net" xmlns:antdicons="https://atomui.net/icons/antdesign" ``` 在 C# 代码中引入： ```csharp using AtomUI.Desktop.Controls; // OptionButton, OptionButtonGroup using AtomUI.Controls; // SizeType, OptionButtonStyle 等共享类型 ``` --- ## 1. 基本用法（Outline 样式）默认 Outline 样式的选项按钮组，选中项以边框颜色和文字颜色区分： ```xml Hangzhou Shanghai Beijing Chengdu ``` 通过 `IsChecked="True"` 设置默认选中项。 --- ## 2. Solid 样式通过 `ButtonStyle="Solid"` 启用实色填充样式，选中项使用主色背景 + 白色文字： ```xml Hangzhou Shanghai Beijing Chengdu ``` **使用场景指引**： - **Outline**：适合常规选项切换场景，视觉权重较低 - **Solid**：适合需要强调选中状态的场景（如工具栏模式切换） --- ## 3. 三种尺寸通过 `SizeType` 属性设置尺寸，支持 `Large`、`Middle`（默认）、`Small` 三种： ```xml Hangzhou Shanghai Beijing Chengdu Hangzhou Shanghai Beijing Chengdu Hangzhou Shanghai Beijing Chengdu ``` --- ## 4. 带图标的选项按钮通过 `Icon` 属性为按钮添加图标，支持图标 + 文字组合： ```xml macOS Linux Windows macOS Linux Windows ``` 图标与文本之间的间距由 `SharedToken.SpacingXXS` 控制。 --- ## 5. 不同尺寸的图标按钮 ```xml macOS Linux Windows macOS Linux Windows macOS Linux Windows ``` --- ## 6. 禁用状态 ### 禁用单个选项 ```xml Apple Pear Orange ``` 禁用的选项显示为灰色调，不可点击。已选中的选项也可以被禁用。 ### 禁用整个组 ```xml macOS Linux Windows macOS Linux Windows ``` ### 选中项被禁用 ```xml Hangzhou Shanghai Beijing Chengdu ``` --- ## 7. 选中变更事件通过 `OptionCheckedChanged` 事件监听选中项变更： ```xml Default Large Small ``` ```csharp private void HandleSizeTypeChanged(object? sender, OptionCheckedChangedEventArgs e) { // e.CheckedOption — 新选中的按钮实例 // e.Index — 新选中项的索引 var selectedText = e.CheckedOption.Content?.ToString(); // 根据选中项执行相应逻辑... } ``` > 📖 参考：`controlgallery/AtomUIGallery/ShowCases/Views/Feedback/SkeletonShowCase.axaml` 中使用 OptionButtonGroup 切换 Skeleton 尺寸。 --- ## 8. 数据驱动模式通过 `ItemsSource` 绑定数据集合自动生成按钮： ```csharp // ViewModel 或 Code-behind var items = new List { new() { Header = "Apple", Icon = new AppleOutlined() }, new() { Header = "Linux", Icon = new LinuxOutlined() }, new() { Header = "Windows", Icon = new WindowsOutlined(), IsEnabled = false } }; optionButtonGroup.ItemsSource = items; ``` ```xml ``` --- ## 常见组合模式 ### 作为视图模式切换器 ```xml ``` ### 作为 Skeleton 尺寸切换器 ```xml Default Large Small ``` ### 作为折叠面板展开按钮位置切换器 ```xml Start End ``` ### 与表单集成 ```xml China USA EU ``` ### MVVM 绑定选中项 ```xml China USA EU ``` ```csharp // ViewModel [Reactive] public object? SelectedRegion { get; set; } ```