创建一个进度条控件

翻译|其它|编辑:郝浩|2007-07-17 09:48:52.000|阅读 1363 次

概述:

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

    在以用户为中心的应用程序,我们经常努力使到应用程序更具交互性和用户体验性。当每个用户执行任何重型和长编的操作(上传和下载一个大型文件或者安装)时,他或者她期望知道在正规的区间操作的进度。用户应该知道每步是否成功或失败的状态。我们不能让用户一直等待。用户应该知道任务完成的百份比。
    这编文章讨论关于创建一个平滑,递增的进度栏控件(定制的用户控件)。这个是你可以包含任何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完成自己的工作。以及这也作为指导:)。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:csdn

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP