WinForms Step Progress Bar — v20.2 Update

WinForms Team Blog
10 December 2020

Each time a screenshot from the recently released Dental Clinic demo appears in a WinForms-related post, we invariably receive questions regarding the following UI component...

As some of you already know, this component is our WinForms Step Progress Bar control. It was released in v20.1 release cycle. Our Step Progress Bar can be used to address a variety of use cases but I think it’s best used to visualize a chain of events and highlight progression in that chain.

If you are considering this tool for a WinForms project, please be sure to test out a couple of new features we introduced in our v20.2 release: dynamic progression and single-step selection mode.

Dynamic Progression

When the control was released, each step had only two states: selected and deselected. Once a step was completed, you would be able to select the next step. This approach is perfect in apps that do not need to track intermediate progress.

Of course, many usage scenarios do require you to visualize an on-going process and notify users about current step completion rate. To address these scenarios, we implemented a Progress property accessible from individual StepProgressBarItem elements. This property ranges from 0 to 100, where 0 corresponds to "not yet started" (the previous step was just selected), and 100 represents "step reached.” You can set this property to any integer value that falls in this range. The indicator that precedes this item will be filled proportionally to the number you've entered.

When you select an item (via the StepProgressBarItem.State or StepProgressBar.SelectedItemIndex properties), its Progress property is automatically set to 100.

Note that for the first Step Progress Bar item you should set the Progress property to either 0 or 100. Intermediate values make no sense since there is no connector that leads to this item.

Single-Step Progress Mode

Our WinForms Step Progress Bar was initially designed to visualize a series of interconnected steps. As such, a step cannot be activated (selected) until all previous steps are selected (and vice versa: when you select a Step Progress Bar item, all previous items are automatically selected).

In v20.2 we have implemented a new ProgressMode property, whose "Range" value corresponds to the behavior described above. The other value is "SingleStep". In this mode, the Step Progress Bar has a single selected item and selecting one item no longer activates all previous steps.

Tell Us More

We'd love to hear from those who’ve used the Step Progress Bar or are considering it for a project. Which events and processes do you think you’ll visualize with this control? Which feature do you wish to see in future iterations? Like the idea of click-able items? Perhaps multi-select in single-step progress mode? Or even multi-line layouts?

Please post your ideas/thoughts below.

FREE DevExpress Xamarin UI Controls

Deliver high-impact native mobile apps with our feature-rich Data Grid, Scheduler, Chart, TabView, Editors, and utility controls. Reserve your free copy today!
Christopher Jay
Christopher Jay
I don't know how I missed this control but I love it.  I have a few places where I can use this: a visual log of user activity on jobs, and when automatically downloading and installing new upgrade packages.  Great work!  Clickable items would probably be first on the list of wish list items for this so you can click an item and get more details, like show a flyout or something.
10 December 2020
Eaton Z.
Eaton Zveare
Good stuff, especially Dynamic Progression. Why isn't some of this mentioned in the big release page? https://www.devexpress.com/subscriptions/new-2020-2.xml That's where I typically go to learn about most of the new features.
10 December 2020
Dmitry (DevExpress)
Dmitry (DevExpress)

@Eaton Absolutely, checking "What's New" pages with every release is the best way to ensure you haven't missed anything. You cannot find this on the What's New v20.2 page because the control was released in v20.1: https://www.devexpress.com/subscriptions/new-2020-1.xml. And features mentioned in this post were released in minor v20.2 updates, these were not available with the major update that was rolled out in October.


At the same time, I agree that sometimes tiny features get overlooked by the community, mainly because we did not announce them loud enough. We constantly enhance our controls (most notably new controls that have been released just recently), but users can easily miss new features, especially if they consist of a single property or event like in this case. Sometimes this happens because a new API seems not worthy of a separate announcement, sometimes we simply forget to mention it because of the massive amount of tweaks we do with every release cycle.


We've realized this is somewhat of a problem a while ago and started the "What you may have missed" series. But nevertheless, we'll look into this and discuss how to make sure customers don't miss useful features released in minor updates - you have my word :) In the meantime, follow our blog since blog posts remain the most convenient place to post such updates. 



10 December 2020
Engº Bruno Marques
Bruno Marques
Excelent Control, and awesome sample guidance. 
10 December 2020
Patrick Kern 1
Patrick Kern 1

hi,


are there plans to port this to WPF?

10 December 2020
Rainer Hornung
Rainer Hornung
Hey WinForms father, don't forget your VCL stepchild.
10 December 2020
Jan Thordsen
Jan Thordsen

Folks wrong place here, I know, but with 20.2 already downlodable for a while, is there already kind of roadlist for the next major release?

rgds

11 December 2020
Peter Sørensen
Peter Sørensen

In the dynamic progress animation shown in this post, I notice that the circles move at few pixels right and left as the caption text under them change length. I find this a bit annoying.


Is it possible to make sure the circles stay at the same location ?

11 December 2020
Christopher Jay
Christopher Jay
I am seeing the same thing as Peter Sørensen in my project.
11 December 2020
Dmitry (DevExpress)
Dmitry (DevExpress)

@Jan Thordsen

We are currently discussing which ideas from our huge backlog should be planned for the next year. We expect to publish the official 2021 Roadmap in January.


@Peter Sørensen @Christopher Jay

Yes, this happens because the control keeps the same distance not between indicators (circles) only, but between item bounds, which include content blocks. When one content blocks increases its width, the control recalculates the layout based on this new value. We are already working on this issue. In the meantime, you can fix this issue by "cheating" the control: add spaces before and after your content block captions/descriptions to make equally sized blocks.

11 December 2020
Syaiful Bahri
Syaiful Bahri
Its Good... thanks Dmitry
12 December 2020
Anders Wang
Anders Wang
expect for inplace mode
13 December 2020
Alex Chuev (DevExpress)
Alex Chuev (DevExpress)

@Patrick:

We don't have plans for the Step Progress Bar control in WPF.

Thanks,
Alex 

14 December 2020
Junior Thurler
Junior Thurler
Do you have plans to develop the same control to Xamarin Forms?
15 December 2020
Alex (DevExpress Support)
Alex (DevExpress)

@Junior,


Currently, we do not plan to develop this component in Xamarin.Forms.

18 December 2020
Emanuele
Emanuele

Hi, first of all: amazing!

Second thing: can be this control used in a XAF (Win) application?

22 December 2020
Dennis (DevExpress)
Dennis (DevExpress)

@Emanuele: Absolutely. XAF is an extendable framework and allows integrating custom or third-party components. So, you will definitely be able to use this component in XAF. For more information, see Using a Custom Control that is not Integrated by Default and UI Customization Tips.

23 December 2020
erick alvarez
erick alvarez
Excelent 
2 January 2021

Please login or register to post comments.