HZHControls最美的Winform開源控件庫

HZHControls說明

入行已經7,8年了，一直想做一套漂亮點的自定義控件，也沒有遇到一款類web話的控件，于是就有了這一套控件。

此控件集包含了常用的控件，以及一些在web上經常出現的控件，您使用此控件集可以快速的開發出一套web效果的C/S系統。

HZHControls是基于.Net Framework4.0原生控件開發的一套控件，你不需要擔心有其他控件或版權問題。

HZHControls是完全開源的一套控件，你可以根據自己的需求去調整功能。

HZHControls是對觸屏操作具有友好支援的一套控件。

HZHControls是一套漂亮的易用的控件。

介紹

c#winform自定義控件，對觸屏具有更好的操作支援，項目是基于framework4.0，完全原生控件開發，沒有使用任何第三方控件，你可以放心的用在你的項目中。

HZHControls介紹

2.1 控件

• 2.1.1 表單控件
• 2.1.2 按鈕
• 2.1.3 頁籤
• 2.1.4 樹
• 2.1.5 平鋪清單
• 2.1.6 導航
• 2.1.7 橫向清單
• 2.1.8 自定義表格
• 2.1.9 進度條
• 2.1.10 步驟控件
• 2.1.11 面包屑導航
• 2.1.12 文字提示
• 2.1.13 滾動文字
• 2.1.14 滑塊
• 2.1.15 水波
• 2.1.16 面闆
• 2.1.17 圖示
• 2.1.18 滾動條
• 2.1.19 圖檔采樣
• 2.1.20 時間軸
• 2.1.21 穿梭框
• 2.1.22 引用區塊
• 2.1.23 表單驗證
• 2.1.24 分割線标簽

2.2 窗體

• 2.2.1 提示窗體
• 2.2.2 多輸入窗體
• 2.2.3 等待視窗

2.3 圖表

• 2.3.1 組織結構圖
• 2.3.2 滾動圖表
• 2.3.3 雷達圖
• 2.3.4 金字塔圖
• 2.3.5 Live Charts

2.4 工業控件

• 2.4.1 LED文字
• 2.4.2 儀表
• 2.4.3 管道
• 2.4.4 閥門
• 2.4.5 鼓風機
• 2.4.6 傳送帶
• 2.4.7 警示燈
• 2.4.8 箭頭
• 2.4.9 溫度計

HZHControls界面

以下列出内容僅為部分控件，更多控件效果，請下載下傳源碼檢視Demo運作效果！           

樣例

1、提示窗效果圖

if (FrmDialog.ShowDialog(this, "是否再顯示一個沒有取消按鈕的提示框？", "模式窗體測試", true) == System.Windows.Forms.DialogResult.OK)
{
    FrmDialog.ShowDialog(this, "這是一個沒有取消按鈕的提示框", "模式窗體測試");
}           

2、多輸入窗體

FrmInputs frm = new FrmInputs("動态多輸入窗體測試",
                new string[] { "姓名", "電話", "身份證号", "住址" },
                new Dictionary<string, HZH_Controls.TextInputType>() { { "電話", HZH_Controls.TextInputType.Regex }, { "身份證号", HZH_Controls.TextInputType.Regex } },
                new Dictionary<string, string>() { { "電話", "^1\\d{10}#34; }, { "身份證号", "^\\d{18}#34; } },
                new Dictionary<string, KeyBoardType>() { { "電話", KeyBoardType.UCKeyBorderNum }, { "身份證号", KeyBoardType.UCKeyBorderNum } },
                new List<string>() { "姓名", "電話", "身份證号" });
frm.ShowDialog(this);           

/// <summary>
/// 功能描述:構造函數
/// 作　　者:HZH
/// 建立日期:2019-08-05 10:57:26
/// 任務編号:POS
/// </summary>
/// <param name="strTitle">窗體标題</param>
/// <param name="args">輸入項名稱</param>
/// <param name="inTypes">輸入項對應輸入類型，key:輸入項名稱，如不設定預設不控制輸入</param>
/// <param name="regexs">輸入項對應正則規則，當imTypes=Regex時有效，key:輸入項名稱，如不設定預設不控制輸入</param>
/// <param name="keyBoards">文本框鍵盤，key:輸入項名稱，如不設定預設英文鍵盤</param>
/// <param name="mastInputs">必填輸入項名稱</param>
/// <param name="defaultValues">輸入項預設值，key:輸入項名稱</param>
public FrmInputs(
    string strTitle,
    string[] inPutLabels,
    Dictionary<string, TextInputType> inTypes = null,
    Dictionary<string, string> regexs = null,
    Dictionary<string, HZH_Controls.Controls.KeyBoardType> keyBoards = null,
    List<string> mastInputs = null,
    Dictionary<string, string> defaultValues = null)           

3、Temp1窗體

//建立窗體FrmTemp1Test繼承HZH_Controls.Forms.FrmTemp1
FrmTemp1Test frm = new FrmTemp1Test();
frm.ShowDialog(this);           

4、有确定取消的窗體1

//建立窗體FrmOKCancel1Test繼承HZH_Controls.Forms.FrmWithOKCancel1
FrmOKCancel1Test frm = new FrmOKCancel1Test();
frm.ShowDialog(this);           

5、有确定取消的窗體2

//建立窗體FrmOKCancel2Test繼承HZH_Controls.Forms.FrmWithOKCancel2
FrmOKCancel2Test frm = new FrmOKCancel2Test();
frm.ShowDialog(this);           

6、單标題窗體

//建立窗體FrmWithTitleTest繼承HZH_Controls.Forms.FrmWithTitle
FrmWithTitleTest frm = new FrmWithTitleTest();
frm.ShowDialog(this);           

7、控件

文本框鍵盤效果

手寫輸入需要搜狗的手寫支援，請複制HandInput檔案夾到運作目錄下

時間控件效果

下拉清單資料綁定

//使用方法同原生ComboBox類似
List<KeyValuePair<string, string>> lstCom = new List<KeyValuePair<string, string>>();
for (int i = 0; i < 5; i++)
{
    lstCom.Add(new KeyValuePair<string, string>(i.ToString(), "選項" + i));
}

this.ucComboBox1.Source = lstCom;
this.ucComboBox2.Source = lstCom;
this.ucComboBox1.SelectedIndex = 1;
this.ucComboBox2.SelectedIndex = 1;           

樹資料綁定

//使用方法同原生Treeview相同，設定屬性IsShowByCustomModel=true則啟用自定義模式，否則為原始樹
for (int i = 0; i < 5; i++)
{
    TreeNode tn = new TreeNode("  父節點" + i);
    for (int j = 0; j < 5; j++)
    {
        tn.Nodes.Add("    子節點" + j);
    }
    this.treeViewEx1.Nodes.Add(tn);
}           

清單資料綁定

//可自定義顔色字型等
List<ListEntity> lst = new List<ListEntity>();
for (int i = 0; i < 5; i++)
{
    lst.Add(new ListEntity()
    {
        ID = i.ToString(),
        Title = "選項" + i,
        ShowMoreBtn = true,
        Source = i
    });
}
this.ucListExt1.SetList(lst);           

橫向清單資料綁定

List<KeyValuePair<string, string>> lstHL = new List<KeyValuePair<string, string>>();
for (int i = 0; i < 30; i++)
{
    lstHL.Add(new KeyValuePair<string, string>(i.ToString(), "選項" + i));
}

this.ucHorizontalList1.DataSource = lstHL;           

8、Datagridview

List<DataGridViewColumnEntity> lstCulumns = new List<DataGridViewColumnEntity>();
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "ID", HeadText = "編号", Width = 70, WidthType = SizeType.Absolute });
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Name", HeadText = "姓名", Width = 50, WidthType = SizeType.Percent });
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Age", HeadText = "年齡", Width = 50, WidthType = SizeType.Percent });
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Birthday", HeadText = "生日", Width = 50, WidthType = SizeType.Percent, Format = (a) => { return ((DateTime)a).ToString("yyyy-MM-dd"); } });
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Sex", HeadText = "性别", Width = 50, WidthType = SizeType.Percent, Format = (a) => { return ((int)a) == 0 ? "女" : "男"; } });
this.ucDataGridView1.Columns = lstCulumns;
this.ucDataGridView1.IsShowCheckBox = true;
List<object> lstSource = new List<object>();
for (int i = 0; i < 20; i++)
{
    TestModel model = new TestModel()
    {
        ID = i.ToString(),
        Age = 3 * i,
        Name = "姓名——" + i,
        Birthday = DateTime.Now.AddYears(-10),
        Sex = i % 2
    };
    lstSource.Add(model);
}

this.ucDataGridView1.DataSource = lstSource;
this.ucDataGridView1.First();           

當使用分頁控件時，不再需要指定DataSource資料源屬性，隻需要指定翻頁控件的DataSource屬性即可

如果預置的表格行無法滿足你的需求，你還可以自定義行控件，具體做法為：

1. 新增自定義控件，實作接口IDataGridViewRow
2. 參照UCDataGridViewRow實作你自定義的行
3. 設定datagridview的RowType屬性即可

Page屬性定義了翻頁控件，如果UCPagerControl不滿足你的需求，請自定義翻頁控件并繼承UCPagerControlBase， 當為空時不啟用翻頁控件，當啟用翻頁控件時每頁将顯示适當的資料，不再出現滾動條。

9、翻頁控件

另一種分頁控件樣式

List<DataGridViewColumnEntity> lstCulumns = new List<DataGridViewColumnEntity>();
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "ID", HeadText = "編号", Width = 70, WidthType = SizeType.Absolute });
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Name", HeadText = "姓名", Width = 50, WidthType = SizeType.Percent });
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Age", HeadText = "年齡", Width = 50, WidthType = SizeType.Percent });
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Birthday", HeadText = "生日", Width = 50, WidthType = SizeType.Percent, Format = (a) => { return ((DateTime)a).ToString("yyyy-MM-dd"); } });
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Sex", HeadText = "性别", Width = 50, WidthType = SizeType.Percent, Format = (a) => { return ((int)a) == 0 ? "女" : "男"; } });
this.ucDataGridView1.Columns = lstCulumns;
this.ucDataGridView1.IsShowCheckBox = true;
List<object> lstSource = new List<object>();
for (int i = 0; i < 20; i++)
{
    TestModel model = new TestModel()
    {
        ID = i.ToString(),
        Age = 3 * i,
        Name = "姓名——" + i,
        Birthday = DateTime.Now.AddYears(-10),
        Sex = i % 2
    };
    lstSource.Add(model);
}

UCPagerControl page = new UCPagerControl();
//UCPagerControl2 page = new UCPagerControl2();
page.DataSource = lstSource;
this.ucDataGridView1.Page = page;
this.ucDataGridView1.First();           

如果UCPagerControl不滿足你的需求，請自定義翻頁控件并繼承UCPagerControlBase，比如改變樣式，增加邏輯等等

如果需要下标從10開始的一頁資料，可以設定StartIndex=10，然後調用GetCurrentSource（）即可，用法如下：

m_page.DataSource=lstSource;
m_page.PageSize = ShowCount;
m_page.StartIndex=10;
this.dgv.DataSource = m_page.GetCurrentSource();           

翻頁控件可用于任何清單形式的控件，以上代碼示例僅以datagridview說明用法,用法如下：

1. 設定屬性DataSource資料源
2. 設定屬性PageSize每頁顯示資料量
3. 設定時間ShowSourceChanged，在時間中向目标控件設定目前頁資料源
4. 如果頁面加載後沒有顯示第一頁資料，可以手動調用一下GetCurrentSource（）并指派給目标控件即可，例如：

m_page.DataSource=lstSource;
m_page.PageSize = ShowCount;
this.dgv.DataSource = m_page.GetCurrentSource();           

10、氣泡提示效果圖(5種内置及自定義樣式)

FrmTips.ShowTipsError(this, "Error提示資訊");
FrmTips.ShowTipsInfo(this, "Info提示資訊");
FrmTips.ShowTipsSuccess(this, "Success提示資訊");
FrmTips.ShowTipsWarning(this, "Warning提示資訊");
/*自定義可使用      
public static FrmTips ShowTips(
            Form frm,
            string strMsg,
            int intAutoColseTime = 0,
            bool blnShowCoseBtn = true,
            ContentAlignment align = ContentAlignment.BottomLeft,
            Point? point = null,
            TipsSizeMode mode = TipsSizeMode.Small,
            Size? size = null,
            TipsState state = TipsState.Default)
*/           

11、多線程操作等待

//此窗體一般用在耗時線程操作時顯示等待動圖，如下為多線程耗時操作時樣例
ControlHelper.ThreadRunExt(this, () =>
{
    Thread.Sleep(5000);
    ControlHelper.ThreadInvokerControl(this, () =>
    {
        FrmTips.ShowTipsSuccess(this, "FrmWaiting測試");
    });
}, null, this);
//ControlHelper.ThreadRunExt為開啟一個線程執行任務
//ControlHelper.ThreadInvokerControl為異步委托 調用控件           

/// <summary>
/// 使用一個線程執行一個操作
/// </summary>
/// <param name="parent">父控件</param>
/// <param name="func">執行内容</param>
/// <param name="callback">執行後回調</param>
/// <param name="enableControl">執行期間禁用控件清單</param>
/// <param name="blnShowSplashScreen">執行期間是否顯示等待提示</param>
/// <param name="strMsg">執行期間等待提示内容，預設為“正在處理，請稍候...”</param>
/// <param name="intSplashScreenDelayTime">延遲顯示等待提示時間</param>
public static void ThreadRunExt(
    Control parent,
    Action func,
    Action<object> callback,
    Control[] enableControl = null,
    bool blnShowSplashScreen = true,
    string strMsg = null,
    int intSplashScreenDelayTime = 200)           

12、菜單導航控件

List<MenuItemEntity> lstMenu = new List<MenuItemEntity>();
for (int i = 0; i < 5; i++)
{
    MenuItemEntity item = new MenuItemEntity()
    {
        Key = "p" + i.ToString(),
        Text = "菜單項" + i,
        DataSource = "這裡編寫一些自定義的資料源，用于擴充"
    };
    item.Childrens = new List<MenuItemEntity>();
    for (int j = 0; j < 5; j++)
    {
        MenuItemEntity item2 = new MenuItemEntity()
        {
            Key = "c" + i.ToString(),
            Text = "菜單子項" + i + "-" + j,
            DataSource = "這裡編寫一些自定義的資料源，用于擴充"
        };
        item.Childrens.Add(item2);
    }
    lstMenu.Add(item);
}
this.ucMenu1.DataSource = lstMenu;           

如果預置的樣式無法滿足你的需求，你還可以自定義節點控件，具體做法為：

1. 新增自定義控件，實作接口IMenuItem，可分别定義父節點和子節點
2. 參照UCMenuChildrenItem或UCMenuParentItem實作你自定義的節點
3. 設定UCMenu的父節點ParentItemType屬性和子節點ChildrenItemType屬性即可

如果要修改節點樣式，比如背景色等，可使用UCMenu的ParentItemStyles或ChildrenItemStyles，比如

this.ucMenu1.ParentItemStyles = new Dictionary<string, object>() { {"BackColor",Color.Red } }; 
this.ucMenu1.ChildrenItemStyles = new Dictionary<string, object>() { {"BackColor",Color.Yellow } };            

菜單預設顯示樣式為Fill，當菜單項較多時會導緻子項無法顯示，此時你應修改菜單樣式為Top即可

this.ucMenu1.MenuStyle = MenuStyle.Top;            

13、按鈕組

ucBtnsGroup1.DataSource = new Dictionary<string, string>() { { "1", "男" }, { "0", "女" } };
ucBtnsGroup2.IsMultiple = true;
ucBtnsGroup2.DataSource = new Dictionary<string, string>() { { "1", "河南" }, { "2", "北京" }, { "3", "湖南" }, { "4", "上海" } };
ucBtnsGroup2.SelectItem = new List<string>() { "2","3"};           

14、Tab頁

15、步驟控件

16、有标題的面闆

17、進度條

進度條支援圓環或扇形顯示，支援百分比和數值顯示

18、面包屑導航

19、開關

20、ListView

ListView的項元素提供了接口實作，當你覺得我寫的子項并不能滿足你的需求的時候，你可以添加一個控件，實作接口，然後将你的控件指定給Listview的屬性ItemType即可了。

同樣的，我也提供了翻頁控件，屬性Page，隻要是繼承UCPagerControlBase的翻頁控件都可以相容哦，當然你也可以不用翻頁控件。

看一下調用吧

List<object> lstSource = new List<object>();
for (int i = 0; i < 200; i++)
{
    lstSource.Add("項-" + i);
}
//使用分頁控件
var page = new UCPagerControl2();
page.DataSource = lstSource;
this.ucListView1.Page = page;
//不使用分頁控件
//this.ucListView1.DataSource = lstSource;           

21、水波

22、波形圖表

//timer事件中定時随機添加數字
Random r = new Random();
int i = r.Next(100, 1000);
this.ucWaveWithSource1.AddSource(i.ToString(), i);           

23、樹表格

private void FrmTemp1Test_Load(object sender, EventArgs e)
        {
            this.ucDataGridView1.RowType = typeof(UCDataGridViewTreeRow);
            this.ucDataGridView1.IsAutoHeight = true;

            List<DataGridViewColumnEntity> lstCulumns = new List<DataGridViewColumnEntity>();
            lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "ID", HeadText = "編号", Width = 70, WidthType = SizeType.Absolute });
            lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Name", HeadText = "姓名", Width = 50, WidthType = SizeType.Percent });
            lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Age", HeadText = "年齡", Width = 50, WidthType = SizeType.Percent });
            lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Birthday", HeadText = "生日", Width = 50, WidthType = SizeType.Percent, Format = (a) => { return ((DateTime)a).ToString("yyyy-MM-dd"); } });
            lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Sex", HeadText = "性别", Width = 50, WidthType = SizeType.Percent, Format = (a) => { return ((int)a) == 0 ? "女" : "男"; } });
            this.ucDataGridView1.Columns = lstCulumns;
            this.ucDataGridView1.IsShowCheckBox = true;
            List<object> lstSource = new List<object>();
            for (int i = 0; i < 200; i++)
            {
                TestModel model = new TestModel()
                {
                    ID = i.ToString(),
                    Age = 3 * i,
                    Name = "姓名——" + i,
                    Birthday = DateTime.Now.AddYears(-10),
                    Sex = i % 2
                };
                lstSource.Add(model);
                AddChilds(model, 5);
            }

            var page = new UCPagerControl2();
            page.DataSource = lstSource;
            this.ucDataGridView1.Page = page;
            this.ucDataGridView1.First();
        }

        private void AddChilds(TestModel tm, int intCount)
        {
            if (intCount <= 0)
                return;
            tm.Childrens = new List<TestModel>();
            for (int i = 0; i < 5; i++)
            {
                TestModel model = new TestModel()
                {
                    ID = i.ToString(),
                    Age = 3 * i,
                    Name = intCount + "——" + i,
                    Birthday = DateTime.Now.AddYears(-10),
                    Sex = i % 2
                };
                tm.Childrens.Add(model);
                AddChilds(model, intCount - 1);
            }
        }           

24、表格下拉框

List<DataGridViewColumnEntity> lstCulumns = new List<DataGridViewColumnEntity>();
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "ID", HeadText = "編号", Width = 70, WidthType = SizeType.Absolute });
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Name", HeadText = "姓名", Width = 100, WidthType = SizeType.Absolute });
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Age", HeadText = "年齡", Width = 100, WidthType = SizeType.Absolute });
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Birthday", HeadText = "生日", Width = 120, WidthType = SizeType.Absolute, Format = (a) => { return ((DateTime)a).ToString("yyyy-MM-dd"); } });
lstCulumns.Add(new DataGridViewColumnEntity() { DataField = "Sex", HeadText = "性别", Width = 100, WidthType = SizeType.Absolute, Format = (a) => { return ((int)a) == 0 ? "女" : "男"; } });
this.ucComboxGrid1.GridColumns = lstCulumns;
List<object> lstSourceGrid = new List<object>();
for (int i = 0; i < 100; i++)
{
    TestModel model = new TestModel()
    {
        ID = i.ToString(),
        Age = 3 * i,
        Name = "姓名——" + i,
        Birthday = DateTime.Now.AddYears(-10),
        Sex = i % 2
    };
    lstSourceGrid.Add(model);
}
this.ucComboxGrid1.GridDataSource = lstSourceGrid;           

25、滑塊

26、文字提示（toolTips）

HZH_Controls.Forms.FrmAnchorTips.ShowTips(button1, "測試提示資訊\nLEFT", AnchorTipsLocation.LEFT);
HZH_Controls.Forms.FrmAnchorTips.ShowTips(button1, "測試提示資訊\nRIGHT", AnchorTipsLocation.RIGHT);
HZH_Controls.Forms.FrmAnchorTips.ShowTips(button1, "測試提示資訊\nTOP", AnchorTipsLocation.TOP);
HZH_Controls.Forms.FrmAnchorTips.ShowTips(button1, "測試提示資訊\nBOTTOM", AnchorTipsLocation.BOTTOM);           

26、LED數字

27、滾動文字

28、儀表

29、管道

30、瓶子

31、傳送帶

32、管道閥門

33、鼓風機

34、信号燈

35、警燈

36、溫度計

37、組織架構圖

38、圖示

39、柱狀圖

40、餅狀圖

40、折線圖

41、雷達圖

42、資源加載窗體

43、金字塔圖

44、控件水印元件

45、表單驗證元件

46、采樣控件

注意觀察控件交叉的地方，沒有遮擋。
控件根據設定的驅動裁剪有效工作區域來實作無遮擋。           

47、倒影元件

48、導航菜單

49、分隔标簽線

50、時間軸

51、穿梭框

52、引用區塊

最後的話

喜歡的話，多給鼓勵！