在本文中，我們將介紹Windows Forms Step Progress Bar組件，來探索在WinForms 應(yīng)用程序中派上用場(chǎng)的用例。

用例

RadStepProgressBar 是優(yōu)秀的控件，用于指示可以分成不同步驟的流程，無論是用戶注冊(cè)、票務(wù)還是錯(cuò)誤跟蹤系統(tǒng)，RadStepProgressBar 都能滿足您的需求。 該控件具有豐富的 API，并且可以輕松配置以處理涉及步驟的任何場(chǎng)景。

Steps 集合

Step Progress Bar 組件公開了 Steps 集合，可以輕松地使用它來添加或刪除步驟項(xiàng)目并設(shè)置它們的進(jìn)度。 這些步驟代表不同的任務(wù)，并且在現(xiàn)實(shí)生活中，您可以單獨(dú)設(shè)置它們的進(jìn)度。

如果您有一個(gè)任務(wù)已經(jīng)完成了一般——可以將它的 Progress 設(shè)置為 50，或者任何介于 0 到 100 之間的整數(shù)屬性來表示百分比。 API 就這么簡(jiǎn)單：

var step = new StepProgressItem()
{
Progress = 50,
FirstHeader = "Step 2",
SecondHeader = "InProgress",
SecondDescription = "Dev"
};

this.radStepProgressBar1.Steps.Add(step);

由于每個(gè)步驟都公開了它的 Progress 屬性，您可以動(dòng)態(tài)更新它，甚至可以實(shí)現(xiàn)平滑過渡，如下面的 gif 所示：

進(jìn)度模式

這些步驟如何相互關(guān)聯(lián)呢？設(shè)置步驟的進(jìn)度如何影響添加到控件的其他步驟？ 此操作取決于您的實(shí)際情況。

例如，如果您有一個(gè)線性流程，設(shè)置一個(gè)步驟的進(jìn)度也會(huì)完成之前的所有步驟。 在其他情況下，您可能希望這些步驟是獨(dú)立的，以便可以單獨(dú)完成它們；或者您的方案可能需要相反的情況——在任何給定時(shí)間只完成一個(gè)步驟。RadStepProgressBar 通過其 ProgressMode 屬性處理所有這些場(chǎng)景。

以下是可用選項(xiàng)：

• Linear：設(shè)置給定步驟的進(jìn)度會(huì)將步驟之前的所有項(xiàng)目的進(jìn)度更改為 100，給定步驟之后的項(xiàng)目的進(jìn)度更改為 0。

• Single：只有一個(gè)步驟可以始終處于激活狀態(tài)。

• Independent：可以單獨(dú)設(shè)置步驟進(jìn)度。

布局

WinForms Step Progress Bar組件支持水平和垂直方向，您還可以通過控件的RightToLeft 屬性輕松更改步驟項(xiàng)的流向。在水平方向上，RightToLeft.Yes 將從右到左排列步驟項(xiàng)目，在垂直方向上從下到上排列。

StepProgressBar 還公開了強(qiáng)大的 LayoutMode 屬性，該屬性確定步驟項(xiàng)將如何根據(jù)連接長(zhǎng)度和可用空間進(jìn)行排列。 臺(tái)階可以伸展以占據(jù)控件的整個(gè)可用空間，也可以根據(jù)全局臺(tái)階間距和各個(gè)連接長(zhǎng)度進(jìn)行排列。 在我們應(yīng)用絕對(duì)長(zhǎng)度的模式中，如果步驟不適合，將使用特殊按鈕來導(dǎo)航帶有動(dòng)畫的步驟。

設(shè)置和樣式

進(jìn)行更改的 API 很簡(jiǎn)單，直接在控件和步驟項(xiàng)上公開了屬性和方法。 某些控制設(shè)置會(huì)影響所有步驟項(xiàng)目，但您仍然可以選擇在某些步驟中覆蓋它們。例如，您可以將某個(gè)步驟變大，這樣可以表明它的特殊狀態(tài)：

this.radStepProgressBar1.StepSpacing = 80;
this.radStepProgressBar1.IndicatorSize = new Size(28, 28);
this.radStepProgressBar1.ConnectionThickness = 3;

var readyForTestStep = this.radStepProgressBar1.Steps[2];
readyForTestStep.IndicatorSize = new Size(42, 42);

至于主題，控件在所有主題中都得到了很好的支持——在撰寫本文時(shí)，它們的數(shù)量為 31，繼續(xù)檢查 ThemeViewer 工具并為您的應(yīng)用選擇最佳主題。

自定義

在研究和思考如何實(shí)施這種控制時(shí)，有一點(diǎn)是確定的，我們希望靈活且 API 簡(jiǎn)單易操作，ProgressMode、LayoutMode、Orientation 和 RightToLeft 屬性確定控件的操作和布局。

但除了該 API，我們還希望提供進(jìn)行自定義的方法，以便您只需使用幾個(gè)屬性就可以完全改變控件的外觀。

這是同一個(gè)控件，只是我們應(yīng)用了自定義形狀，更改了指示器大小并刪除了連接：

foreach (StepProgressItem item in this.radStepProgressBar1.Steps)
{
string shapeAsString = "20,20,200,100:20,20,False,0,0,0,0,0:200,20,False,0,0,0,0,0:220,70,False,0,0,0,0,0:200,120,False,0,0,0,0,0:20,120,False,0,0,0,0,0:40,70,False,0,0,0,0,0:";
if (item.IsFirst)
{
shapeAsString = "20,20,200,100:20,20,False,0,0,0,0,0:200,20,False,0,0,0,0,0:220,70,False,0,0,0,0,0:200,120,False,0,0,0,0,0:20,120,False,0,0,0,0,0:";
}
else if (item.IsLast)
{
shapeAsString = "20,20,200,100:20,20,False,0,0,0,0,0:180,20,True,230,20,230,120,0:180,120,False,0,0,0,0,0:20,120,False,0,0,0,0,0:40,70,False,0,0,0,0,0:";
}

item.StepIndicator.Shape = new CustomShape() { AsString = shapeAsString };
}

this.radStepProgressBar1.StepProgressBarElement.IndicatorSize = new Size(100, 40);
this.radStepProgressBar1.StepProgressBarElement.StepSpacing = 0;

上述代碼片段中的自定義形狀是使用 ShapeEditor 工具創(chuàng)建的，后來序列化為字符串。

Telerik UI for WinForms| 下載試用

Telerik UI for WinForms擁有適用Windows Forms的110多個(gè)令人驚嘆的UI控件。所有的UI for WinForms控件都具有完整的主題支持，可以輕松地幫助開發(fā)人員在桌面和平板電腦應(yīng)用程序提供一致美觀的下一代用戶體驗(yàn)。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論