简介

KryptonHeaderGroup 是带标题头的分组容器,顶部渲染一条主题化的标题栏(支持主标题、副标题、图标与 ButtonSpec 附加按钮),下方承载内容控件。它支持展开/折叠(Collapsed),并可将标题栏放置在上下左右四个方向,常用于可收起的属性区、高级选项面板等场景。

KryptonHeaderGroup 示例截图
KryptonHeaderGroup 带标题头的内容分组(含折叠状态)

常用属性

属性类型说明
Values.Headingstring标题栏主文字
Values.Descriptionstring标题栏副文字(显示在主文字旁/下方)
Values.ImageImage标题栏图标
HeaderPositionVisualOrientation标题栏位置(Top / Bottom / Left / Right)
Collapsedbool是否折叠内容区(仅显示标题栏)
ButtonSpecs集合标题栏上的附加按钮集合(如展开/折叠、关闭)
HeaderStyleHeaderStyle标题栏视觉风格(Primary / Secondary / Calendar / Form 等)
StateCommon.Header.Back.Color1Color标题栏背景色
StateCommon.Border.Color1Color容器边框颜色
PanelKryptonGroup内部内容面板(子控件实际承载处)
Controls集合子控件集合(通过 Panel 承载)

快速上手

基本用法

using Krypton.Toolkit;

// 创建带标题头的分组容器
var hgOptions = new KryptonHeaderGroup();
hgOptions.Values.Heading = "高级选项";
hgOptions.Values.Description = "展开后可编辑";
hgOptions.Values.Image = Properties.Resources.icon_settings;
hgOptions.Location = new Point(16, 16);
hgOptions.Size = new Size(360, 200);

// 向内容区添加控件
var chkAutoSave = new KryptonCheckBox();
chkAutoSave.Text = "自动保存";
chkAutoSave.Location = new Point(12, 12);
hgOptions.Controls.Add(chkAutoSave);

this.Controls.Add(hgOptions);

展开 / 折叠

// 折叠:内容区隐藏,只剩标题栏
hgOptions.Collapsed = true;

// 展开
hgOptions.Collapsed = false;

// 折叠状态变化事件
hgOptions.CollapsedChanged += (s, e) =>
    Console.WriteLine(hgOptions.Collapsed ? "已折叠" : "已展开");

进阶用法

标题栏添加展开/折叠按钮

// 用 ButtonSpec 在标题栏右侧放一个箭头按钮
var specToggle = new ButtonSpecHeaderGroup();
specToggle.Type = PaletteButtonSpecStyle.ArrowDown;
specToggle.Click += (s, e) =>
{
    hgOptions.Collapsed = !hgOptions.Collapsed;
    // 根据状态切换箭头方向
    specToggle.Type = hgOptions.Collapsed
        ? PaletteButtonSpecStyle.ArrowRight
        : PaletteButtonSpecStyle.ArrowDown;
};
hgOptions.ButtonSpecs.Add(specToggle);

标题栏放在底部或侧边

// 标题栏移到左侧(适合纵向工具区)
hgOptions.HeaderPosition = VisualOrientation.Left;

// 标题栏移到底部
hgOptions.HeaderPosition = VisualOrientation.Bottom;

// 使用一级标题风格(更醒目的渐变背景)
hgOptions.HeaderStyle = HeaderStyle.Primary;
提示:折叠时控件整体高度不会自动收缩,若需要折叠后窗体布局联动,请在 CollapsedChanged 事件中手动调整 Size 或使用布局容器。

对应示例项目

📁 Source/Krypton Toolkit Examples/KryptonHeaderGroup Examples/

包含:展开/折叠演示、四方向标题栏、ButtonSpec 附加按钮、各 HeaderStyle 对比。

相关控件