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


    正在寻找一种简洁而简单的方法来跟踪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    欢迎一起进群讨论

    了解最新Kendo UI最新资讯,请关注Telerik中文网!

  • 相关阅读:
    angular-指令
    microbit 范例课程
    microsoft 为microbit.org 设计的课程
    Microbit 翻译计划及IDE 中文化
    Microbit MicroPython 介绍
    micro:bit 软件生态系统介绍
    Microbit 硬件架构介绍
    TCP协议和UDP协议下的socket
    爬虫-链家二手房
    函数相关
  • 原文地址:https://www.cnblogs.com/AABBbaby/p/16578906.html
Copyright © 2020-2023  润新知