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

用例

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

Steps 集合

Step Progress Bar 組件公開了 Steps 集合，可以輕松地使用它來添加或刪除步驟項目并設置它們的進度。 這些步驟代表不同的任務，并且在現實生活中，您可以單獨設置它們的進度。

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

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

this.radStepProgressBar1.Steps.Add(step);

由于每個步驟都公開了它的 Progress 屬性，您可以動態更新它，甚至可以實現平滑過渡，如下面的 gif 所示：

進度模式

這些步驟如何相互關聯呢？設置步驟的進度如何影響添加到控件的其他步驟？ 此操作取決于您的實際情況。

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

以下是可用選項：

• Linear：設置給定步驟的進度會將步驟之前的所有項目的進度更改為 100，給定步驟之后的項目的進度更改為 0。

• Single：只有一個步驟可以始終處于激活狀態。

• Independent：可以單獨設置步驟進度。

布局

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

StepProgressBar 還公開了強大的 LayoutMode 屬性，該屬性確定步驟項將如何根據連接長度和可用空間進行排列。 臺階可以伸展以占據控件的整個可用空間，也可以根據全局臺階間距和各個連接長度進行排列。 在我們應用絕對長度的模式中，如果步驟不適合，將使用特殊按鈕來導航帶有動畫的步驟。

設置和樣式

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

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);

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

自定義

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

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

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

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 工具創建的，后來序列化為字符串。

Telerik UI for WinForms| 下載試用

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

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論