如何创建一个进度条控件

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

  正文:

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

     这编文章讨论关于创建一个平滑,递增的进度栏控件(定制的用户控件)。这个是你可以包含任何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 : Progressbar ID ="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 : Label ID ="Label1" runat ="server" Text ="Percent Complete"></ asp : Label >
        < asp : Label ID ="Label2" runat ="server" Text ="Value"></ asp : Label >
        < br />
        < asp : Button ID ="Button1" runat ="server" Text ="Progress" /></ div >

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

 

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

 

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

 

 

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

  

        If (ViewState.Item( "PBValue" ) Is Nothing ) Then
            ViewState.Add( "PBValue" , 10)
        End If
        If ( CInt (ViewState.Item( "PBValue" )) >= 100) Then
            Progressbar1.Value = 100
            Label2.Text = "The Progress is complete"
            Return
        End If
 
        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