正在寻找一种简洁而简单的方法来跟踪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拥有超过100个控件来创建美观、高性能的桌面应用程序,同时还能快速构建企业级办公WPF应用程序。UI for WPF支持MVVM、触摸等,创建的应用程序可靠且结构良好,非常容易维护,其直观的API将无缝地集成Visual Studio工具箱中。
Telerik_KendoUI产品技术交流群:726377843 欢迎一起进群讨论