博客
关于我
(五十四)c#Winform自定义控件-仪表盘-HZHControls
阅读量:412 次
发布时间:2019-03-06

本文共 2969 字,大约阅读时间需要 9 分钟。

自定义Meter控件:实现数值显示与刻度的精致UI体验

作为一名开发者,总有一天会对自定义控件产生兴趣。经过多年的积累,我决定尝试设计一套美观且功能强大的Meter控件。这一系列文章将从控件的实现入手,分享我的设计思路与实践经验。

NuGet包地址

如果你想直接获取本控件,可以通过以下命令安装:

Install-Package HZH_Controls

目录

本文将从以下几个方面展开:

  • 用途与效果:介绍Meter控件的主要应用场景及视觉效果
  • 准备工作:介绍开发Meter控件所需的基础知识与工具
  • 实现过程:从类的定义到绘制逻辑的详细说明
  • 代码展示:完整的Meter控件代码解析
  • 文本位置选项:一个简便的枚举类型辅助
  • 背景与准备

    入行已有7,8年,一直对自定义控件充满向往。本文将分享我实现Meter控件的全过程,力求做到简洁优雅,同时具备良好的用户体验。

    实现思路

    Meter控件的设计目标是实现数值显示与刻度展示的精致UI。具体来说,我希望实现以下功能:

    • 可定制性:支持刻度分隔数、表盘跨度角度、最小值与最大值等多种属性
    • 美观性:采用GDI+绘制,结合三角函数实现弧形与刻度
    • 灵活性:支持文本位置的调整,方便在不同场景下使用

    技术选择

    在实现过程中,我选择使用C#与WPF技术栈,原因如下:

  • 跨平台支持:C#在Windows应用中表现优异
  • 丰富的控件库:Windows Forms提供了强大的绘制工具
  • 成熟的框架支持: Infragistics等第三方控件库可提供额外功能
  • 控件属性

    Meter控件的核心属性包括:

    • SplitCount:确定刻度分隔的数量(>1)
    • MeterDegrees:设定表盘的角度范围(0-360)
    • MinValue:指定最小显示值
    • MaxValue:指定最大显示值
    • Font:设置显示文字的字体
    • TextLocation:决定文本显示位置(Top、Bottom或None)

    代码实现

    Meter控件的核心代码位于UCMeter.cs文件中。以下是关键实现细节:

    绘制逻辑

  • 外圆绘制:

    float fltStartAngle = -90 - (meterDegrees) / 2 + 360;Rectangle r1 = new Rectangle(m_rectWorking.Location, new Size(m_rectWorking.Width, m_rectWorking.Width));g.DrawArc(new Pen(new SolidBrush(externalRoundColor), 1), r1, fltStartAngle, meterDegrees);
  • 内圆绘制:

    Rectangle r2 = new Rectangle(m_rectWorking.Left + (m_rectWorking.Width - m_rectWorking.Width / 4) / 2,                            m_rectWorking.Top + (m_rectWorking.Width - m_rectWorking.Width / 4) / 2,                            m_rectWorking.Width / 4, m_rectWorking.Width / 4);g.DrawArc(new Pen(new SolidBrush(insideRoundColor), 1), r2, fltStartAngle, meterDegrees);
  • 刻度与数值绘制:

    int _splitCount = splitCount * 2;float fltSplitValue = (float)meterDegrees / (float)_splitCount;for (int i = 0; i <= _splitCount; i++){    // 计算每个刻度的角度位置    float fltAngle = (fltStartAngle + fltSplitValue * i - 180) % 360;    // 绘制刻度线    float fltY1 = (float)(m_rectWorking.Top + m_rectWorking.Width / 2 - ((m_rectWorking.Width / 2) * Math.Sin(Math.PI * (fltAngle / 180.00F))));    float fltX1 = (float)(m_rectWorking.Left + (m_rectWorking.Width / 2 - ((m_rectWorking.Width / 2) * Math.Cos(Math.PI * (fltAngle / 180.00F))));    // 文本绘制(偶数刻度)    if (i % 2 == 0)    {        // 详细计算并绘制数值显示        // ...    }    // 绘制刻度线    g.DrawLine(new Pen(new SolidBrush(scaleColor), i % 2 == 0 ? 2 : 1), new PointF(fltX1, fltY1), new PointF(fltX2, fltY2));}
  • 指针绘制:

    // 主指针g.FillEllipse(new SolidBrush(Color.FromArgb(100, pointerColor.R, pointerColor.G, pointerColor.B)),              new Rectangle(m_rectWorking.Left + m_rectWorking.Width / 2 - 10,                          m_rectWorking.Top + m_rectWorking.Width / 2 - 10, 20, 20));// 红色指针g.FillEllipse(Brushes.Red, new Rectangle(m_rectWorking.Left + m_rectWorking.Width / 2 - 5,                                       m_rectWorking.Top + m_rectWorking.Width / 2 - 5, 10, 10));
  • 文本位置选项

    为了提供灵活性,我添加了MeterTextLocation枚举类型,支持三种文本位置:

    public enum MeterTextLocation{    None,    Top,    Bottom}

    最后的话

    如果你觉得这篇文章对你有帮助,请不要忘记给它点个【推荐】。同时,欢迎在评论区留言交流,或者加入技术论坛继续讨论。

    你可以通过以下方式获取更多信息:

    希望我的Meter控件能为你的项目带来帮助!

    转载地址:http://mbvkz.baihongyu.com/

    你可能感兴趣的文章
    Python基础之给函数增加元信息
    查看>>
    python基础之字符编码
    查看>>
    python基础之多线程与多进程(二)
    查看>>
    Python基础——MySQL数据库基本操作
    查看>>
    Python基础_列表 list
    查看>>
    python基础---->常用模块
    查看>>
    Python基础(2):控制结构
    查看>>
    Python基础 | 关于“循环”那些事
    查看>>
    python系列【仅供参考】:python 远程rdp
    查看>>
    python基于flask搭建http服务(四)—— Docker容器化部署
    查看>>
    Python块键盘/鼠标输入
    查看>>
    python在使用HTMLTestRunner时,报告为空,错误提示<_io.TextIOWrapper name='<stderr>' mode='w' encoding='utf_8'>...
    查看>>
    python在gpu上运行_【python】python开启GPU加速
    查看>>
    Python在def函数中使用for循环
    查看>>
    Python在def函数中使用for循环
    查看>>
    Python在Conda环境中,但在Windows虚拟环境中没有激活
    查看>>
    python系列【仅供参考】:python pip 错误 ModuleNotFoundError: No module named pip._internal 解决办法
    查看>>
    python图像条状状噪声,使用PYTHON PIL从验证码图像中删除背景嘈杂的线条
    查看>>
    Python图像处理:从内存加载jpeg
    查看>>
    python固定后缀(名物化词汇)词频统计:抽取+统计+可视化
    查看>>