界面组件Telerik UI for WPF入门级教程 – 如何创建进度条？

正在寻找一种简洁而简单的方法来跟踪WPF应用程序中的多步流程用查找其他工具了，

为什么要使用StepProgressBar/strong>

进度条是一个可以设置的视觉元素，通过多个不同的步骤显示多步骤过程，并在每个步骤之间设置一个进度条，以使原本冗长的表单对用户来说变得更简单，它适用于注册、预约、包裹状态跟踪、测验、更长的调查等。

如何操作/strong>

在本节中，您首先需要一个新的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:RadStepProgressBarItemShapeGeometry="{telerik:Geometry Type=Ellipse}"Background="MediumPurple" Foreground="#FFFFFFFF"ShapeWidth="30" ShapeHeight="30"/><telerik:RadStepProgressBarItemShapeGeometry="{telerik:Geometry Type=Square}"Background="LimeGreen" Foreground="#FFFFFFFF"ShapeWidth="30" ShapeHeight="30"/><telerik:RadStepProgressBarItemShapeGeometry="{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:RadStepProgressBarItemNotStartedIndicatorContent="N/A"CompletedIndicatorContent="Yes"IndeterminateIndicatorContent="..."CompletedIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"IndeterminateIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}" /><telerik:RadStepProgressBarItemNotStartedIndicatorContent="N/A"CompletedIndicatorContent="Yes"IndeterminateIndicatorContent="..."CompletedIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"IndeterminateIndicatorContentTemplate="{StaticResource IndicatorContentTemplate}"/><telerik:RadStepProgressBarItemNotStartedIndicatorContent="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    欢迎一起进群讨论