HelloMicro.ELEControls 1.1.0

ELEControls

基于 Element UI Plus 设计体系的 WinForms 自定义组件库，采用纯 GDI+ 绘制，提供 123 个开箱即用的主题化控件，覆盖基础、表单、数据展示、导航、反馈、布局、图表、工业控制八大类。

免费开源 | .NET 8 | 纯 GDI+ | VS 设计器友好 | 12 套内置主题

特性

• Element UI Plus 风格 — 完整移植 Web 端设计令牌（色彩、圆角、间距、阴影）到桌面端
• 纯 GDI+ 渲染 — 不依赖第三方绘图库，双缓冲 + 抗锯齿，流畅无闪烁
• 主题系统 — 内置 12 套配色方案，支持运行时一键切换，可自定义扩展
• DPI 自适应 — 内置 ELEDPIScale 缩放因子，高分屏下自动适配
• VS 设计器支持 — 所有控件均可在 Visual Studio 可视化设计器中拖放使用
• 统一命名空间 — 所有类型统一在 ELE.UI 命名空间下，引用即用
• 工业控件 — 提供仪表盘、液位罐、风机、泵、阀门等 SCADA 级工控组件

环境要求

快速开始

1. 引用项目

将 src\ELEControls 项目添加到你的解决方案中，然后在 WinForms 项目里添加项目引用：

<ProjectReference Include="..\ELEControls\ELEControls.csproj" />

2. 引入命名空间

using ELE.UI;

3. 使用控件

代码方式：

var btn = new ELEButton
{
    Text = "主要按钮",
    Type = ELEComponentType.Primary,
    Size = ELEComponentSize.Default,
    Location = new Point(20, 20)
};
this.Controls.Add(btn);

设计器方式：

编译项目后，所有 ELE 控件会自动出现在 VS 工具箱的 ELEControls 分类中，直接拖放到窗体即可。

4. 切换主题

// 设置全局主题
ELEStyles.SetStyle(ELEStyle.Blue);   // 内置主题
ELEStyles.SetStyle(ELEStyle.Dark);   // 暗色主题

// 可选主题: Blue, Green, Red, Orange, Purple, Dark, Gray,
//           Cyan, Pink, Brown, Black, White

项目结构

src/ELEControls/
├── Core/                    # 核心基础
│   ├── ELEControl.cs        # 主基类 (继承 Control)
│   ├── ELEUserControl.cs    # 复合基类 (继承 UserControl)
│   ├── ELEEnums.cs          # 枚举定义
│   ├── ELEGlobal.cs         # 全局常量
│   └── IELEStyle.cs         # 主题接口
├── Style/                   # 主题样式
│   ├── ELEColor.cs          # 颜色常量
│   ├── ELEBaseStyle.cs      # 基础样式 (150+ 虚属性)
│   ├── ELEStyleColor.cs     # 12 套主题实现
│   ├── ELEStyles.cs         # 全局主题管理器
│   └── ELEDPIScale.cs       # DPI 缩放
├── Common/                  # 公共工具
│   └── ELEGDI.cs            # GDI+ 扩展方法
├── Forms/                   # 窗体
│   ├── ELEBaseForm.cs       # 基础窗体 (自定义标题栏)
│   ├── ELEForm.cs           # 标准窗体
│   ├── ELEMessageForm.cs    # 消息弹窗
│   ├── ELEDialog.cs         # 对话框
│   └── ELEDrawer.cs         # 抽屉面板
└── Controls/                # 控件 (按分类)
    ├── Basic/               # 基础控件
    ├── Form/                # 表单控件
    ├── Data/                # 数据展示
    ├── Navigation/          # 导航控件
    ├── Feedback/            # 反馈控件
    ├── Layout/              # 布局容器
    ├── Chart/               # 图表控件
    └── Industrial/          # 工业控件

组件一览

基础控件 (5)

表单控件 (29)

数据展示控件 (29)

导航控件 (13)

反馈控件 (7)

布局控件 (14)

窗体 (5)

图表控件 (8)

工业控件 (13)

色彩体系

ELEControls 完整移植了 Element UI Plus 的语义色彩系统：

每个主色调自动生成 16 级渐变色阶（Light-1 到 Light-9、Dark-2），用于悬停、按下、禁用等状态。

主题切换

内置主题

// 在应用启动时设置全局主题
ELEStyles.SetStyle(ELEStyle.Blue);

支持 12 套主题：Blue Green Red Orange Purple Dark Gray Cyan Pink Brown Black White

自定义主题

继承 ELEBaseStyle 覆盖颜色属性即可创建自定义主题：

public class MyCustomStyle : ELEBaseStyle
{
    public override Color PrimaryColor => ColorTranslator.FromHtml("#6366F1");
    public override Color SuccessColor => ColorTranslator.FromHtml("#22C55E");
    // 覆盖需要自定义的属性 (共 150+ 可覆盖属性)
}

// 应用自定义主题
ELEStyles.SetStyle(new MyCustomStyle());

渲染架构

所有控件采用模板方法模式渲染管线，继承自 ELEControl 或 ELEUserControl：

OnPaint
  ├── OnPaintFill()    → 填充背景
  ├── OnPaintRect()    → 绘制边框
  └── OnPaintFore()    → 绘制前景内容

自定义控件只需继承基类并覆盖对应方法：

public class MyControl : ELEControl
{
    protected override void OnPaintFill(Graphics g, GraphicsPath path)
    {
        // 自定义背景绘制
    }

    protected override void OnPaintFore(Graphics g, GraphicsPath path)
    {
        // 自定义前景绘制
    }
}

状态管理

控件自动管理以下交互状态，每种状态对应独立的颜色组（FillColor / RectColor / ForeColor）：

枚举类型参考

ELEComponentType — 语义类型

Default | Primary | Success | Warning | Danger | Info

ELEComponentSize — 组件尺寸

Large (40px) | Default (32px) | Small (24px)

ELEButtonShape — 按钮形状

Default | Round | Circle

ELEPlacement — 弹出位置

Top | TopStart | TopEnd | Bottom | BottomStart | BottomEnd
Left | LeftStart | LeftEnd | Right | RightStart | RightEnd

ELEDirection — 方向

Up | Down | Left | Right

使用示例

主题按钮组

var btnPrimary = new ELEButton { Text = "主要", Type = ELEComponentType.Primary };
var btnSuccess = new ELEButton { Text = "成功", Type = ELEComponentType.Success };
var btnWarning = new ELEButton { Text = "警告", Type = ELEComponentType.Warning };
var btnDanger  = new ELEButton { Text = "危险", Type = ELEComponentType.Danger };
var btnInfo    = new ELEButton { Text = "信息", Type = ELEComponentType.Info };

表单输入

var txtName = new ELETextBox
{
    PlaceholderText = "请输入姓名",
    Size = ELEComponentSize.Default,
    Width = 240
};

var cboCity = new ELEComboBox
{
    PlaceholderText = "请选择城市",
    Size = ELEComponentSize.Default
};
cboCity.Items.AddRange(new[] { "北京", "上海", "广州", "深圳" });

数据表格

var grid = new ELEDataGridView
{
    Dock = DockStyle.Fill,
    ShowCheckBoxes = true
};
grid.Columns.Add("Name", "姓名");
grid.Columns.Add("Age", "年龄");
grid.Rows.Add("张三", 28);

消息通知

// 顶部消息条
ELEMessageBar.Show("操作成功！", ELEComponentType.Success);

// 右下角通知
ELENotification.Show("系统通知", "您有新的消息，请及时查看。");

// 模态消息框
ELEMessageForm.Show("确定删除？", "提示", MessageBoxButtons.YesNo);

图表

var chart = new ELELineChart { Dock = DockStyle.Fill };
chart.Series.Add(new ELEChartSeries
{
    Name = "销售额",
    Data = new List<double> { 120, 200, 150, 80, 70, 110, 130 }
});
chart.Categories = new List<string>
{
    "周一", "周二", "周三", "周四", "周五", "周六", "周日"
};

工业控件

// 仪表盘
var meter = new ELEMeter
{
    Value = 75.5,
    MinValue = 0,
    MaxValue = 100,
    Unit = "℃"
};

// 液位罐
var tank = new ELETank
{
    Value = 65,
    MaxValue = 100,
    ShowWave = true
};

// 阀门
var valve = new ELEValve
{
    IsOpen = true,
    Direction = ELEDirection.Right
};

构建

dotnet build src\ELEControls\ELEControls.csproj -c Release

输出程序集位于 src\ELEControls\bin\Release\net8.0-windows\ELEControls.dll。

NuGet 包

本项目已发布到 NuGet，你可以直接通过 NuGet 包管理器安装：

安装方式

Package Manager:

Install-Package ELEControls

.NET CLI:

dotnet add package ELEControls

PackageReference:

<PackageReference Include="ELEControls" Version="1.0.0" />

发布 NuGet 包

如果你想自己构建和发布 NuGet 包，请参考 NuGet 发布指南

快速开始：

# 获取 API Key 后，一行命令完成发布
.\nuget-publish.ps1 -ApiKey "your-api-key"

许可证

本项目基于 木兰宽松许可证 第2版 (MulanPSL-2.0) 开源。