【WinForm UI控件系列】投票控件VoteControl ，比较文本标签，双文本标签

久爱物联网2026-06-20 12:16
  • VoteControl 是一个美观的投票控件，采用现代化设计风格，支持两个选项的 PK 投票场景。
  • SideBySideLabel 是一个并排标签控件，支持左右两部分对比显示，带斜切口横向柱状图。适用于数据对比、统计展示等场景。
  • LabeledValue 是一个标签值控件，支持主标题和副标题显示、预置颜色样式和圆角边框。适用于标签展示、状态显示等场景。

一、示例

二、说明

2.1 VoteControl 投票控件

控件名称

VoteControl

中文名称

投票控件

控件优点

VoteControl 是一个美观的投票控件，采用现代化设计风格，支持两个选项的 PK 投票场景。

主要特性

  • 现代化设计：红色和蓝色按钮配合斜切间隙，中间带有 PK 标识
  • 防重复投票：已投票后自动锁定，防止重复投票（可通过属性关闭）
  • 重复投票支持 ：设置 AllowReVote = true 可允许用户多次投票
  • 实时反馈：悬停效果、选中状态、投票次数显示
  • 精确点击区域：仅在按钮区域内响应点击，标题和描述区不触发
  • 完整功能：支持投票标题、描述（支持换行）、选项文本、投票统计
  • 事件驱动：投票完成后触发 VoteClick 事件，包含最新计数值

重要参数说明

公共属性

属性名 类型 默认值 说明
Title string "投票标题" 投票标题
Description string "投票描述" 投票描述（底部显示，支持 \n 换行）
OptionAText string "选项A" 左侧红色按钮文本
OptionBText string "选项B" 右侧蓝色按钮文本
OptionACount int 0 选项A投票次数
OptionBCount int 0 选项B投票次数
HasVoted bool false 是否已投票（防止重复）
UserVote VoteResult? null 用户投票结果
AllowReVote bool false 是否允许重复投票

枚举

csharp 复制代码 
public enum VoteResult
{
    OptionA,  // 投票给选项A（左侧红色）
    OptionB   // 投票给选项B（右侧蓝色）
}

事件

事件名 说明
VoteClick 默认事件 ，点击按钮时触发，参数为 VoteClickEventArgs
Voted 成功投票后触发，参数为 VoteResult

VoteClickEventArgs 参数

属性名 类型 说明
VoteResult VoteResult 用户点击的选项
CanVote bool 当前是否可以投票（考虑 AllowReVote）
CurrentOptionACount int 投票后选项A的最新计数值
CurrentOptionBCount int 投票后选项B的最新计数值

使用示例

基本用法

csharp 复制代码 
var voteControl = new VoteControl
{
    Title = "螺丝选国标还是国际标准？",
    Description = "投票规则：\n每人每天仅限投票一次",
    OptionAText = "选国标",
    OptionBText = "选国际",
    Location = new Point(50, 50),
    Size = new Size(400, 180)
};

// 订阅投票事件（双击控件自动生成）
voteControl.VoteClick += (sender, e) =>
{
    if (e.VoteResult == VoteControl.VoteResult.OptionA)
        MessageBox.Show($"您选择了国标！当前 {e.CurrentOptionACount} 票");
    else
        MessageBox.Show($"您选择了国际标准！当前 {e.CurrentOptionBCount} 票");
};

this.Controls.Add(voteControl);

允许重复投票

csharp 复制代码 
var voteControl = new VoteControl
{
    Title = "实时人气投票",
    OptionAText = "AntdUI",
    OptionBText = "SunnyUI",
    AllowReVote = true  // 允许重复投票
};

voteControl.VoteClick += (sender, e) =>
{
    // 每次点击都计数+1
    labelResult.Text = $"AntdUI: {e.CurrentOptionACount} 票 vs SunnyUI: {e.CurrentOptionBCount} 票";
};

加载已有投票数据

csharp 复制代码 
var voteControl = new VoteControl
{
    Title = "最喜欢的编程语言",
    OptionAText = "C#",
    OptionBText = "Python",
    OptionACount = 156,
    OptionBCount = 142,
    HasVoted = true,
    UserVote = VoteControl.VoteResult.OptionA
};

重置投票状态

csharp 复制代码 
// 允许用户重新投票（清除已投票状态，但不重置计数）
voteControl.ResetVote();

手动投票

csharp 复制代码 
// 编程方式进行投票
voteControl.Vote(VoteControl.VoteResult.OptionB);

外观说明

按钮样式

状态 说明
默认 红色（左侧）/ 蓝色（右侧）按钮，直角梯形设计
悬停 按钮颜色变亮，鼠标变为手型（仅未投票时）
选中 投票后显示白色边框标记

按钮形状

  • 左侧红色按钮：倒直角梯形，左边垂直，右边斜切，四角圆角
  • 右侧蓝色按钮：正直角梯形，右边垂直，左边斜切，四角圆角
  • 间隙：两个按钮之间留有间隙，中间放置 PK 图标

PK 图标

  • 白色圆形背景，大小为按钮高度的 2/3
  • P 字母：红色，向右倾斜（与按钮斜切角度一致）
  • K 字母：蓝色，向左倾斜（与按钮斜切角度一致）
  • 采用斜体字体，两字母紧凑排列

鼠标光标

区域 光标样式
按钮区域 手型（Hand）
标题/描述/空白区域 默认箭头（Default）

注意事项

  1. 防重复投票 ：默认 HasVoted = true 后点击按钮不会触发投票；设置 AllowReVote = true 可解除限制
  2. 投票次数 ：OptionACount 和 OptionBCount 会在投票时自动增加，也可手动设置
  3. 事件时序 ：VoteClick 事件在投票完成后触发，CurrentOptionACount 和 CurrentOptionBCount 包含本次投票结果
  4. 描述换行 ：支持使用 \n 或 \r\n 进行换行显示
  5. 尺寸建议：建议宽度至少 200px，高度至少 120px，推荐尺寸 400x180
  6. 字体支持：使用 Microsoft YaHei 字体，确保中文显示美观

API 参考

方法

方法名 参数 返回值 说明
Vote(VoteResult) VoteResult result void 执行投票（自动增加计数）
ResetVote() 无 void 重置投票状态（清除 HasVoted，保留计数）

属性

属性名 类型 说明
Title string 投票标题
Description string 投票描述（支持换行）
OptionAText string 选项A文本
OptionBText string 选项B文本
OptionACount int 选项A投票次数
OptionBCount int 选项B投票次数
HasVoted bool 是否已投票
UserVote VoteResult? 用户投票结果
AllowReVote bool 是否允许重复投票

2.2 SideBySideLabel 并排标签控件

控件名称

SideBySideLabel

中文名称

并排标签控件

控件优点

SideBySideLabel 是一个并排标签控件，支持左右两部分对比显示，带斜切口横向柱状图。适用于数据对比、统计展示等场景。

主要特性

  • 左右对比：支持左右两部分数据对比显示
  • 斜切柱状图：带斜切口的横向柱状图
  • 数值显示：支持数值和单位显示
  • 颜色自定义：支持左右柱状图颜色自定义
  • 圆角边框：支持圆角半径设置

重要参数说明

左侧标签属性

属性名 类型 默认值 说明
LeftLabel string "左侧标签" 左侧标签文本
LeftValue double 0 左侧数值
LeftValueUnit string "" 左侧数值单位
LeftBarColor Color 24, 144, 255 左侧柱状图颜色

右侧标签属性

属性名 类型 默认值 说明
RightLabel string "右侧标签" 右侧标签文本
RightValue double 0 右侧数值
RightValueUnit string "" 右侧数值单位
RightBarColor Color 255, 77, 79 右侧柱状图颜色

字体属性

属性名 类型 默认值 说明
LabelFont Font Microsoft YaHei 10pt 标签字体
ValueFont Font Microsoft YaHei 12pt Bold 数值字体
LabelColor Color Gray 标签颜色

外观属性

属性名 类型 默认值 说明
BarHeight int 30 柱状图高度
BarGap int 6 斜切口间隙
SlantAngle int 60 斜切角度
CornerRadius int 6 圆角半径
TextBarGap int 8 柱状图与文本间距
Padding Padding 2, 4, 2, 4 内边距

使用示例

基本使用

csharp 复制代码 
// 创建并排标签
SideBySideLabel sideBySide = new SideBySideLabel();
sideBySide.Size = new Size(400, 100);
sideBySide.LeftLabel = "A股累计派现";
sideBySide.LeftValue = 1500;
sideBySide.LeftValueUnit = "亿元";
sideBySide.RightLabel = "A股累计融资";
sideBySide.RightValue = 1200;
sideBySide.RightValueUnit = "亿元";
this.Controls.Add(sideBySide);

数值设置

csharp 复制代码 
// 设置左侧数值
sideBySide.LeftValue = 1500;
sideBySide.LeftValueUnit = "亿元";

// 设置右侧数值
sideBySide.RightValue = 1200;
sideBySide.RightValueUnit = "亿元";

颜色自定义

csharp 复制代码 
// 设置颜色
sideBySide.LeftBarColor = Color.FromArgb(24, 144, 255);   // 蓝色
sideBySide.RightBarColor = Color.FromArgb(255, 77, 79);   // 红色
sideBySide.LabelColor = Color.Gray;

柱状图样式

csharp 复制代码 
// 设置柱状图高度
sideBySide.BarHeight = 30;

// 设置斜切口间隙
sideBySide.BarGap = 6;

// 设置斜切角度
sideBySide.SlantAngle = 60;

// 设置圆角半径
sideBySide.CornerRadius = 6;

间距设置

csharp 复制代码 
// 设置柱状图与文本间距
sideBySide.TextBarGap = 8;

// 设置内边距
sideBySide.Padding = new Padding(2, 4, 2, 4);

注意事项

  1. 数值比例：左右柱状图长度根据数值比例自动计算
  2. 斜切角度：SlantAngle 控制斜切口的倾斜角度
  3. 颜色对比：左右柱状图使用不同颜色便于区分
  4. 单位显示：数值单位会跟随数值一起显示

2.3 LabeledValue 标签值控件

控件名称

LabeledValue

中文名称

标签值控件

控件优点

LabeledValue 是一个标签值控件，支持主标题和副标题显示、预置颜色样式和圆角边框。适用于标签展示、状态显示等场景。

主要特性

  • 双文本显示：支持主标题和副标题同时显示
  • 排列方式：支持横向和纵向排列
  • 预置样式：支持多种预置颜色样式
  • 圆角边框：支持自定义圆角半径
  • 透明背景：支持透明背景

重要参数说明

基本属性

属性名 类型 默认值 说明
MainTitle string "主标题" 主标题文本
SubTitle string "副标题" 副标题文本
TitleAlign TitleAlign Horizontal 标题排列方式
ColorType ColorType Default 颜色类型

排列方式（TitleAlign）

排列值 说明
Horizontal 横向排列
Vertical 纵向排列

颜色类型（ColorType）

类型值 说明
Default 默认（灰色系）
Primary 主要（蓝色系）
Success 成功（绿色系）
Warning 警告（黄色系）
Error 错误（红色系）
Info 信息（青色系）

字体属性

属性名 类型 默认值 说明
MainTitleFont Font Microsoft YaHei 12pt 主标题字体
SubTitleFont Font Microsoft YaHei 9pt 副标题字体
MainTitleColor Color Black 主标题颜色
SubTitleColor Color Red 副标题颜色

外观属性

属性名 类型 默认值 说明
BorderRadius int 4 边框圆角
BorderColor Color Gray 边框颜色
BorderWidth int 1 边框宽度
Padding Padding 10 内边距
Gap int 10 主副标题间距

重要事件

事件名 说明
PropertyChanged 属性值改变时触发

使用示例

基本使用

csharp 复制代码 
// 创建标签值控件
LabeledValue label = new LabeledValue();
label.Size = new Size(200, 40);
label.MainTitle = "温度";
label.SubTitle = "25.5°C";
this.Controls.Add(label);

排列方式

csharp 复制代码 
// 横向排列
label.TitleAlign = TitleAlign.Horizontal;

// 纵向排列
label.TitleAlign = TitleAlign.Vertical;

颍色样式

csharp 复制代码 
// 设置颜色类型
label.ColorType = ColorType.Default;
label.ColorType = ColorType.Primary;
label.ColorType = ColorType.Success;
label.ColorType = ColorType.Warning;
label.ColorType = ColorType.Error;
label.ColorType = ColorType.Info;

字体设置

csharp 复制代码 
// 设置字体
label.MainTitleFont = new Font("Microsoft YaHei", 12f);
label.SubTitleFont = new Font("Microsoft YaHei", 9f);
label.MainTitleColor = Color.Black;
label.SubTitleColor = Color.Red;

圆角设置

csharp 复制代码 
// 设置圆角
label.BorderRadius = 8;

// 直角
label.BorderRadius = 0;

注意事项

  1. 排列方式：TitleAlign 控制主副标题的排列方向
  2. 颜色类型：ColorType 提供多种预置颜色样式
  3. 透明背景：控件支持透明背景
  4. 间距控制：Gap 控制主副标题之间的间距

三、后记

陆续优化完善中，敬请关注，如有需求和好的建议，请留言(xue5zhijing)

热门推荐
012026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？03GitHub 镜像站点04【AI】2026 年具身智能模型和世界模型总结052026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf06AI科技热点日报 | 2026年6月1日07AI一周事件 · 2026-06-03 至 2026-06-0908Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析09上线仅72小时被强制下架：Claude Fable 5 的短命10Snowflake (SNOW) 可比公司分析报告