以下文章翻译自http://www.beansoftware.com/ASP.NET-Tutorials/ProgressBar-User-Control.aspx。若有任何疑问,可以互相交流(goalbell@gmail.com)。 正文: 在以用户为中心的应用程序,我们经常努力使到应用程序更具交互性和用户体验性。当每个用户执行任何重型和长编的操作(上传和下载一个大型文件或者安装)时,他或者她期望知道在正规的区间操作的进度。用户应该知道每步是否成功或失败的状态。我们不能让用户一直等待。用户应该知道任务完成的百份比。 这编文章讨论关于创建一个平滑,递增的进度栏控件(定制的用户控件)。这个是你可以包含任何ASP.NET web应用程序的典型用户控件。这个用户控件是一个使用HTML TABLE建立的轻量级控件。 <%@ Control Language="VB" AutoEventWireup="false" CodeFile="ProgressBar.ascx.vb" Inherits="ProgressBar" %><asp:Table ID="tblProgressBar" runat="server" BorderWidth="1px" CellPadding="1" CellSpacing="1" Height="15px" Width="200px"></asp:Table> <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" /> 进度栏用户控件属性 以上从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
评论