# GroupBox 使用文档 本文档介绍 AtomUI GroupBox 控件的各种使用方式,示例代码摘自 Gallery 演示程序。 > 📖 Gallery 源码位置:`controlgallery/AtomUIGallery/ShowCases/Views/DataDisplay/GroupBoxShowCase.axaml` --- ## 前置准备 在 AXAML 中使用 GroupBox,需要引入以下命名空间: ```xml xmlns:atom="https://atomui.net" xmlns:antdicons="https://atomui.net/icons/antdesign" ``` 在 C# 代码中引入: ```csharp using AtomUI.Desktop.Controls; // GroupBox 控件、GroupBoxTitlePosition 枚举 ``` --- ## 1. 基本用法 最基本的 GroupBox 用法——设置标题并放入内容: ```xml Content of group box ``` GroupBox 继承自 `ContentControl`,可以容纳任意单个子控件。通常放置一个布局面板(`StackPanel`、`Grid`、`DockPanel` 等)来组织多个子控件。 --- ## 2. 标题位置 通过 `HeaderTitlePosition` 属性控制标题在顶部边框上的水平位置,支持 `Left`(默认)、`Center`、`Right` 三种。 ```xml Content of group box Content of group box Content of group box ``` **使用场景指引**: - **Left**:最常见的位置,适用于大多数表单分组场景 - **Center**:适用于对称布局或需要强调分组标题的场景 - **Right**:适用于特殊的设计需求或 RTL(从右到左)布局 --- ## 3. 标题字体样式 GroupBox 提供 `HeaderFontStyle`、`HeaderFontWeight`、`HeaderTitleColor` 三个属性来精细控制标题的字体外观: ```xml Content of group box Content of group box Content of group box Content of group box ``` --- ## 4. 标题图标 通过 `HeaderIcon` 属性在标题文本左侧添加图标。图标使用 Ant Design 图标集提供: ```xml Content of group box ``` 图标可以与标题位置、字体样式自由组合: ```xml Option 1 Option 2 ``` --- ## 5. 嵌套内容 GroupBox 作为 `ContentControl`,可以容纳任意复杂的子控件树: ### 嵌套表单控件 ```xml 姓名: 邮箱: 备注: ``` ### 嵌套其他 GroupBox ```xml 分辨率:1920 × 1080 状态:已连接 ``` --- ## 6. C# 代码操作 ### 动态创建 GroupBox ```csharp using AtomUI.Desktop.Controls; using Avalonia.Controls; using Avalonia.Media; var groupBox = new GroupBox { HeaderTitle = "动态创建的分组", HeaderTitlePosition = GroupBoxTitlePosition.Center, HeaderFontWeight = FontWeight.Bold, Content = new TextBlock { Text = "这是动态创建的内容" } }; parentPanel.Children.Add(groupBox); ``` ### 动态修改属性 ```csharp // 修改标题位置 groupBox.HeaderTitlePosition = GroupBoxTitlePosition.Right; // 修改标题颜色 groupBox.HeaderTitleColor = new SolidColorBrush(Colors.Coral); // 修改标题文本 groupBox.HeaderTitle = "新标题"; // 修改字体样式 groupBox.HeaderFontStyle = FontStyle.Italic; groupBox.HeaderFontWeight = FontWeight.SemiBold; ``` ### 数据绑定 ```xml ``` --- ## 常见组合模式 ### 表单分组 ```xml ``` ### 配置面板 ```xml ``` ### 禁用状态 ```xml 这些设置当前不可修改 ```