?? 以下文章翻譯自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: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

總結

以上是生活随笔為你收集整理的如何创建一个进度条控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。