WPF数据可视化控件(一) LED风格数字控件

本文介绍如何在WPF中创建LED风格的数字控件,详细阐述了从定义参数模型到实现多数字控件组合的全过程,包括控件的图形绘制、单个数字控件和组合控件的逻辑,以及默认样式的设定,提供了实现此类控件的源码链接。
摘要由CSDN通过智能技术生成

原帖地址:https://blog.csdn.net/zhuo_wp/article/details/81561190

资源源码:https://download.csdn.net/download/zhuo_wp/10597840

      在做数据可视化显示的时候,有时需要LED风格的数字显示。WPF的原生控件中并没有这样的控件,因此需要自定义这样的控件。本博文便是描述一种LED风格数字控件的实现方式。  

        本控件图像的绘制参考了文章:A Fine-looking Segmented LED Control

 

 

 

 

 

一 定义参数模型

         由上图可知,影响数字控件外观的因子由:控件的宽/高、控件各部分的间隔、数字控件的粗细以及截断长度。可以将这些参数封装成一个参数模型类,方便对参数进行统一管理。代码如下:

    public class DigitalParameter
    {
        public double DigitalWidth { get; set; }
        public double DigitalHeight { get; set; }
        public double SegmentThickness { get; set; }
        public double SegmentInterval { get; set; }
        public double BevelWidth { get; set; }
    }

二 定义控件各部件关键点获取的类

根据前文连接中给出的这个绘制数字的方式,统一由一个类给出绘制数字的每一个组成部件所需要的关键点。


    public class BaseLedDigitalSegmentCreator : ILedDigitalSegmentCreator
    {
        private DigitalParameter _parameter = null;

        public BaseLedDigitalSegmentCreator(DigitalParameter parameter)
        {
            _parameter = parameter;
        }

        public List<Point> GetBottomSegment()
        {
            List<Point> points = new List<Point>();
            points.Add(new Point(_parameter.SegmentThickness + _parameter.SegmentInterval, _parameter.DigitalHeight - _parameter.SegmentThickness));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.SegmentThickness - _parameter.SegmentInterval, _parameter.DigitalHeight - _parameter.SegmentThickness));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.BevelWidth - _parameter.SegmentInterval, _parameter.DigitalHeight - _parameter.BevelWidth));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.BevelWidth * 2 - _parameter.SegmentInterval, _parameter.DigitalHeight));
            points.Add(new Point(_parameter.BevelWidth * 2 + _parameter.SegmentInterval, _parameter.DigitalHeight));
            points.Add(new Point(_parameter.BevelWidth + _parameter.SegmentInterval, _parameter.DigitalHeight - _parameter.BevelWidth));

            return points;
        }

        public List<Point> GetDotSegment()
        {
            List<Point> points = new List<Point>();
            points.Add(new Point(_parameter.DigitalWidth + _parameter.SegmentThickness / 2, _parameter.DigitalHeight - _parameter.SegmentThickness / 2));
            return points;
        }

        public List<Point> GetDownColonSegment()
        {
            List<Point> points = new List<Point>();
            points.Add(new Point(_parameter.DigitalWidth / 2, 3 * _parameter.DigitalHeight / 4 - _parameter.SegmentThickness / 4));
            return points;
        }

        public List<Point> GetDownLeftSegment()
        {
            List<Point> points = new List<Point>();
            points.Add(new Point(0, _parameter.DigitalHeight - _parameter.BevelWidth * 2 - _parameter.SegmentInterval));
            points.Add(new Point(0, _parameter.DigitalHeight / 2 + _parameter.SegmentInterval + _parameter.SegmentThickness / 2));
            points.Add(new Point(_parameter.SegmentThickness / 2, _parameter.DigitalHeight / 2 + _parameter.SegmentInterval));
            points.Add(new Point(_parameter.SegmentThickness, _parameter.DigitalHeight / 2 + _parameter.SegmentThickness / 2 + _parameter.SegmentInterval));
            points.Add(new Point(_parameter.SegmentThickness, _parameter.DigitalHeight - _parameter.SegmentThickness - _parameter.SegmentInterval));
            points.Add(new Point(_parameter.BevelWidth, _parameter.DigitalHeight - _parameter.BevelWidth - _parameter.SegmentInterval));
            return points;
        }

        public List<Point> GetDownRightSegment()
        {
            List<Point> points = new List<Point>();
            points.Add(new Point(_parameter.DigitalWidth, _parameter.DigitalHeight - _parameter.BevelWidth * 2 - _parameter.SegmentInterval));
            points.Add(new Point(_parameter.DigitalWidth, _parameter.DigitalHeight / 2 + _parameter.SegmentInterval + _parameter.SegmentThickness / 2));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.SegmentThickness / 2, _parameter.DigitalHeight / 2 + _parameter.SegmentInterval));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.SegmentThickness, _parameter.DigitalHeight / 2 + _parameter.SegmentThickness / 2 + _parameter.SegmentInterval));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.SegmentThickness, _parameter.DigitalHeight - _parameter.SegmentThickness - _parameter.SegmentInterval));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.BevelWidth, _parameter.DigitalHeight - _parameter.BevelWidth - _parameter.SegmentInterval));
            return points;
        }

        public List<Point> GetMiddleSegment()
        {
            List<Point> points = new List<Point>();
            points.Add(new Point(_parameter.SegmentThickness + _parameter.SegmentInterval, _parameter.DigitalHeight / 2 - _parameter.SegmentThickness / 2));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.SegmentThickness - _parameter.SegmentInterval, _parameter.DigitalHeight / 2 - _parameter.SegmentThickness / 2));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.SegmentInterval - _parameter.SegmentThickness / 2, _parameter.DigitalHeight / 2));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.SegmentThickness - _parameter.SegmentInterval, _parameter.DigitalHeight / 2 + _parameter.SegmentThickness / 2));
            points.Add(new Point(_parameter.SegmentThickness + _parameter.SegmentInterval, _parameter.DigitalHeight / 2 + _parameter.SegmentThickness / 2));
            points.Add(new Point(_parameter.SegmentThickness / 2 + _parameter.SegmentInterval, _parameter.DigitalHeight / 2));
            return points;
        }

        public List<Point> GetTopSegment()
        {
            List<Point> points = new List<Point>();
            points.Add(new Point(_parameter.BevelWidth * 2 + _parameter.SegmentInterval, 0));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.BevelWidth * 2 - _parameter.SegmentInterval, 0));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.BevelWidth - _parameter.SegmentInterval, _parameter.BevelWidth));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.SegmentInterval - _parameter.SegmentThickness, _parameter.SegmentThickness));
            points.Add(new Point(_parameter.SegmentThickness + _parameter.SegmentInterval, _parameter.SegmentThickness));
            points.Add(new Point(_parameter.BevelWidth + _parameter.SegmentInterval, _parameter.BevelWidth));
            return points;
        }

        public List<Point> GetUpColonSegment()
        {
            List<Point> points = new List<Point>();
            points.Add(new Point(_parameter.DigitalWidth / 2, _parameter.DigitalHeight / 4 + _parameter.SegmentThickness / 4));
            return points;
        }

        public List<Point> GetUpLeftSegment()
        {
            List<Point> points = new List<Point>();
            points.Add(new Point(0, _parameter.BevelWidth * 2 + _parameter.SegmentInterval));
            points.Add(new Point(0, _parameter.DigitalHeight / 2 - _parameter.SegmentInterval - _parameter.SegmentThickness / 2));
            points.Add(new Point(_parameter.SegmentThickness / 2, _parameter.DigitalHeight / 2 - _parameter.SegmentInterval));
            points.Add(new Point(_parameter.SegmentThickness, _parameter.DigitalHeight / 2 - _parameter.SegmentThickness / 2 - _parameter.SegmentInterval));
            points.Add(new Point(_parameter.SegmentThickness, _parameter.SegmentThickness + _parameter.SegmentInterval));
            points.Add(new Point(_parameter.BevelWidth, _parameter.BevelWidth + _parameter.SegmentInterval));
            return points;
        }

        public List<Point> GetUpRightSegment()
        {
            List<Point> points = new List<Point>();
            points.Add(new Point(_parameter.DigitalWidth, _parameter.BevelWidth * 2 + _parameter.SegmentInterval));
            points.Add(new Point(_parameter.DigitalWidth, _parameter.DigitalHeight / 2 - _parameter.SegmentThickness / 2 - _parameter.SegmentInterval));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.SegmentThickness / 2, _parameter.DigitalHeight / 2 - _parameter.SegmentInterval));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.SegmentThickness, _parameter.DigitalHeight / 2 - _parameter.SegmentThickness / 2 - _parameter.SegmentInterval));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.SegmentThickness, _parameter.SegmentThickness + _parameter.SegmentInterval));
            points.Add(new Point(_parameter.DigitalWidth - _parameter.BevelWidth, _parameter.BevelWidth + _parameter.SegmentInterval));
            return points;
        }
    }

需要注意的两点:

1 上面的类BaseLedDigitalSegmentCreator实现了接口ILedDigitalSegmentCreator,此举是为方便以后修改数字控件的绘制方式做的预留接口。如有需要新增一种数字绘制方式,只需要重新定义一个实现了该接口的类。

    public interface ILedDigitalSegmentCreator
    {
        List<Point> GetBottomSegment();
        List<Point> GetDotSegment();
        List<Point> GetDownColonSegment();
        List<Point> GetDownLeftSegment();
        List<Point> GetDownRightSegment();
        List<Point> GetMiddleSegment();
        List<Point> GetTopSegment();
        List<Point> GetUpColonSegment();
        List<Point> GetUpLeftSegment();
        List<Point> GetUpRightSegment();
    }

2 上述代码多了2个部件,一个时小数点,为了以一种更好的方式显示小数点;另外一个时冒号“:”,在显示数字的时候有可能需要用到这个字

WPF(Windows Presentation Foundation)是微软的一种用于开发应用程序用户界面的技术。WPF可以用于开发各种类型的应用程序,包括数据可视化应用程序。 WPF数据可视化功能包括一系列控件和工具,用于展示和呈现数据。这些控件和工具可以帮助用户创建各种图表、图形和其他形式的数据可视化。 在WPF中,数据可视化源码可以通过编写XAML代码和C#代码来实现。XAML是WPF应用程序的标记语言,用于描述应用程序的用户界面和布局。C#是WPF应用程序的编程语言,用于编写应用程序的逻辑和功能。 对于数据可视化源码,开发人员可以使用WPF提供的各种控件,例如Chart控件、Graph控件和DataGrid控件。这些控件提供了丰富的功能和样式,可以轻松地创建各种类型的图表和数据显示。 在编写数据可视化源码时,开发人员需要考虑数据的来源和格式。可以从文件、数据库或网络中获取数据,然后使用WPF的数据绑定功能将数据与控件进行绑定。这样,当数据发生变化时,控件可以自动更新并呈现新的数据。 此外,开发人员还可以使用WPF的动画和转换功能来增强数据可视化效果。通过对数据可视化元素应用动画效果,可以使用户界面更加生动和吸引人。 总之,WPF提供了强大的数据可视化功能,开发人员可以利用这些功能创建出丰富、吸引人的数据可视化应用程序。通过深入研究和使用WPF的相关控件和功能,开发人员可以编写出高效、可靠的数据可视化源码。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值