【WinForm UI控件系列】Battery 电池电量控件

前言:c# winform UI控件系列,做不到最好用,但愿是更好用!

一、效果图

二、使用说明文档

Battery 电池电量控件

控件名称

Battery

中文名称

电池电量控件

控件优点

Battery 是一个简洁美观的电池电量显示控件,支持横向和纵向显示、自动颜色切换、百分比文本显示等功能。适用于电池状态显示、电量监控等场景。

主要特性

  • 双向显示:支持横向和纵向两种显示方向
  • 自动颜色:根据电量自动切换颜色(正常/警告/危险)
  • 圆角设计:支持自定义圆角半径
  • 文本显示:支持显示电量百分比
  • 数据绑定:实现 INotifyPropertyChanged 接口

重要参数说明

基本属性

属性名 类型 默认值 说明
Value int 60 电量值(0-100)
Vertical bool false 是否纵向显示
ShowText bool true 是否显示文本
BorderThickness int 2 边框粗细
CornerRadius int 6 圆角半径
FillPadding int 2 填充区域与外边框的间隙

颜色属性

属性名 类型 默认值 说明
Fill Color? null 正常填充色(>40%,默认绿色)
FillWarn Color? null 警告填充色(20-40%,默认黄色)
FillDanger Color? null 危险填充色(<20%,默认红色)
BorderColor Color 200, 200, 200 边框颜色
BackColor Color White 背景色

重要事件

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

使用示例

基本使用

csharp 复制代码
// 创建电池控件
Battery battery = new Battery();
battery.Size = new Size(70, 40);
battery.Value = 75;
this.Controls.Add(battery);

纵向显示

csharp 复制代码
// 纵向电池
battery.Vertical = true;
battery.Size = new Size(40, 70);

颜色自定义

csharp 复制代码
// 自定义颜色
battery.Fill = Color.Green;           // 正常
battery.FillWarn = Color.Orange;      // 警告
battery.FillDanger = Color.Red;       // 危险
battery.BorderColor = Color.Gray;
battery.BackColor = Color.White;

隐藏文本

csharp 复制代码
battery.ShowText = false;  // 只显示电池图形,不显示百分比

动态更新电量

csharp 复制代码
// 模拟电量消耗
Timer timer = new Timer();
timer.Interval = 1000;

timer.Tick += (s, e) =>
{
    battery.Value = Math.Max(0, battery.Value - 1);
};

timer.Start();

数据绑定

csharp 复制代码
// 属性改变事件
battery.PropertyChanged += (sender, e) =>
{
    if (e.PropertyName == nameof(Battery.Value))
    {
        Console.WriteLine($"电量已更新:{battery.Value}%");
    }
};

注意事项

  1. 电量范围:Value 应该在 0 到 100 之间
  2. 自动颜色:Fill、FillWarn、FillDanger 为 null 时使用默认颜色
  3. 尺寸建议:横向时宽度应大于高度,纵向时高度应大于宽度
  4. 圆角半径:CornerRadius 为 0 时为直角

三、后记

陆续补充完善中,如有需求,请留言(xue5zhijing)

相关推荐
ZC跨境爬虫2 小时前
UI前端美化技能提升日志day5:从布局优化到CSS继承原理深度解析
前端·css·ui·html·状态模式
久爱物联网2 小时前
【WinForm UI控件系列】AlarmLight 报警灯\声光报警灯控件
ui·winformui控件·桌面应用控件·c# ui控件·gdi控件 net控件
Wenzar_3 小时前
# 发散创新:SwiftUI 中状态管理的深度实践与重构艺术 在 SwiftUI 的世界里,**状态驱动 UI 是核心哲学**。但随
java·python·ui·重构·swiftui
Ulyanov3 小时前
《PySide6 GUI开发指南:QML核心与实践》 第五篇:Python与QML深度融合——数据绑定与交互
开发语言·python·qt·ui·交互·雷达电子战系统仿真
Ulyanov20 小时前
《玩转QT Designer Studio:从设计到实战》 QT Designer Studio组件化开发与UI组件库构建
开发语言·python·qt·ui·雷达电子战系统仿真
鼎道开发者联盟1 天前
鼎享会 | OpenClaw Control UI 前端架构全解析:自研 UI 对接 Server 实操指南
前端·ui·架构·openclaw·control ui
星河耀银海1 天前
Unity基础:UI组件详解:Toggle开关的状态控制
ui·unity·lucene
ZC跨境爬虫1 天前
UI前端美化技能提升日志day1:矢量图片规范与自适应控制栏实战
前端·css·ui·状态模式
ai_coder_ai1 天前
自动化脚本ui编程之水平滚动布局(hscroll)
ui·autojs·自动化脚本·冰狐智能辅助·easyclick