HslControls组件库 工业控件库 曲线控件 时间控件 管道控件 温度计控件 阀门控件 传送带控件 进度条控件 电池控件 数码管控件等等

本篇博客主要对 HslControls 组件作一个大概的总览介绍,更详细的内容能够参照页面里的子连接,还有github上的源代码,而后进行相关的学习,和使用。html

 

Prepare


先从nuget下载到组件,而后就可使用组件里的各类组件信息了。git

 

在Visual Studio 中的NuGet管理器中能够下载安装,也能够直接在NuGet控制台输入下面的指令安装:github

Install-Package HslControls

  

NuGet安装教程  http://www.cnblogs.com/dathlin/p/7705014.htmldom

 

Demo


 

有一个demo程序能够下载,地址为 demo.zip工具

所支持的控件信息以下:学习

demo

 

Use


 

正常安装完成后,就会在组件库出现下面的控件内容,而后能够拖动使用,若是没有出现列表,就须要把dll文件拖动到工具箱就行。动画

 

 

经常使用控件


 

先上图:设计

pic1

 

1. 圆角按钮,主要是有一个圆角的效果,和自带的按钮基本差很少,还带有一个 Selected 属性,用于获取或设置按钮是否处于选中状态。3d

2. HslPlay 控件,有点像一个播放器,各类颜色可调,须要注意的是有个事件 OnPlayChanged  当播放状态改变的时候,就会触发(比onclick事件要好)。orm

3. 开关控件,主要实现两个状态的切换,上面有个属性能够设置文本 SwitchStatusDescription = "关;开";  用分号区别便可,也有个事件OnSwitchChanged能够用来作状态的改变。

 

 

进度条控件


 

 先上图

pic2

 

特性支持,属性以下:

共有两种进度条的样式,一个是矩形的,一个是圆角的。均可以设置,背景色,前景色,是否使用动画效果。动画的速度均可以设置。也能够竖着的控件摆放样式

 

信号灯控件


 

先上图

pic3

支持纯色的信号灯,和渐变色的信号灯,固然,咱们能够设置任意的颜色,根据本身的需求进行设计。

 

数码管控件


 

先上图

pic4

BackColor  就是整个LED的背景

DisplayBackColor 就是数据吗数字的背景

DisplayNumber  就是数码管显示的位数

DisplayText  就是最终显示的文本

ForeColor 就是最终显示文本的前景色

LedNumberSize  就是数码管单个显示的粗细

 

咱们能够随意拖动数码管的大小,而后设置显示的数据量大小,颜色,粗细等等细节。通常全部的参数调整好后,咱们使用 DisplayText  赋值就行。

 

时钟控件


 

先上图

pic6

主要的属性以下

ClockBackColor  就是时钟控件中间的背景色。

ForeColor  就是全部的文本的颜色

HourColor  就是小时那根针的颜色

IsSecondStep  设置秒针是否一秒一秒走动仍是连续走动。

MiniteColor 就是分钟的那根针的颜色

SecondColor 就是秒针的颜色

Text  就是在时钟上显示的额外的信息

 

曲线控件


 高级的历史曲线控件的使用参照另外一篇博客 http://www.javashuo.com/article/p-mjxsjqwi-db.html,这里是实时控件。

曲线控件比较麻烦一点,没法经过直接的配置添加曲线,须要代码来实现显示的逻辑功能,先上图

pic7

 

 

在使用前,先进行一些基本的设置信息,

IntervalAbscissaText  指示纵向的虚线方向的分割点数,若是为100,那就是每隔100个像素点绘制一条虚线

IsAbscissaStrech 若是设置为true,那么曲线就占满整个控件,好比强制这个曲线控件显示100个点,而无关控件的宽度。若是设置为true,那么控件显示的点数信息,将取决于控件的宽度界面。

IsRenderDashLine 是否显示虚线的辅助线。

IsRenderRightCoordinate 是否显示右侧的坐标轴

StrechDataCountMax   当IsAbscissaStrech 为true的时候,曲线控件强制规定的显示数据点数。这时候和控件无关。

TextAddFormat  获取或设置实时数据新增时文本相对应于时间的格式化字符串,默认HH:mm

Title   曲线控件显示的标题

ValueMaxLeft  左侧坐标轴的最大值

ValueMinLeft 左侧坐标轴的最小值

ValueMaxRight 右侧坐标轴的最大值

ValueMinRight  右侧坐标轴的最小值

ValueSegment 获取或设置图形的纵轴分段数

 

使用说明,先定义一个获取随机数据的方法

        private float[] GetRandomData( int length, int max )
        {
            float[] buffer = new float[length];
            for (int i = 0; i < buffer.Length; i++)
            {
                buffer[i] = random.Next( max );
            }
            return buffer;
        }

  

 

简单的设置固定的曲线

hslCurve1.SetCurveText( new string[] { "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二" } );
hslCurve1.SetLeftCurve( "A", GetRandomData( 12, 100 ), Color.Blue );

曲线标注:

            hslCurve1.SetCurveText( new string[] { "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二" } );
            hslCurve1.SetLeftCurve( "A", GetRandomData( 12, 100 ), Color.Blue );
            hslCurve1.AddMarkText( new HslControls.HslMarkText( )
            {
                Index = 2,
                CurveKey = "A",
                MarkText = "很给力"
            } );
            hslCurve1.AddMarkText( new HslControls.HslMarkText( )
            {
                Index = 5,
                CurveKey = "A",
                MarkText = "不太行了",
                TextBrush = Brushes.Red
            } );

标注的效果以下:

 

若是你想要显示一个实时的曲线信息,就要分两步走,先预设定曲线的基本信息,关键字,颜色,宽度,是否平滑等等信息

            hslCurve5.SetLeftCurve( "A", null, Color.DodgerBlue, true );
            hslCurve5.SetLeftCurve( "B", null, Color.DarkOrange, true );
            hslCurve5.SetLeftCurve( "C", null, Color.LimeGreen, true );

此处的例子就是设置了三条曲线,数据为空,颜色,和平滑效果

而后你实时读取到数据后,增长进曲线就好了。

hslCurve5.AddCurveData(
                new string[] { "A", "B", "C" },
                new float[]
                {
                    random1*10 + 80,
                    random2*20+50,
                    random2*30,
                }
            );

此处须要注意的是,若是你有三条曲线,就须要三条一块儿新增。

 

固然,本曲线控件支持双坐标,多曲线的显示状况。更多的信息,参照demo的源代码来开发。

 

仪表盘控件


 

上图

pic8

 

 这个是旧版的仪表盘,以下:

相关的属性点击属性标签就会在下方显示出来。

新版的以下:

pic9

 

 

 

管道控件


 

上图

pic10

 

直接拖出来的控件是横向的,若是想要拐角,须要设置属性

左端点和右端点的属性设置

 

瓶子控件


 

 上图

pic11

 

饼图控件


 

上图

pic13

 

传送带控件


 

上图

pic14

 

传送带滚筒


 

pic16

 

 

温度计控件


 

如图

pic18

 

 

鼓风机控件


 

如图:

pic19

 

阀门控件


 

pic20

 

 

电池控件


 

pic22

 

分类器控件


 

pic23

相关文章
相关标签/搜索