如何创建一个进度条控件

   以下文章翻译自http://www.beansoftware.com/ASP.NET-Tutorials/ProgressBar-User-Control.aspx。若有任何疑问,可以互相交流([e-mail])。

  正文:

     在以用户为中心的应用程序,我们经常努力使到应用程序更具交互性和用户体验性。当每个用户执行任何重型和长编的操作(上传和下载一个大型文件或者安装)时,他或者她期望知道在正规的区间操作的进度。用户应该知道每步是否成功或失败的状态。我们不能让用户一直等待。用户应该知道任务完成的百份比。

     这编文章讨论关于创建一个平滑,递增的进度栏控件(定制的用户控件)。这个是你可以包含任何ASP.NET web应用程序的典型用户控件。这个用户控件是一个使用HTML TABLE建立的轻量级控件。

<%@ControlLanguage="VB"AutoEventWireup="false"CodeFile="ProgressBar.ascx.vb"Inherits="ProgressBar" %>
<asp:TableID="tblProgressBar"runat="server"
    BorderWidth="1px"
    CellPadding="1"
    CellSpacing="1"
    Height="15px"
    Width="200px">
</asp:Table>
 
<uc1:ProgressbarID="Progressbar1"runat="server"BGColor="Gray"Blocks="20"BorderColor="Black"
            BorderSize="1"Cellpadding="1"CellSpacing="1"FillColor="Green"Height="20"Value="10"
            Width="150"/>

 

 

 进度栏用户控件属性

      以上从HTML显示来看,你能够观察到进度栏用户控件暴露很多属性。你能使用这些属性来控制进度栏的行为。

BGColor:这个属性决定进度栏用户控件的背景颜色。BGColor缺省值为Gray。你可以配置使用这个属性的进度栏的BGColor。

             
Blocks:这是一个重要的属性。Blocks将决定每一步显示的垂直横条数目。从以上HTML显示来看,你可以观察到Blocks的值为20。这个值作为一个基值。值的属性以及Block属性值使用以下给出的决定垂直横条每一步填满的数目的公式。

         Math.Ceiling((Me.Value * Me.Blocks/100))

我们能够从以下表格的值显示来看。这个表格以20作为block属性的初始值为基准。因此,进度栏以每一步2垂直横条填满。

        

Blocks Property(Base Values)

Value Property (percent completed)

Number of Vertical bars

20

10

2

20

20

4

20

30

6

20

40

8

20

50

10

从以上数字应该给出进度栏如何每一步填满的公平观点。既然,我们使用20作为基值;你可以看出每一步,进度栏以两步垂直横条递增。

Border Color:这个属性决定进度栏边框的颜色。

Border Size:决定进度栏边框线的厚度。

Fill Color:决定垂直横条的颜色。

Cell spacing:从技术上来讲,进度栏是以表格单元格作为垂直横条的简单HTML TABLE。为了保持表格单元格两者之间的空隙,我们使用这个属性。

其余的属性决定HTML TABLE元素的外观。

现在我们明白用户控件工作的原则。我们会增加这个用户控件到我们以下显示的页面。

<div><uc1:ProgressbarID="Progressbar1"runat="server"BGColor="Gray"Blocks="20"BorderColor="Black"
            BorderSize="1"Cellpadding="1"CellSpacing="1"FillColor="Green"Height="20"Value="10"
            Width="150"/>
        <br/>
        <asp:LabelID="Label1"runat="server"Text="Percent Complete"></asp:Label>
        <asp:LabelID="Label2"runat="server"Text="Value"></asp:Label>
        <br/>
        <asp:ButtonID="Button1"runat="server"Text="Progress"/></div>

无论什么时候我们增加任何用户控件到任何页面都要谨慎,我们应该按照以下显示那样注册我们的页面。

 

<%@RegisterSrc="Progressbar.ascx"TagName="Progressbar"TagPrefix="uc1" %>

 

我们增加了一些Labels来显示在数值和可读格式上的状态。

 

 

从以上数字显示来看,你可以看出当用户单击Progress按纽的时候,ProgressBar会按照用户控件设置的属性值递增。

  

        If (ViewState.Item("PBValue") IsNothing) Then
            ViewState.Add("PBValue", 10)
        EndIf
        If (CInt(ViewState.Item("PBValue")) >= 100) Then
            Progressbar1.Value = 100
            Label2.Text = "The Progress is complete"
            Return
        EndIf
 
        ViewState.Item("PBValue") = CInt(ViewState.Item("PBValue")) + 10
        Progressbar1.Value = CInt(ViewState.Item("PBValue"))
        Label2.Text = ViewState.Item("PBValue").ToString() + "%"

 

 

从以上代码片段显示来看,当每次单击ProgressBar,ProgressBar用户控件属性值按照递增值设置好。如果ProgressBar达到了它的门槛值,代码片段也可以检测得到。当ProgressBar达到了它的门槛值,你可以假设工作已经完成了。你可以看出以下输出显示的结果。

 

 

 

那就是ProgressBar完成自己的工作。以及这也作为指导:)。

 完整的C#代码供大家互相学习:http://www.cnblogs.com/Files/goalbell/ProgressBar.zip