WPF自定义LED风格数字显示控件
前段时间做过一个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> /// <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;
}
WPF自定义LED风格数字显示控件的更多相关文章
- 【C#】wpf自定义calendar日期选择控件的样式
原文:[C#]wpf自定义calendar日期选择控件的样式 首先上图看下样式 原理 总览 ItemsControl内容的生成 实现 界面的实现 后台ViewModel的实现 首先上图,看下样式 原理 ...
- WPF 自定义ItemsControl/ListBox/ListView控件样式
一.前言 ItemsControl.ListBox.ListView这三种控件在WPF中都可作为列表信息展示控件.我们可以通过修改这三个控件的样式来展示我们的列表信息. 既然都是展示列表信息的控件,那 ...
- WPF 自定义TextBox带水印控件，可设置圆角
一.简单设置水印TextBox控件,废话不多说看代码: <TextBox TextWrapping="Wrap" Margin="10" Height=& ...
- 使WPF程序应用预置的控件风格, 如Aero, Luna, Royale, Classic等
原文:使WPF程序应用预置的控件风格, 如Aero, Luna, Royale, Classic等 WPF预设有Aero, Classic, Luna, Royale主题, WPF程序会根据 ...
- WPF自定义控件第一 - 进度条控件
本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路. 前期一个小任务需要实现一个类似含步骤进度条的控件.虽然对于XAML的了解还不是足够深入,还是摸索着做了一个.这篇文章介 ...
- Matlab安装记录 - LED Control Activex控件安装
Matlab安装记录-LED Control Activex控件安装 2013-12-01 22:06:36 最近在研究Matlab GUI技术,准备用于制作上位机程序:在Matlab GUI的技术 ...
- WPF Timeline简易时间轴控件的实现
原文:WPF Timeline简易时间轴控件的实现 效果图: 由于整个控件是实现之后才写的教程,因此这里记录的代码是最终实现后的,前后会引用到其他的一些依赖属性或者代码,需要阅读整篇文章. 1.确定T ...
- 获取 AlertDialog自定义的布局 的控件
AlertDialog自定义的布局 效果图: 创建dialog方法的代码如下: 1 LayoutInflater inflater = getLayoutInflater(); 2 View layo ...
- 使用VideoView自定义一个播放器控件
介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actv ...
随机推荐
- 【读书笔记与思考】Andrew 机器学习课程笔记
Andrew 机器学习课程笔记 完成 Andrew 的课程结束至今已有一段时间,课程介绍深入浅出,很好的解释了模型的基本原理以及应用.在我看来这是个很好的入门视频,他老人家现在又出了一门 deep l ...
- [React] Update Component State in React With Ramda Lenses
In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. ...
- Android JNI编程（一）——JNI概念以及C语言Dev-C++开发环境搭建、编写HelloWorld
版权声明:本文出自阿钟的博客,转载请注明出处:http://blog.csdn.net/a_zhon/. 目录(?)[+] 一:JNI是什么呢? JNI:JNI是JavaNative Interfac ...
- PDF编译出现错误解决的方法————————【Badboy】
额 今天 在编译PDF时发现使用了一下STL中的z数值极限居然编译只是. return GetRangeConstraint(value <= std::numeric_limits::max ...
- C++ 计算任意两个日期之间的天数
C++写的一个计算两个日期之间天数的小程序: #include <Windows.h> #include <stdio.h> struct tagDate { int year ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- mysql官网下载linux版本安装包
原文地址:点击打开链接 今天在Linux上部署项目,用到了Mysql,因此想要下载适用于Linux的安装版本,在Mysql官网找了半天,终于找到怎样下载了,这里写出来,以后大家找的时候就好找了. 第一 ...
- Double prefix overrides to provide 16-bit operand size in a 32/64 operating mode
A processor supports an operating mode in which the default address size is greater than 32 bits and ...
- 【计算机视觉】OpenCV中直方图处理函数简述
计算直方图calcHist 直方图是对数据集合的统计 ,并将统计结果分布于一系列提前定义的bins中.这里的数据不只指的是灰度值 ,统计数据可能是不论什么能有效描写叙述图像的特征. 如果有一个矩阵包括 ...
- Android自定义控件View（三）组合控件
不少人应该见过小米手机系统音量控制UI,一个圆形带动画效果的音量加减UI,效果很好看.它是怎么实现的呢?这篇博客来揭开它的神秘面纱.先上效果图 相信很多人都知道Android自定义控件的三种方式,An ...