复选框控件CheckBoxEx

CheckBoxEx 是一个功能丰富的复选框控件,支持多种样式、自定义颜色、圆角设置等功能。适用于选项选择、状态切换等场景

CheckBoxEx 复选框控件

控件名称

CheckBoxEx

中文名称

复选框控件

控件优点

CheckBoxEx 是一个功能丰富的复选框控件,支持多种样式、自定义颜色、圆角设置等功能。适用于选项选择、状态切换等场景。

主要特性

  • 多种样式:支持默认、边框、卡片、按钮、标签五种样式
  • 自定义颜色:支持自定义各种状态下的颜色
  • 圆角设置:支持设置圆角半径
  • 文本对齐:支持多种文本对齐方式
  • 数据绑定:实现 INotifyPropertyChanged 接口

重要参数说明

基本属性

属性名 类型 默认值 说明
Checked bool false 是否选中
Indeterminate bool false 是否半选状态(不确定状态)
CheckBoxStyle CheckBoxStyle Default 复选框样式
Text string "CheckBox" 显示文本

半选状态(Indeterminate)

半选状态用于表示部分选中的情况,常见于全选/分组场景:

  • 视觉效果:复选框内显示横线而不是对勾
  • 使用场景:如 CheckBoxGroup 的全选功能,当部分选项被选中时显示半选状态
  • 互斥关系:Indeterminate 和 Checked 互斥,设置一个会自动取消另一个
// 设置半选状态
checkBox.Indeterminate = true;  // 此时 Checked 自动变为 false

// 设置选中状态
checkBox.Checked = true;  // 此时 Indeterminate 自动变为 false

复选框样式(CheckBoxStyle)

样式值 说明
Default 默认样式
Border 边框样式
Card 卡片样式
Button 按钮样式
Tag 标签样式

外观属性

属性名 类型 默认值 说明
BoxColor Color 26, 188, 156 复选框颜色
BorderWidth int 1 边框宽度
BorderColor Color 192, 192, 192 边框颜色
Radius int 4 圆角半径
CheckBoxSize int 16 复选框大小
CheckBoxTextMargin int 8 复选框与文本间距(仅控制复选框和文本之间的距离)
Padding Padding 8,8,8,8 控件内边距(控制复选框到控件边缘的距离)
TextAlign ContentAlignment MiddleLeft 文本对齐方式
IconSvg string? null SVG图标名称(显示在文本前,大小与字体等高,颜色与文本一致)。支持简写(如"home")或完整写法(如 "icon-home"

选中状态颜色

属性名 类型 默认值 说明
SelectedBorderColor Color 26, 188, 156 选中边框颜色
SelectedBoxColor Color 26, 188, 156 选中复选框颜色
SelectedFillColor Color 240, 249, 255 选中填充颜色
SelectedForeColor Color 26, 188, 156 选中文本颜色

填充属性

属性名 类型 默认值 说明
EnabledFill bool true 是否启用填充
FillColor Color White 填充颜色

重要事件

事件名 说明
CheckedChanged 选中状态改变时触发
PropertyChanged 属性值改变时触发

使用示例

基本使用

// 创建复选框
CheckBoxEx checkBox = new CheckBoxEx();
checkBox.Text = "同意协议";
checkBox.Size = new Size(120, 24);
this.Controls.Add(checkBox);

// 选中状态改变事件
checkBox.CheckedChanged += (sender, e) =>
{
    Console.WriteLine($"选中状态:{checkBox.Checked}");
};

不同样式

// 默认样式
checkBox1.CheckBoxStyle = CheckBoxStyle.Default;

// 边框样式
checkBox2.CheckBoxStyle = CheckBoxStyle.Border;

// 卡片样式
checkBox3.CheckBoxStyle = CheckBoxStyle.Card;

// 按钮样式
checkBox4.CheckBoxStyle = CheckBoxStyle.Button;

// 标签样式
checkBox5.CheckBoxStyle = CheckBoxStyle.Tag;

颜色自定义

// 设置颜色
checkBox.BoxColor = Color.Blue;
checkBox.BorderColor = Color.Gray;
checkBox.SelectedBorderColor = Color.Blue;
checkBox.SelectedBoxColor = Color.Blue;
checkBox.SelectedFillColor = Color.LightBlue;
checkBox.SelectedForeColor = Color.Blue;

圆角设置

// 设置圆角
checkBox.Radius = 8;

// 直角
checkBox.Radius = 0;

文本对齐

// 文本左对齐(默认)
checkBox.TextAlign = ContentAlignment.MiddleLeft;

// 文本居中
checkBox.TextAlign = ContentAlignment.MiddleCenter;

// 文本右对齐
checkBox.TextAlign = ContentAlignment.MiddleRight;

数据绑定

// 属性改变事件
checkBox.PropertyChanged += (sender, e) =>
{
    if (e.PropertyName == nameof(CheckBoxEx.Checked))
    {
        Console.WriteLine($"选中状态已更改:{checkBox.Checked}");
    }
};

// 绑定到数据源
checkBox.DataBindings.Add("Checked", dataSource, "IsAgreed");

带图标

// 设置SVG图标(显示在文本前)
checkBox.IconSvg = "icon-home";
checkBox.Text = "首页";

// 图标大小与字体高度一致
// 图标颜色与文本颜色一致

鼠标悬停效果

CheckBoxEx 支持鼠标悬停效果,不同样式的悬停表现:

  • Default 样式:悬停时显示淡色背景
  • Border 样式:悬停时背景略微变亮
  • Card 样式:悬停时显示边框和淡色背景
  • Button 样式:悬停时显示淡色背景
  • Tag 样式:悬停时显示淡色背景
// 获取悬停状态
bool isHovered = checkBox.IsHovered;

// 悬停事件(通过 MouseEnter/MouseLeave)
checkBox.MouseEnter += (s, e) => Console.WriteLine("鼠标进入");
checkBox.MouseLeave += (s, e) => Console.WriteLine("鼠标离开");

注意事项

  1. 样式选择:不同样式适用于不同场景,可根据需求选择
  2. 颜色设置:选中状态的颜色需要单独设置
  3. 圆角半径:Radius 为 0 时为直角
  4. 点击切换:点击控件任意位置都会切换选中状态
  5. 图标显示:IconSvg 设置的图标会显示在文本前面,大小与字体高度一致
  6. 间距控制
    • CheckBoxTextMargin:控制复选框与文本之间的距离(默认8)
    • Padding:控制复选框到控件边缘的距离(默认8,8,8,8)
  7. 重置默认值:Padding 属性支持在设计器中右键重置为默认值
  8. 禁用状态:Enabled 为 false 时复选框不可点击,鼠标悬停显示禁用样式(Cursor.No)