HslControls組件庫工業控件庫曲線控件時間控件管道控件溫度計控件閥門控件傳送帶控件進度條控件電池控件數碼管控件等等

本文轉載自查看原文 2019-01-05 20:47 4437 HslControls組件庫

本篇博客主要對 HslControls 組件做一個大概的總覽介紹，更詳細的內容可以參照頁面里的子鏈接，還有github上的源代碼，然后進行相關的學習，和使用。

聯系作者及加群方式（激活碼在群里發放）：http://www.hslcommunication.cn/Cooperation

Prepare

先從nuget下載到組件，然后就可以使用組件里的各種組件信息了。

在Visual Studio 中的NuGet管理器中可以下載安裝，也可以直接在NuGet控制台輸入下面的指令安裝：

Install-Package HslControls

NuGet安裝教程 http://www.cnblogs.com/dathlin/p/7705014.html

Demo

有一個demo程序可以下載，地址為 demo.zip

所支持的控件信息如下：

demo

Use

正常安裝完成后，就會在組件庫出現下面的控件內容，然后可以拖動使用，如果沒有出現列表，就需要把dll文件拖動到工具箱就行。

常用控件

先上圖：

1. 圓角按鈕，主要是有一個圓角的效果，和自帶的按鈕基本差不多，還帶有一個 Selected 屬性，用於獲取或設置按鈕是否處於選中狀態。

2. HslPlay 控件，有點像一個播放器，各種顏色可調，需要注意的是有個事件 OnPlayChanged 當播放狀態改變的時候，就會觸發（比onclick事件要好）。

3. 開關控件，主要實現兩個狀態的切換，上面有個屬性可以設置文本 SwitchStatusDescription = "關;開"; 用分號區別即可，也有個事件OnSwitchChanged可以用來做狀態的改變。

進度條控件

先上圖

特性支持，屬性如下：

共有兩種進度條的樣式，一個是矩形的，一個是圓角的。都可以設置，背景色，前景色，是否使用動畫效果。動畫的速度都可以設置。也可以豎着的控件擺放樣式

信號燈控件

先上圖

支持純色的信號燈，和漸變色的信號燈，當然，我們可以設置任意的顏色，根據自己的需求進行設計。

數碼管控件

先上圖

BackColor 就是整個LED的背景

DisplayBackColor 就是數據嗎數字的背景

DisplayNumber 就是數碼管顯示的位數

DisplayText 就是最終顯示的文本

ForeColor 就是最終顯示文本的前景色

LedNumberSize 就是數碼管單個顯示的粗細

我們可以隨意拖動數碼管的大小，然后設置顯示的數據量大小，顏色，粗細等等細節。一般所有的參數調整好后，我們使用 DisplayText 賦值就行。

時鍾控件

先上圖

主要的屬性如下

ClockBackColor 就是時鍾控件中間的背景色。

ForeColor 就是所有的文本的顏色

HourColor 就是小時那根針的顏色

IsSecondStep 設置秒針是否一秒一秒走動還是連續走動。

MiniteColor 就是分鍾的那根針的顏色

SecondColor 就是秒針的顏色

Text 就是在時鍾上顯示的額外的信息

曲線控件

高級的歷史曲線控件的使用參照另一篇博客 https://www.cnblogs.com/dathlin/p/10291327.html，這里是實時控件。

曲線控件比較麻煩一點，無法通過直接的配置添加曲線，需要代碼來實現顯示的邏輯功能，先上圖

在使用前，先進行一些基本的設置信息，

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的源代碼來開發。