正在尋找一種簡(jiǎn)潔而簡(jiǎn)單的方法來(lái)跟蹤WPF應(yīng)用程序中的多步流程？不用查找其他工具了，Telerik UI for WPF 在R1 2022版本中就已發(fā)布了相關(guān)的新組件——RadStepProgressBar 組件。

為什么要使用StepProgressBar？

進(jìn)度條是一個(gè)可以設(shè)置的視覺(jué)元素，通過(guò)多個(gè)不同的步驟顯示多步驟過(guò)程，并在每個(gè)步驟之間設(shè)置一個(gè)進(jìn)度條，以使原本冗長(zhǎng)的表單對(duì)用戶來(lái)說(shuō)變得更簡(jiǎn)單，它適用于注冊(cè)、預(yù)約、包裹狀態(tài)跟蹤、測(cè)驗(yàn)、更長(zhǎng)的調(diào)查等。

如何操作？

在本節(jié)中，您首先需要一個(gè)新的WPF應(yīng)用程序，引用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>

這是開(kāi)始使用 RadStepProgressBar 的最簡(jiǎn)單方法，如果想要更深入，可以在數(shù)據(jù)綁定場(chǎng)景中使用該控件，這可以通過(guò)ItemsSource 屬性來(lái)完成，并且還會(huì)為數(shù)據(jù)集合的每個(gè)成員自動(dòng)生成一個(gè) RadStepProgressBarItem。

主要功能檢查

方向和布局

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

調(diào)整步驟

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

對(duì)于每個(gè) StepProgressBarItem，您可以從 Telerik:Geometry 預(yù)定義類(lèi)型中進(jìn)行選擇或創(chuàng)建自定義類(lèi)型，一旦您找到了合適的，只需將它分配給任何項(xiàng)目的 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>

每個(gè)步驟都可以選擇，為了跟蹤它的狀態(tài)，RadStepProgressBar 公開(kāi)了三種方便的狀態(tài)——NotStarted、Indeterminate 和 Completed，選擇一個(gè)步驟會(huì)將其狀態(tài)更改為已完成。

每個(gè)狀態(tài)都會(huì)在階梯形狀內(nèi)顯示不同的指示符。

調(diào)整內(nèi)容

每個(gè)指標(biāo)都有內(nèi)容，完全可定制，有一組基于步驟狀態(tài)的 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>

有關(guān)每個(gè)步驟的詳細(xì)信息，可以使用 Content 和 AdditionalContent 屬性。

自定義外觀

自定義 RadStepProgressBar 的外觀很簡(jiǎn)單，因?yàn)樗峁┝艘唤M豐富的功能并且可以輕松使用。

舉例來(lái)說(shuō)，這里有一些場(chǎng)景說(shuō)明了自定義 StepProgressBar 的外觀和感覺(jué)的自由度。

Telerik UI for WPF | 下載試用

Telerik UI for WPF擁有超過(guò)100個(gè)控件來(lái)創(chuàng)建美觀、高性能的桌面應(yīng)用程序，同時(shí)還能快速構(gòu)建企業(yè)級(jí)辦公WPF應(yīng)用程序。UI for WPF支持MVVM、觸摸等，創(chuàng)建的應(yīng)用程序可靠且結(jié)構(gòu)良好，非常容易維護(hù)，其直觀的API將無(wú)縫地集成Visual Studio工具箱中。

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