程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> Visual Basic語言 >> VB.NET >> 利用VB2005制作顏色漸變的進度條

利用VB2005制作顏色漸變的進度條

編輯:VB.NET

現在Windows環境下的應用程序經常要用到進度條,用以指示出一些復雜進程的運行狀態。目前我們在窗體設計時,使用的都是單色進度條。本文講述在WindowsXP環境下,使用VB2005制作一個漂亮的顏色 漸變的進度條組件。

一.技術細節

這種進度條的顯示相當於使用許多顏色相近的“ 畫筆”在窗體上繪制方框。這些“畫筆”就相當於一個畫筆數組。首先要建立顏色數組 ,初始的時候放入一些顏色值,然後根據平滑度的設置來重新設置顏色數組。依次取出顏色數組中兩個 相鄰的顏色值,計算這兩個顏色經過混合後的顏色,再放入到兩個顏色的中間。例子中顏色數組中有8種 顏色。平滑度的值從0開始循環,最高是7。每經過一次循環,顏色數組中就增加了一些過渡顏色。平滑 度設置的越大,則顏色過渡的越柔和。產生的效果越漂亮。顏色數組生成之後,畫筆數組就確定了。它 的大小和顏色數組一致。有了畫筆數組,下面的問題就是在窗體上進行繪圖操作了。

二、實現原理

在繪圖操作之前。所以要重載基類中的窗體的消息處理事件WndProc,窗體大小變化事件 OnResize和窗體重繪事件OnPaint。加入以下屬性設置:

Minimum。表示進度條的最小值。默認是 0 。

Maximum。表示進度條的最大值。默認是 100 。

Value。表示了進度條的當前值。默 認是 0 。

Smoothness。表示了進度條顏色漸變的平滑度。默認是 0 。

在初始化的時候 ,設置了以上四個屬性後,相應的畫筆數組產生了。當前值的每次改變都要觸發OnPaint事件。觸發事件 後,首先繪制進度條的外部邊框,接著得到內部邊框的總寬度和高度。根據當前值,最小值和最大值計 算完成百分比,由完成百分比乘以總寬度得到當前值占用的寬度。總寬度除以畫筆數組的個數得到每個 畫筆所占用的寬度。然後就是從初始寬度循環到當前值占用的寬度,從畫筆數組中依次使用畫筆按照每 個畫筆所占用的寬度和高度填充顏色。循環結束後,如果百分比為100%。則使用畫筆數組中的最後一個 畫筆繪制顏色。進度條顯示完畢。

三、實現步驟

打開VS2005,點擊“文件” 下的“新建項目”,在打開的窗體中,“項目類型”選擇“Visual Basic”。“模板”選擇“Windows 控件庫”。在左下角,“名稱 ”改為“GradientProcessBar”。按下“確定”按鈕,新建工程。在 “解決方案資源管理器”窗口中,將文件名UserControl1.vb 改為 GradientProcessBar.vb 。將下面完整的代碼加入到GradientProcessBar.vb文件中。

Option Strict On

Option Explicit On

Imports System.Drawing

Imports System.Windows.Forms

Public Class GradientProcessBar

    Inherits UserControl

    Public Const MinSmoothness As Integer = 0   '最小平滑度

    Public Const MaxSmoothness As Integer = 7   '最大平滑度

    Private Const BorderWidth As Integer = 2    '邊界寬度

    Private lstDefault As List(Of Color)        '顏色數組

    Private lstBrushes As List(Of SolidBrush)   '畫筆數組

    Private m_Value As Integer = 0      '當前進度值

    Private m_Minimum As Integer = 0     '最小進度值

    Private m_Maximum As Integer = 100  '最大進度值

    Private m_Smoothness As Integer = 0 '平滑度

    ' 進度值設置

    Public Property Value() As Integer

        Get

            Return m_Value

        End Get

        Set(ByVal value As Integer)

            m_Value = value

            If m_Value < m_Minimum Then m_Value = m_Minimum

            If m_Value > m_Maximum Then m_Value = m_Maximum

            Me.Invalidate(False)

        End Set

    End Property

    '最小值設置

    Public Property Minimum() As Integer

        Get

             Return m_Minimum

        End Get

        Set(ByVal value As Integer)

            m_Minimum = value

            If m_Minimum > m_Maximum Then Swap(m_Minimum, m_Maximum)

            If m_Value < m_Minimum Then m_Value = m_Minimum

             Me.Invalidate(False)

        End Set

    End Property

    '最大值設置

    Public Property Maximum() As Integer

        Get

            Return m_Maximum

        End Get

        Set(ByVal value As Integer)

            m_Maximum = value

             If m_Minimum > m_Maximum Then Swap(m_Minimum, m_Maximum)

             If m_Value > m_Maximum Then m_Value = m_Maximum

             Me.Invalidate(False)

        End Set

    End Property

    '平滑度設置

    Public Property Smoothness() As Integer

        Get

            Return m_Smoothness

        End Get

        Set(ByVal value As Integer)

            If value < GradientProcessBar.MinSmoothness Then value = MinSmoothness

            If value > GradientProcessBar.MaxSmoothness Then value = MaxSmoothness

             m_Smoothness = value

            BuildColorList(lstDefault)

            Me.Invalidate(False)

        End Set

    End Property

    '交換值

    Private Sub Swap(ByRef val1 As Integer, ByRef val2 As Integer)

        Dim temp As Integer

        temp = val1

        val1 = val2

        val2 = temp

    End Sub

    Public Sub New()

        InitializeComponent()

        Me.BorderStyle = Windows.Forms.BorderStyle.Fixed3D  '設置窗體為凹陷的效果

        '最簡單的實現雙緩沖繪圖

        'AllPaintingInWmPaint 忽略系統消息,防止圖像閃爍

        'DoubleBuffer 設置雙緩沖,防止圖像抖動

        'UserPaint 自己為 控件做所有的繪圖操作

        'Opaque 使窗體繪制時,不繪制背景

        Me.SetStyle(ControlStyles.AllPaintingInWmPaint Or ControlStyles.UserPaint Or ControlStyles.DoubleBuffer Or ControlStyles.Opaque, True)

        '更新風格

        Me.UpdateStyles()

        '新 建顏色列表,加入紅色,桔黃色,黃色,綠色,藍綠色,藍色,深藍色,紫色

         lstDefault = New List(Of Color)

        lstDefault.Add(Color.Red)

        lstDefault.Add(Color.Orange)

        lstDefault.Add(Color.Yellow)

        lstDefault.Add(Color.Green)

        lstDefault.Add(Color.Cyan)

        lstDefault.Add (Color.Blue)

        lstDefault.Add(Color.Indigo)

         lstDefault.Add(Color.Violet)

        Value = Minimum

    End Sub

    '將兩個顏色值混合成一個新的顏色。

    Private Function MixColors(ByVal color1 As Color, ByVal color2 As Color) As Color

         Return Color.FromArgb(CInt((CInt(color1.R) + CInt(color2.R)) / 2), CInt((CInt (color1.G) + CInt(color2.G)) / 2), CInt((CInt(color1.B) + CInt(color2.B)) / 2))

    End Function

    '建立顏色數組和畫筆數組

    Private Sub BuildColorList(ByRef lstAdd As List(Of Color))

        Dim c As Color

        Dim lstColors As New List(Of Color)

         lstBrushes = New List(Of SolidBrush)

        For Each c In lstAdd

            lstColors.Add(c)

        Next

        Dim idx As Integer '顏色數組索引

        Dim cnt As Integer '顏色數組長度

        Dim sdc As Integer '平滑度索引

        '根據平衡度的不同創建顏色數組

        For sdc = 0 To m_Smoothness Step 1

            idx = 0

             cnt = lstColors.Count - 1

            While idx < cnt

                lstColors.Insert(idx + 1, MixColors (lstColors(idx), lstColors(idx + 1)))

                idx += 2

                cnt += 1

            End While

        Next sdc

        '根據顏色數組創建畫 筆數組

        For Each c In lstColors

            lstBrushes.Add(New SolidBrush(c))

        Next

    End Sub

    '重載消息處理事件。

    Protected Overrides Sub WndProc(ByRef m As System.Windows.Forms.Message)

        If m.Msg = &H14 Then

            Return

        End If

        MyBase.WndProc(m)

    End Sub

    ' 重載窗口寸改變事件

    Protected Overrides Sub OnResize(ByVal e As System.EventArgs)

        MyBase.OnResize(e)

        Me.Invalidate(False)

    End Sub

    '重載窗口繪制事件

    Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)

        MyBase.OnPaint(e)

        '繪制外框

        e.Graphics.FillRectangle(New SolidBrush(Me.BackColor), Me.ClientRectangle)

        '完成百分比

        Dim percentComplete As Single = CSng((m_Value - m_Minimum) / (m_Maximum - m_Minimum))

        If percentComplete <= 0.0F Then Exit Sub

        If percentComplete > 1.0F Then percentComplete = 1.0F

        Dim fullWidth As Single

        '總寬度

        fullWidth = CSng(Me.ClientRectangle.Width - BorderWidth)

        '當前百分比所占用的寬度

        Dim totalWidth As Single = fullWidth * percentComplete

        '每個畫筆填充顏色占用的 寬度

        Dim barWidth As Single

        barWidth = fullWidth

        barWidth /= CSng(lstBrushes.Count)

         Dim height As Single

        '起始寬度

         Dim halfBorder As Single = CSng(BorderWidth / 2)

        Dim idxColor As Integer = 0

        Dim x As Single

        '每 個畫筆填充顏色占用的寬度

        height = CSng(Me.ClientRectangle.Height - BorderWidth)

        '根據當前百分比所占用的寬度使用畫筆填充顏色

        For x = halfBorder To totalWidth Step barWidth

             e.Graphics.FillRectangle(lstBrushes(idxColor), x, halfBorder, barWidth, height)

            If idxColor < lstBrushes.Count Then

                idxColor += 1

            End If

        Next

        '當進度為100%的,使用最後一個畫筆 填充顏色.

        If (x < (Me.ClientRectangle.Width - halfBorder)) And percentComplete = 1.0 Then

            If idxColor < lstBrushes.Count Then

                e.Graphics.FillRectangle (lstBrushes(idxColor), x, halfBorder, ((Me.ClientRectangle.Width - halfBorder) - x), height)

            End If

        End If

    End Sub

End Class

保存項目後,按下“生成”菜單中 的“生成 GradientProcessBar”選項,生成了組件GradientProcessBar.dll。

四、 測試組件

點擊“文件”下的“新建項目”,在打開的窗體中,“項 目類型”選擇“Visual Basic”。“模板”選擇“Windows 應用程序 ”。在左下角,“名稱”改為“Test”。按下“確定”按鈕,新 建工程。在打開的窗體Form1.vb中,加入一個Button控件,設置屬性Text=啟動。一個Label控件,設置 屬性Text=當前進度。一個Timer控件。點擊“工具”菜單下的“選擇工具箱項” 。點擊 “.NET Framework 組件”頁。點擊“浏覽”按鈕。選擇剛才生成的組件 GradientProcessBar.dll加入到窗體中。如下圖示:

點擊 “確定 ”按鈕。則在工具箱中有了GradientProcessBar 控件了。在窗體上加入一個

GradientProcessBar控件。設置屬性Name=Pb1。在Form1.vb中添加如下代碼:

Public Class Form1

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        '設置進度條初始值

        Pb1.Minimum = 0

        Pb1.Maximum = 100

        Pb1.Value = 0

        Pb1.Smoothness = 4

        '啟動進度條

        Timer1.Interval = 10

        Timer1.Enabled = True

    End Sub

    Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick

        '顯示當前進度。

        Pb1.Value += 1

        Label1.Text = "當前進 度:" + CStr(CInt(Pb1.Value / Pb1.Maximum * 100)) + "%"

    End Sub

End Class

按F5鍵運行程序,顯示如下窗體:

按下“啟動”按鈕,顯示當前進度,如下圖所示:

進度 條顯示完後,如下圖所示:

結束語

本文 對基於VB2005的組件編程技術作了初步的介紹,關於這方面的技術。有興趣的讀者可以參考相關的資料 ,為以後能開發出更多更好的組件打下一定的基礎。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved