本篇部落格主要對 HslControls 元件做一個大概的總覽介紹，更詳細的內容可以參照頁面裡的子連結，還有github上的原始碼，然後進行相關的學習，和使用。

 

Prepare

---

先從nuget下載到元件，然後就可以使用元件裡的各種元件資訊了。

 

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

Install-Package HslControls

　　

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

技術支援QQ群：群1：592132877（滿）  群2：948305931（元件的版本更新細節也將第一時間在群裡釋出）

如果你在使用控制元件的過程中有什麼疑問，或是發現了BUG，或是功能建議，等等都可以加入上面的QQ群進行討論。文章更新時間：2019年1月5日 16:51:41

 

Demo

---

 

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

所支援的控制元件資訊如下：

 

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  就是在時鐘上顯示的額外的資訊

 

曲線控制元件

---

 

曲線控制元件比較麻煩一點，無法通過直接的配置新增曲線，需要程式碼來實現顯示的邏輯功能，先上圖

 

 

在使用前，先進行一些基本的設定資訊，

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 );

　　

如果你想要顯示一個實時的曲線資訊，就要分兩步走，先預設定曲線的基本資訊，關鍵字，顏色，寬度，是否平滑等等資訊

            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的原始碼來開發。

 

儀表盤控制元件

---

 

上圖

 

 這個是舊版的儀表盤，如下：

相關的屬性點選屬性標籤就會在下方顯示出來。

新版的如下：

 

 

 

管道控制元件

---

 

上圖

 

直接拖出來的控制元件是橫向的，如果想要拐角，需要設定屬性

左端點和右端點的屬性設定

 

瓶子控制元件

---

 

 上圖

 

餅圖控制元件

---

 

上圖

 

傳送帶控制元件

---

 

上圖

 

傳送帶滾筒

---

 

 

 

溫度計控制元件

---

 

如圖

 

 

鼓風機控制元件

---

 

如圖：

 

閥門控制元件

---

 

 

 

電池控制元件

---

 

 

分類器控制元件

---