ProgressSteps control helps to present progress of a multi-step process. ProgressSteps is an ItemsControl where the items each represent a step in the process. The container type for the items is the ProgressStep control.

ProgressSteps defines the following properties:

  • ActiveStep – An object which is a member of the Items collection, indicating the active step.
  • ActiveStepFollowsProgress – Specifies whether active step should be updated with Progress.
  • HighlightActiveStep – Specifies whether the active step should be highlighted in the UI.
  • HotTrackMode – A value which determines the conditions that must be met for a step to be clickable.
  • Progress – A double value between 0 and the number of steps.
  • SetActiveStepOnClick – Specifies whether a step is made the active step when clicked.

ProgressStep inherits from the standard Button control. This means it has the standard Content and ContentTemplate properties of the underlying ContentControl type. It also has a Click event. ProgressStep itself defines the following properties:

  • Description – An object which is displayed in addition to Content.
  • DescriptionTemlate – A DataTemplate which shows how to render Description.
  • HighlightActiveStep – Specifies whether the step should be highlighted when it is the active step. By default, this value is inherited from the parent ProgressSteps property of the same name.
  • ImageSource – An ImageSource which is made source of an Image that is displayed in addition to Content.
  • IsActiveStep – Gets or sets whether this step is the active step in the overall process.
  • IsFinalStep – Gets whether this is the final step.
  • Progress – a double between 0 and 1 indicating how much of the step has been completed.
  • SetActiveStepOnClick – Specifies whether IsActiveStep is set when this step is clicked. By default, this value is inherited from the parent ProgressSteps property of the same name.
  • StepNumber – Gets or sets the number of the step. By default, this value is determined by the step’s data item’s position in the Items collection of the parent ProgressSteps control.

Setting the progress

Progress can be set on individual steps as well as for the entire process as a whole.

To set progress on individual steps, use the Progress property of the ProgressStep control you wish to modify. Valid values are any number between 0 and 1.

To set progress on the process as a whole, use the Progress property of the parent ProgressSteps control. The valid range is between 0 and the number of steps. When this value is set, each of the individual steps’ Progress is updated to match.

Tracking the active step

ProgressSteps has a property named ActiveStep of type object that is available if needed. By definition, ActiveStep is the data item which represents the step, it is not necessarily the ProgressStep control itself (though it may be.) In addition, the ProgressStep control has an IsActiveStep property which is used to get or set whether a specific step is the active step of the process.

By default, ActiveStep is not automatically maintained, and will remain unset unless you set it yourself. There are, however, two properties which can be used to cause ActiveStep to be set automatically: ActiveStepFollowsProgress and SetActiveStepOnClick.

  • ActiveStepFollowsProgress – causes ActiveStep to be updated when Progress is updated. The formula for this is step number = floor(progress) + 1. A progress of 0 results in the first step being made active, progress of 1 makes step 2 active, progress of 2.5 is step 3, and so on.
  • SetActiveStepOnClick – If this property is set, then when a step is clicked, that step is made the active step.

By default there is no visual cue identifying the active step in the user interface. Change this by setting property HighlightActiveStep to true.

Hot tracking

Hot tracking is where the steps are enabled to respond to mouse events and be clicked. You do not necessarily want all the steps to be enabled at all times. For example, you might want it so that only completed or in progress steps are enabled. The HotTrackMode property provides this control.

HotTrackMode is a flags enum of type ProgressStepsHotTrackMode. The possible values are as follows:

  • None – Steps are not enabled.
  • NotStarted – Steps with Progress of 0 are enabled.
  • Started – Steps with Progress greater than 0 are enabled.
  • Completed – Steps with Progress of 1 are enabled.
  • Active – The active step is enabled.
  • PriorToActive – Steps who’s step number is less than the step number of the active step are enabled.
  • Any – All steps are enabled.

Multiple values can be specified in code using the | operator, and in Xaml using a comma. For example:

<dc:ProgressSteps HotTrackMode="Active, PriorToActive, Started"