WPF数据可视化控件（一） LED风格数字控件

最新推荐文章于 2023-08-28 10:44:02 发布

zhuowp

最新推荐文章于 2023-08-28 10:44:02 发布

阅读量5.7k

点赞数 1

分类专栏： WPF自定义控件 WPF c#

本文链接：https://blog.csdn.net/zhuo_wp/article/details/81561190

版权

本文介绍如何在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个部件，一个时小数点，为了以一种更好的方式显示小数点；另外一个时冒号“：”，在显示数字的时候有可能需要用到这个字