用VB做个漂亮的进度条

Author: 李捷 Date: 1999年 第37期 13版

    一切都在变,就连进度条这个小东西也在发生着变化,由以往的单色形式变成了现今更加亮丽的过渡色形式甚至更为复杂漂亮的形式,给软件也增添了不少色彩。我在这里要告诉各位制作一种非常简便实用的制作方法:
#1    一、实现原理
    采用一个完整的图片来作为进度条,每次当进度条改变时,采用先贴图再用背景色擦去不需显示的一段进度的方法来实现进度条的变化,可实现制作任何复杂美观的进度条。
#1    二、准备工作
    首先需准备一个如下图样式的进度条图片(当然你可以做你自己喜欢的样式)。然后在窗体中加入一PictureBox控件,属性设置如下:
      AutoSize:True
      Appearance:Falt
      AutoRedraw:True
      ScaleMode: Pixel
      Picture:″准备的图片″
    再加一辅助控件(只用于保存图片,方便快捷地使用进度条)Image,属性设置如下:
    Picture:″准备的图片″
    Visible:FALSE
    说明:本文所讲的进度条并不是狭义上那种安装程序中常见的仅表示一个事件进程的进度条,而是把那些条形的,表示一个量的大小的图示统称为进度条。以此概念为基础让我们先来看看它的一些用途和类别,然后给出各类进度条的实现。
    进度条的用途:
    ※在一般软件中表示执行进度
    ※在多媒体播放器中表示音量大小、频率节奏的变化…
    ※在游戏中表示角色的能量、生命值…
    进度条的分类:
    由以上用途可知,进度条大体可分为两类
    第一类:自动变化的进度条(如安装程序中的进度条)
    第二类:可由用户操作的进度条(如音量调节)
    以下是两类进度条的代码。
    实现第一类的方法:
    Const MaxValue = 100
    Const MinValue = 0
    Dim Gene As Single
    Dim ProValue As Single
    Sub InitData()
    Gene = Picture1.ScaleWidth / (MaxValue - MinValue)
    End Sub
    Sub SetProBar(value As Single)
    Dim X As Single
    ProValue = value
    If ProValue > MaxValue Then
    ProValue = MaxValue
    Else
    If ProValue < MinValue Then
    ProValue = MinValue
    End If
    End If
    Text1.Text = ProValue
    X = (ProValue - MinValue) * Gene
    With Picture1
    Picture1.Picture = Image1.Picture
    Picture1.Line (X, 0)-(.ScaleWidth, .ScaleHeight), vbWhite, BF
    End With
    End Sub
    以上是实现第一类进度条的全部代码,它有相当的独立性,不管你准备的进度条有多长,此代码都可无须改变而应用于你的系统中。其中,MAXVALUE、MINVALUE为此进度条所表示的最大最小值,可由实际应用而定。
    PROVALUE 为当前的进度值,可由它得到当前值,以便处理。
    SETPROBAR 为实际使用的过程,在软件中通过调用此过程来改变进度条的长度。VALUE 的取值为 MINVALUE~MAXVALUEINITDATA 是初始化进度条长度和实际要表示的范围的比例因子,在软件中首先要调用此过程完成初始化工作。 
    第二类实现方法:
    要实现此类进度条,只需在第一类的基础上再加上响应用户操作的部分即可
    具体所加代码如下:
    Private Sub picture1_MouseMove(Button As Integer, Shift As Integer, X As Single,Y As Single)
    If Button = 1 Then
    Picture1_MouseDown Button, Shift, X, Y
    End If
    End Sub
    Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, X As Single,Y As Single)
    If Button = 1 Then
    ProValue = Int(X / Gene + MinValue + 1)
    SetProBar ProValue
    End If
    End Sub
    应用示例:
    建一工程,然后加入下列控件,并写入所示代码即可。
    控件:两个PictureBox,组成控件数组(属性设置如上)但:picture1(0)的BorderStyle:None
    两个Label,组成控件数组并分别以与自已Index 值相同的PictureBox为父控件(只需把Label绘在或粘贴在相应的PictureBox上即可)属性:
    AutoSize:True
    Alignment:Center
    BackStyle:Transparent
    Label(1): Caption:″当前音量0″
    Enabled:False
    Label(0): Caption:″0%″
    一个Timer:属性:Interval:50
#1    三、实例
    一个自动的进度条和由用户控制的进度条。
    Option Explicit
    ′如果有多个进度条且表示值的范围不同
    ′则可设立一组范围值,最好能通过INDEX
    ′值同自已的进度条建立对应关系,以方便处理
    Const MaxValue = 100
    Const MinValue = 0
    Dim Gene As Single
    Dim ProValue(1) As Single
    ′生成比例因子,必须首先执行
    Sub InitData()
    Gene = Picture1(0).ScaleWidth / 
      (MaxValue - MinValue)
    End Sub
    ′根据当前进度值设置进度条,INDEX指出是哪个进度条的值
    Sub SetProBar(value As Single, Index As Integer)
    Dim X As Single
    Dim BkColor As Long
    ProValue(Index) = value
    ′对当前进度值超出范围的处理
    If ProValue(Index) > MaxValue Then
    ProValue(Index) = MaxValue
    Else
    If ProValue(Index) < MinValue Then
    ProValue(Index) = MinValue
    End If
    End If
    ′在存在多个进度条时分别设置各进度条的不同文本 
    Select Case Index
    Case 1
    Label1(Index).Caption = ProValue(Index) & ″%″
    Case 0
    Label1(Index).Caption = ″当前音量″ & ProValue(Index)
    End Select
    ′计算出当前进度值所对应的进度条位置
    X = (ProValue(Index) - MinValue) * Gene
    With Picture1(Index).Picture = Image1.Picture
    ′把当前进度值所对应的进度条位置之后的图片用白色盖住
    ′它是此法实现思路的核心
    Select Case Index
    Case 1
    bkcolor = vbWhite
    Case 0
    bkcolor = vbMenuBar
    End Select
    Picture1(Index).Line (X, 0)-(.ScaleWidth, _ .ScaleHeight), bkcolor, BF
    End With
    End Sub
    ′首先初始化比例因子
    Private Sub Form_Load()
    InitData
    End Sub
    ′在用户操作INDEX为0的进度条时的响应
    Private Sub picture1_MouseMove(Index As Integer, _Button As Integer, Shift As Integer, X As Single, Y As Single)
    If Button = 1 And Index = 0 Then
    Picture1_MouseDown Index, Button, Shift, X, Y
    End If
    End Sub
    ′根据当前鼠标坐标的X值(进度条若为纵向则使用Y值)
    ′计算出所对应的当前进度值,然后设置进度条
    Private Sub Picture1_MouseDown(Index As Integer, _Button As Integer, Shift As Integer, X As Single, Y As Single)
    If Button = 1 And Index = 0 Then
    ProValue(Index) = Int(X / Gene + MinValue + 1)
    SetProBar ProValue(Index), Index
    End If
    End Sub
    ′在演示中以定时器定时设置进度
    ′实际使用时当然是按事件完成的
    ′百分比来设置进度
    Private Sub Timer1_Timer()
    Static curval As Single
    SetProBar curval, 1
    curval = (curval + 1) Mod MaxValue
    If curval = 0 Then
    curval = MinValue
    End If
    End Sub