正在尋找一種簡潔而簡單的方法來跟蹤WPF應用程序中的多步流程？不用查找其他工具了，Telerik UI for WPF 在R1 2022版本中就已發布了相關的新組件——RadStepProgressBar 組件。

為什么要使用StepProgressBar？

進度條是一個可以設置的視覺元素，通過多個不同的步驟顯示多步驟過程，并在每個步驟之間設置一個進度條，以使原本冗長的表單對用戶來說變得更簡單，它適用于注冊、預約、包裹狀態跟蹤、測驗、更長的調查等。

如何操作？

在本節中，您首先需要一個新的WPF應用程序，引用Telerik.Windows.Controls 程序集。

<telerik:RadStepProgressBar xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
<telerik:RadStepProgressBarItem Content="Ordered" AdditionalContent="1/10/2020"/>
<telerik:RadStepProgressBarItem Content="Packed" AdditionalContent="10/10/2020" />
<telerik:RadStepProgressBarItem Content="Shipped" AdditionalContent="1/2/2021" />
<telerik:RadStepProgressBarItem Content="Delivered" AdditionalContent="5/2/2021" />
</telerik:RadStepProgressBar>

這是開始使用 RadStepProgressBar 的最簡單方法，如果想要更深入，可以在數據綁定場景中使用該控件，這可以通過ItemsSource 屬性來完成，并且還會為數據集合的每個成員自動生成一個 RadStepProgressBarItem。

主要功能檢查

方向和布局

 如果您希望步驟進度條具有不同的方向，可以通過 Orientation 屬性更改它，流動方向也可以顛倒——從右到左或從下到上。

調整步驟

如果進度條步驟之間的間距太小或太大，可以使用Step Spacing 屬性。

對于每個 StepProgressBarItem，您可以從 Telerik:Geometry 預定義類型中進行選擇或創建自定義類型，一旦您找到了合適的，只需將它分配給任何項目的 ShapeGeometry 屬性即可。

<telerik:RadStepProgressBar>
<telerik:RadStepProgressBarItem
ShapeGeometry="{telerik:Geometry Type=Ellipse}"
Background="MediumPurple" Foreground="#FFFFFFFF"
ShapeWidth="30" ShapeHeight="30"/>
<telerik:RadStepProgressBarItem
ShapeGeometry="{telerik:Geometry Type=Square}"
Background="LimeGreen" Foreground="#FFFFFFFF"
ShapeWidth="30" ShapeHeight="30"/>
<telerik:RadStepProgressBarItem
ShapeGeometry="{telerik:Geometry Type=Cloud}"
Background="DeepSkyBlue" Foreground="#FFFFFFFF"
ShapeWidth="40" ShapeHeight="30"/>
</telerik:RadStepProgressBar>

每個步驟都可以選擇，為了跟蹤它的狀態，RadStepProgressBar 公開了三種方便的狀態——NotStarted、Indeterminate 和 Completed，選擇一個步驟會將其狀態更改為已完成。

每個狀態都會在階梯形狀內顯示不同的指示符。

調整內容

每個指標都有內容，完全可定制，有一組基于步驟狀態的 Content 和 ContentTemplate 屬性：

• NotStartedIndicatorContent
• NotStartedIndicatorContentTemplate
• IndeterminateIndicatorContent
• IndeterminateIndicatorContentTemplate
• CompletedIndicatorContent
• CompletedIndicatorContentTemplate

<telerik:RadStepProgressBar Width="300" SelectedItemStatus="Indeterminate">
<telerik:RadStepProgressBar.Resources>
<DataTemplate x:Key="IndicatorContentTemplate">
<TextBlock Text="{Binding}" Foreground="#1fd6fc" />
</DataTemplate>
</telerik:RadStepProgressBar.Resources>
<telerik:RadStepProgressBarItem
NotStartedIndicatorContent="N/A"
CompletedIndicatorContent="Yes"
IndeterminateIndicatorContent="..."
CompletedIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"
IndeterminateIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}" />
<telerik:RadStepProgressBarItem
NotStartedIndicatorContent="N/A"
CompletedIndicatorContent="Yes"
IndeterminateIndicatorContent="..."
CompletedIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"
IndeterminateIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"/>
<telerik:RadStepProgressBarItem
NotStartedIndicatorContent="N/A"
CompletedIndicatorContent="Yes"
IndeterminateIndicatorContent="?"
CompletedIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"
IndeterminateIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"/>
</telerik:RadStepProgressBar>

有關每個步驟的詳細信息，可以使用 Content 和 AdditionalContent 屬性。

自定義外觀

自定義 RadStepProgressBar 的外觀很簡單，因為它提供了一組豐富的功能并且可以輕松使用。

舉例來說，這里有一些場景說明了自定義 StepProgressBar 的外觀和感覺的自由度。

Telerik UI for WPF | 下載試用

Telerik UI for WPF擁有超過100個控件來創建美觀、高性能的桌面應用程序，同時還能快速構建企業級辦公WPF應用程序。UI for WPF支持MVVM、觸摸等，創建的應用程序可靠且結構良好，非常容易維護，其直觀的API將無縫地集成Visual Studio工具箱中。

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