WPF自定义LED风格数字显示控件

原文:WPF自定义LED风格数字显示控件

版权声明：本文为博主原创文章，转载请注明作者和出处 https://blog.csdn.net/ZZZWWWPPP11199988899/article/details/52895167

       前段时间做过一个WPF的项目，需要用到这样一个控件，在网上找了一下没找到特别合适的，要么有的不是WPF的控件（无法使用WPF的绑定功能），要么有的是WPF的但是效果不太好，或者不满足需求（比如没有小数点.或者冒号：）。所以就参考着别人的东西自己做了一个。

       本文大部分属于原创内容，但是在图像绘制的时候参考（其实是照搬）了这个文章里的内容：A Fine-looking Segmented LED Control

     

      一 整个控件库的目录结构：

      

       其中DigitalControl.cs为单个LED数字控件，DigitalPanelControl.cs为多个DigitalControl的组合控件，Segment目录下的类为数字的7条边和冒号以及小数点的类。Data目录下的DigitalData类存放一个DigitalControl的Segment数据，而DigitalParam存放单个DigitalControl的基本属性，包括宽，高，线条粗细以及间距等。

       控件构造的基本思路为：通过单个控件的基本属性参数（宽、高、粗细等）——也就是DigitalParam类中的数据——去构造组成单个数字的10个Segment，然后通过组合Segment得到DigitalControl，再通过组合DigitControl得到DigitalPanelControl，普通的控件使用者主要是使用DigitalPanelControl。

       二 Segment类 

      

        ===========================

      

       Segment类为数字的7条边（如上图）以及冒号（：）的两个点和小数点，一共10个子类，他们继承共同的父类Segments，由一个或多个点构成的Path组成，每个Segment的画法如上图所示。

       （注：上图照搬自 这里 ）

       Segment类为一个抽象父类，类中定义了一个List<Point>列表，用来存放构成Segment的点，然后声明了一个GetPoints的虚方法，在其子类中复写了此方法，主要用于通过给定的DigitalParam数据得到Segment所需要的点（填充_points）。

       下面是Segment父类和其中一个子类TopSegment的代码。

    public abstract class Segment
    {
        private List<Point> _points = new List<Point>();

        public List<Point> Points
        {
            get { return _points; }
            set { _points = value; }
        }

        public abstract void GetPoints(DigitalParam dp);
    }

    public class TopSegment : Segment
    {
        public TopSegment(DigitalParam dp)
        {
            GetPoints(dp);
        }

        public override void GetPoints(DigitalParam dp)
        {
            Points.Add(new Point(dp.BevelWidth * 2 + dp.SegmentInterval, 0));
            Points.Add(new Point(dp.DigitalWidth - dp.BevelWidth * 2 - dp.SegmentInterval, 0));
            Points.Add(new Point(dp.DigitalWidth - dp.BevelWidth - dp.SegmentInterval, dp.BevelWidth));
            Points.Add(new Point(dp.DigitalWidth - dp.SegmentInterval - dp.SegmentThickness, dp.SegmentThickness));
            Points.Add(new Point(dp.SegmentThickness + dp.SegmentInterval, dp.SegmentThickness));
            Points.Add(new Point(dp.BevelWidth + dp.SegmentInterval, dp.BevelWidth));
        }
    }

      

       三 DigitalData类

       该类为单个数字控件的数据类，主要包括10个支持数字显示的Segment的字段和属性，以及两个控制数字显示内容的方法。其中DisplayDigital根据给定的数字字符去调用LightDigitalSegments方法，通过LightDigitalSegments方法设置不同Segment的显示或隐藏来显示具体的数字。

    public class DigitalData
    {
        #region Fields

        private Path topSegment;
        private Path upLeftSegment;
        private Path upRightSegment;
        private Path middleSegment;
        private Path downLeftSegment;
        private Path downRightSegment;
        private Path bottomSegment;

        private Path dotSegment;
        private Path colonUpSegment;
        private Path colonDownSegment;

        #endregion

        #region Properties

        public Path TopSegment
        {
            get
            {
                return topSegment;
            }

            set
            {
                topSegment = value;
            }
        }

        public Path UpLeftSegment
        {
            get
            {
                return upLeftSegment;
            }

            set
            {
                upLeftSegment = value;
            }
        }

        public Path UpRightSegment
        {
            get
            {
                return upRightSegment;
            }

            set
            {
                upRightSegment = value;
            }
        }

        public Path MiddleSegment
        {
            get
            {
                return middleSegment;
            }

            set
            {
                middleSegment = value;
            }
        }

        public Path DownLeftSegment
        {
            get
            {
                return downLeftSegment;
            }

            set
            {
                downLeftSegment = value;
            }
        }

        public Path DownRightSegment
        {
            get
            {
                return downRightSegment;
            }

            set
            {
                downRightSegment = value;
            }
        }

        public Path BottomSegment
        {
            get
            {
                return bottomSegment;
            }

            set
            {
                bottomSegment = value;
            }
        }

        public Path DotSegment
        {
            get
            {
                return dotSegment;
            }

            set
            {
                dotSegment = value;
            }
        }

        public Path UpColonSegment
        {
            get
            {
                return colonUpSegment;
            }

            set
            {
                colonUpSegment = value;
            }
        }

        public Path DownColonSegment
        {
            get
            {
                return colonDownSegment;
            }

            set
            {
                colonDownSegment = value;
            }
        }

        #endregion

        #region Methods

        /// <summary>
        /// 设置segment的状态
        /// </summary>
        /// <param name="top"></param>
        /// <param name="upRight"></param>
        /// <param name="downRight"></param>
        /// <param name="bottom"></param>
        /// <param name="downLeft"></param>
        /// <param name="upLeft"></param>
        /// <param name="middle"></param>
        /// <param name="dot"></param>
        /// <param name="colon"></param>
        private void LightDigitalSegments(bool top, bool upRight, bool downRight, bool bottom,
            bool downLeft, bool upLeft, bool middle, bool dot, bool colon)
        {
            double ON = 1;
            double OFF = 0.05;

            TopSegment.Opacity = top ? ON : OFF;
            UpRightSegment.Opacity = upRight ? ON : OFF;
            DownRightSegment.Opacity = downRight ? ON : OFF;
            BottomSegment.Opacity = bottom ? ON : OFF;
            DownLeftSegment.Opacity = downLeft ? ON : OFF;
            UpLeftSegment.Opacity = upLeft ? ON : OFF;
            MiddleSegment.Opacity = middle ? ON : OFF;
            DotSegment.Opacity = dot ? ON : OFF;
            UpColonSegment.Opacity = DownColonSegment.Opacity = colon ? ON : OFF;
        }

        /// <summary>
        /// 根据输入字符显示相应的字符
        /// </summary>
        /// <param name="digital"></param>
        public void DisplayDigital(string digital)
        {
            switch (digital)
            {
                case null:
                case " ":
                    LightDigitalSegments(false, false, false, false, false, false, false, false, false);
                    break;
                case "0":
                    LightDigitalSegments(true, true, true, true, true, true, false, false, false);
                    break;
                case "1":
                    LightDigitalSegments(false, true, true, false, false, false, false, false, false);
                    break;
                case "2":
                    LightDigitalSegments(true, true, false, true, true, false, true, false, false);
                    break;
                case "3":
                    LightDigitalSegments(true, true, true, true, false, false, true, false, false);
                    break;
                case "4":
                    LightDigitalSegments(false, true, true, false, false, true, true, false, false);
                    break;
                case "5":
                    LightDigitalSegments(true, false, true, true, false, true, true, false, false);
                    break;
                case "6":
                    LightDigitalSegments(true, false, true, true, true, true, true, false, false);
                    break;
                case "7":
                    LightDigitalSegments(true, true, true, false, false, false, false, false, false);
                    break;
                case "8":
                    LightDigitalSegments(true, true, true, true, true, true, true, false, false);
                    break;
                case "9":
                    LightDigitalSegments(true, true, true, true, false, true, true, false, false);
                    break;
                case "0.":
                    LightDigitalSegments(true, true, true, true, true, true, false, true, false);
                    break;
                case "1.":
                    LightDigitalSegments(false, true, true, false, false, false, false, true, false);
                    break;
                case "2.":
                    LightDigitalSegments(true, true, false, true, true, false, true, true, false);
                    break;
                case "3.":
                    LightDigitalSegments(true, true, true, true, false, false, true, true, false);
                    break;
                case "4.":
                    LightDigitalSegments(false, true, true, false, false, true, true, true, false);
                    break;
                case "5.":
                    LightDigitalSegments(true, false, true, true, false, true, true, true, false);
                    break;
                case "6.":
                    LightDigitalSegments(true, false, true, true, true, true, true, true, false);
                    break;
                case "7.":
                    LightDigitalSegments(true, true, true, false, false, false, false, true, false);
                    break;
                case "8.":
                    LightDigitalSegments(true, true, true, true, true, true, true, true, false);
                    break;
                case "9.":
                    LightDigitalSegments(true, true, true, true, false, true, true, true, false);
                    break;
                case ":":
                case "：":
                    LightDigitalSegments(false, false, false, false, false, false, false, false, true);
                    break;
                case "-":
                    LightDigitalSegments(false, false, false, false, false, false, true, false, false);
                    break;
                default:
                    throw new Exception("输入字符错误！");
            }
        }

        #endregion
    }

       四 DigitalControl类

      

       单个数字控件的类，继承自ContentControl

    public class DigitalControl : ContentControl

       类里面定义了一些和控件显示相关的依赖属性，如控制颜色的LEDColorProperty，控制segment粗细的LEDThicknessProperty，控制显示内容的ValueProperty等等，并为这些依赖属性定义了属性包装器和属性变化回调方法。

       控件在显示前会调用OnApplyTemplate方法，会进行控件的初始化，包括调用SetSegmentsData方法得到所有Segment的点集，然后调用DrwaSegments绘制所有的Segment，然后将这些Segment都添加到控件的根容器中，最终设置其显示的值。

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        //获取根布局
        rootGrid = GetTemplateChild("gdRoot") as Grid;

        //初始化Segments的点集digitalSegmentDict
        SetSegmentsData();
        //画数字
        dd = DrawSegments(digitalSegmentDict, LEDColor);

        //将线段添加到容器
        AddSegmentsToPanel(dd);

        dd.DisplayDigital(Value);
    }

       SetSegmentsData方法首先初始化DigitalParam数据，然后根据DigitalParam通过Segment子类实例化时调用各自的GetPoints方法得到各自的点集合，并存储到字典里面。

    /// <summary>
    /// 初始化Segments的点集
    /// </summary>
    private void SetSegmentsData()
    {
        dp = new DigitalParam();
        dp.BevelWidth = BevelWidth;
        dp.SegmentInterval = SegmentInterval;
        dp.SegmentThickness = LEDThickness;
        dp.DigitalHeight = LEDHeight;
        dp.DigitalWidth = LEDWidth;<pre class="csharp" name="code">        digitalSegmentDict["TopSegment"] = new TopSegment(dp);
        digitalSegmentDict["UpRightSegment"] = new UpRightSegment(dp);
        digitalSegmentDict["DownRightSegment"] = new DownRightSegment(dp);
        digitalSegmentDict["BottomSegment"] = new BottomSegment(dp);
        digitalSegmentDict["DownLeftSegment"] = new DownLeftSegment(dp);
        digitalSegmentDict["UpLeftSegment"] = new UpLeftSegment(dp);
        digitalSegmentDict["MiddleSegment"] = new MiddleSegment(dp);
        digitalSegmentDict["UpColonSegment"] = new UpColonSegment(dp);
        digitalSegmentDict["DownColonSegment"] = new DownColonSegment(dp);
        digitalSegmentDict["DotSegment"] = new DotSegment(dp);
    }

       DrawSegments会根据参数的Point个数调用DrawLine和DrawEllipse方法来绘制图像得到DigitalData。

    /// <summary>
    /// 画直线段
    /// </summary>
    /// <param name="points"></param>
    /// <param name="clr"></param>
    /// <returns></returns>
    private static Path DrawLine(List<Point> points, Color clr)
    {
        PathSegmentCollection segments = new PathSegmentCollection();
        for (int i = 1; i < points.Count; i++)
        {
            segments.Add(new LineSegment(points[i], true));
        }

        Path segment = new Path()
        {
            StrokeLineJoin = PenLineJoin.Round,
            Stroke = new SolidColorBrush(clr),
            Fill = new SolidColorBrush(clr),
            Opacity = 0.05,
            StrokeThickness = 0.25,
            Data = new PathGeometry()
            {
                Figures = new PathFigureCollection()
                {
                    new PathFigure(){IsClosed = true, IsFilled = true, StartPoint = points[0], Segments = segments}
                }
            }
       };
        return segment;
    }

    /// <summary>
    /// 画圆点
    /// </summary>
    /// <param name="p"></param>
    /// <param name="radius"></param>
    /// <param name="clr"></param>
    /// <returns></returns>
    private Path DrawEllipse(Point p, double radius, Color clr)
    {
        Color strokecolor;
        if (clr == Colors.Transparent)
        {
            strokecolor = clr;
        }
        else
        {
            strokecolor = Colors.White;
        }

        Path segment = new Path()
        {
            StrokeLineJoin = PenLineJoin.Round,
            Stroke = new SolidColorBrush(strokecolor),

            Fill = new SolidColorBrush(clr),
            Opacity = 0.05,
            StrokeThickness = 0.25,
            Data = new EllipseGeometry(p, radius, radius)
        };

        return segment;
    }

       五 DigitalPanelControl类

       先在Generic.xaml中设置控件风格，病将背景颜色、宽、高绑定为TemplatedParent的数据，

    <Style TargetType="{x:Type local:DigitalPanelControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:DigitalPanelControl}">
                    <StackPanel x:Name="LayoutRoot" Orientation="Horizontal"
                         Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"
                         Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}"
                         Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

       同样在该类中定义了一系列的依赖属性用于控件的数据绑定，包括Digital的个数，控件的宽、高，背景色、前景色等等，同时定义了一系列属性改变回调方法和属性包装器。

        在OnApplyTemplate方法中，会根据当前的DigitalCount数据添加相应个数的DigitalContral到根容器，然后调用DisplayData方法显示数据

        /// <summary>
        /// 调用模板时的方法
        /// </summary>
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            //获取根布局
            rootPanel = GetTemplateChild("LayoutRoot") as StackPanel;

            //添加Led
            DrawDigitals(DigitalCount);

            //将Digitals 加入到rootPanel中
            foreach(DigitalControl digital in digitalsList)
            {
                rootPanel.Children.Add(digital);
            }

            DisplayData(Value);
        }

       DisplayData方法会先将所要显示的字符串转换成单个DigitalControl可显示的字符列表，然后根据DigitalPanelControl的DigitalControl的个数和所要显示的数据的长度，来决定显示的方式，数据过长则截断尾数，数据少于digital的个数，则填充左边digital

        /// <summary>
        /// 显示值
        /// </summary>
        /// <param name="value"></param>
        private void DisplayData(string value )
        {
            if (value == null)
                return;

            //准备字符
            List<string> showStringList = ConvertStringToSingleDigitalCharList(value);

            //显示文字
            if (digitalsList.Count < showStringList.Count)//要显示的字符个数大于显示器的个数，截断尾数
            {
                for (int i = 0; i < digitalsList.Count; i++)
                {
                    digitalsList[i].Value = showStringList[i];
                }
            }
            else//否则从显示器的低位开始填充
            {
                for(int i = 0; i < digitalsList.Count - showStringList.Count; i++)
                {
                    digitalsList[i].Value = null;
                }
                for(int i = digitalsList.Count - showStringList.Count; i < digitalsList.Count; i++)
                {
                    digitalsList[i].Value = showStringList[i - digitalsList.Count + showStringList.Count];
                }
            }
        }

        /// <summary>
        /// 将字符串转换成可显示的单个字符的集合
        /// </summary>
        /// <param name="value"></param>
        /// <returns></returns>
        private static List<string> ConvertStringToSingleDigitalCharList(string value)
        {
            char[] charArray = value.ToCharArray();
            List<string> showStringList = new List<string>();
            for (int i = 0; i < charArray.Length; i++)
            {
                if (i == charArray.Length - 1)//最后一位数字，直接复制
                {
                    showStringList.Add(charArray[i].ToString());
                    break;
                }
                if (charArray[i] >= '0' && charArray[i] <= '9' && charArray[i + 1] == '.')//带小数点数字，将小数点与数字放到同一个字符串里
                {
                    showStringList.Add(charArray[i] + ".");
                    i++;
                }
                else
                {
                    showStringList.Add(charArray[i].ToString());
                }
            }

            return showStringList;
        }

       最终的效果图：

      

源代码