前言
大家好,我是新閣教育韓工,前幾天在網上看到了一個比較好看的環形控件,今天我們來嘗試使用GDI+的方式來繪制一下。
創建項目
上位機開發中,自定義控件庫其實本質上就是一個類庫,所以我們在創建項目時直接創建類庫項目。
在創建好的類庫項目中添加“用戶控件”。
實現思路
整個控件其實是由四個部分組成的。第一個部分為一個固定顏色的底圓,第二部分是一個漸變色的扇形,第三部分是一個顏色與窗體背景色相同的上圓,第四部分是顯示百分比的文字。最后將這四個部分疊加起來就得到了我們最終想要得到的控件。
實現過程
1.繪制准備
C#代碼實現:在用戶控件中添加代碼,我們使用OnPaint事件來繪制控件,通過參數 e 來獲取畫布。並給畫布設置一些屬性。

2.繪制底圓
C#代碼實現:我們在事件中繼續添加一些代碼,使用畫布的FillEllipse()方法繪制一個底圓,底圓的大小依照整個控件的大小創建。

測試效果如下:
3.繪制扇形
C#代碼實現:首先創建屬性與字段,以便使用屬性來控制扇形的區域,使得扇形的區域是可變的。

繪制扇形的大小與底圓的大小相一致,顏色采用漸變色。
//繪制扇形
Rectangle rectangle2 = new Rectangle(1, 1, this.Width - 2, this.Height - 2);
LinearGradientBrush brush2 = new LinearGradientBrush(rectangle2, Color.Blue, Color.Red, 150.0f, true);
this.PercentVal = (ActureValue / MaxValue) * 100;
graphics.FillPie(brush2, rectangle2, -90, (ActureValue / MaxValue) * 360f);
測試效果如下:
4.繪制上圓
C#代碼實現:繪制上圓比較簡單,大小比底圓稍小,位置在整個控件中心,顏色與控件顏色相同。

測試效果如下:
5.繪制文字
C#代碼實現:最后在控件的中心位置繪制文字

測試效果如下:
總結
經過大致五個步驟就可以使用GDI+的方式來繪制出一個好看的顯示百分比的環形控件,希望可以給大家一些啟發。
上位機開發中,GDI+控件經常需要用到,歡迎大家來新閣教育學習,我是韓老師,用我的專業,成就你的夢想!