Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

StepProgressBar Class

Visualizes a linear process and highlights its current stage.

Namespace: DevExpress.XtraEditors

Assembly: DevExpress.XtraEditors.v24.2.dll

NuGet Package: DevExpress.Win.Navigation

#Declaration

public class StepProgressBar :
    BaseStyleControl,
    IStepProgressBarDirectXOwner,
    ISupportXtraAnimation,
    ISupportInitialize,
    IStepProgressBarAppearanceOwner,
    ITouchScrollBarOwner,
    IMouseWheelSupport,
    IStepProgressBarCustomDraw,
    IStepProgressBarItemOptionsOwner,
    IImageListOwner

#Remarks

Step Progress Bar is a sequence of connected items. Each item has two states (active and inactive) with different appearance settings.

The control supports both vertical and horizontal orientations. A horizontal Step Progress Bar arranges its items from left to right, vertical - from top to bottom. Enable the InversedProgressDirection property to flip the orientation.

Step Progress Bar items are objects of the StepProgressBarItem class stored in the StepProgressBar.Items collection. Each item has an indicator (central circle) and two identical content blocks.

#Item Indicator

An indicator consists of an outline (1), a central area that can be filled with the outline color (2), and an optional image in the middle (3).

indicator

1. Outline settings

  • StepProgressBar.IndicatorLineThickness - specifies line thickness.

  • StepProgressBar.Appearances.CommonActiveColor and StepProgressBar.Appearances.CommonInactiveColor - specify active/inactive outline state colors for all items owned by the control. These settings also affect connectors (lines that link neighboring items).

  • StepProgressBarItem.Appearance.ActiveIndicatorColor and StepProgressBarItem.Appearance.InactiveIndicatorColor - allow you to override common active/inactive state colors for individual items.

  • StepProgressBarIndicatorOptions.Width - the outline diameter. You can access this setting at two levels:

  • use StepProgressBar.ItemOptions.Indicator.Width to change the indicator size for all Progress Bar Items;
  • use StepProgressBarItem.Options.Indicator.Width to set up individual item width.
stepProgressBar1.ItemOptions.Indicator.Width = 50;
stepProgressBarItem1.Options.Indicator.Width = 70;

2. Central area settings

3. Image settings

Use ActiveStateImageOptions and InactiveStateImageOptions properties to assign vector or raster images for active and inactive item states. These properties are accessible at two levels:

  • StepProgressBar.ItemOptions.Indicator. - allows you to assign two global images: an image used by all inactive items, and an image all active items display.

  • StepProgressBarItem.Options.Indicator. - allows you to override global active/inactive state images for individual items.

stepProgressBar1.ItemOptions.Indicator.ActiveStateImageOptions.SvgImage = svgImageCollection1[0];
stepProgressBarItem1.Options.Indicator.ActiveStateImageOptions.SvgImage = svgImageCollection[1];

#Indicator Draw Modes

Our StepProgressBarIndicatorOptions.ActiveStateDrawMode and StepProgressBarIndicatorOptions.InactiveStateDrawMode properties allow you to choose from the following indicator styles:

drawmodes

  • Full or Default - an indicator outline is visible and the central indicator area is filled with the outline color.
  • Outline - an indicator outline is visible and the central indicator area is empty.
  • None - neither indicator outline nor central area are visible. If assigned, an indicator icon is the only element visible in this mode.

Similar to other indicator options, you can access these settings at both control and individual items’ levels.

stepProgressBar1.ItemOptions.Indicator.ActiveStateDrawMode = IndicatorDrawMode.Full;
stepProgressBarItem1.Options.Indicator.ActiveStateDrawMode = IndicatorDrawMode.Outline;

#Content Blocks

Content blocks are objects of the StepProgressBarItemContentBlock class displayed on both sides of indicators.

Orientation

Content blocks can display:

content-block-elements

To access these settings, use StepProgressBarItem.ContentBlock1 and StepProgressBarItem.ContentBlock2 properties.

stepProgressBarItem.ContentBlock1.Caption = "Set up notifications";
stepProgressBarItem.ContentBlock2.Description = "Done";

To change the content block spacing, use StepProgressBar.DistanceBetweenContentBlockElements (1) and StepProgressBar.IndicatorToContentBlockDistance (2) properties.

spacing

The control provides multiple options to change caption and description fonts and colors.

  • Specify caption and description settings for all control items. (Active and inactive states have identical appearances.)
stepProgressBar1.Appearances.FirstContentBlockAppearance.Caption.ForeColor = Color.FromArgb(40, 40, 40);
stepProgressBar1.Appearances.SecondContentBlockAppearance.Description.ForeColor = Color.FromArgb(80, 80, 80);
  • Specify caption and description settings for each item state separately. (Affects all control items.)
stepProgressBar1.Appearances.FirstContentBlockAppearance.CaptionActive.ForeColor = Color.FromArgb(40, 40, 40);
stepProgressBar1.Appearances.FirstContentBlockAppearance.CaptionInactive.ForeColor = Color.Gray;
stepProgressBar1.Appearances.SecondContentBlockAppearance.DescriptionActive.ForeColor = Color.DimGray;
stepProgressBar1.Appearances.SecondContentBlockAppearance.DescriptionInactive.ForeColor = Color.LightGray;
  • Set up caption and description appearances for all items states. (Affects both content blocks within a specific item.)
stepProgressBarItem1.Appearance.ContentBlockAppearance.Caption.ForeColor = Color.FromArgb(40, 40, 40);
stepProgressBarItem1.Appearance.ContentBlockAppearance.Description.ForeColor = Color.Gray;
  • Set up different caption and description appearances for active and inactive item states. (Affects both content blocks within a specific item.)
stepProgressBarItem1.Appearance.ContentBlockAppearance.CaptionActive.ForeColor = Color.FromArgb(40, 40, 40);
stepProgressBarItem1.Appearance.ContentBlockAppearance.CaptionInactive.ForeColor = Color.Gray;
stepProgressBarItem1.Appearance.ContentBlockAppearance.DescriptionActive.ForeColor = Color.DimGray;
stepProgressBarItem1.Appearance.ContentBlockAppearance.DescriptionInactive.ForeColor = Color.LightGray;
  • Specify item state appearance settings for an individual content block.
stepProgressBarItem1.ContentBlock1.Appearance.Caption.ForeColor = Color.FromArgb(40, 40, 40);
stepProgressBarItem1.ContentBlock2.Appearance.Description.ForeColor = Color.FromArgb(60, 60, 60);
  • Specify separate active/inactive item state appearances for a specific content block.
stepProgressBarItem1.ContentBlock1.Appearance.CaptionActive.ForeColor = Color.FromArgb(40, 40, 40);
stepProgressBarItem1.ContentBlock1.Appearance.CaptionInactive.ForeColor = Color.FromArgb(60, 60, 60);
stepProgressBarItem1.ContentBlock1.Appearance.DescriptionActive.ForeColor = Color.Gray;
stepProgressBarItem1.ContentBlock1.Appearance.DescriptionInactive.ForeColor = Color.LightGray;

#Connectors

Connectors are lines that link neighboring items. See the following list of main connector settings:

indent

  • Gap between connector and indicator - the ConnectorOffset property, available at both control (StepProgressBar.ItemOptions.ConnectorOffset) and item (StepProgressBarItem.Options.ConnectorOffset) levels.

offset

#Layout Modes

The LayoutMode property specifies how the control distributes its items across the client area.

Compact (Default) Layout Mode

If the control has more space than required, the distance between items equals the IndentBetweenItems property value. Items are placed according to the StepProgressBar.ContentAlignment property.

CompactModeLarge

When a control’s size is reduced, connectors shorten and content blocks are clipped. No scroll bar is available.

CompactModeSmall

Fixed Layout Mode

In this mode, the distance between items is always equal to the IndentBetweenItems property value.

FixedModeLarge

Items and connectors remain when a control’s size is reduced. If there is not enough space to show all items, a scroll bar appears. Use the StepProgressBar.ScrollMode to select the scrollbar style.

FixedModeSmall

Call the StepProgressBar.ScrollToItem(StepProgressBarItem) method to jump to the specified item.

FullSize Layout Mode

In “FullSize” mode, the control aligns its first item to the left edge, last item to the right edge, and evenly distributes the remaining items.

FullSizeLarge

A similar alignment pattern applies when a control cannot display all of its items. Connectors shorten, content blocks are clipped, and a scroll bar is not displayed.

FullSizeSmall

#Select Items

When you select an item, the control selects all previous items. To select items, use any of the following API.

Select a specific item

Partial item selection

partial item selection in step progress bar

Deactivate all items

Select (activate) all items

Activate the next or previous item

When another item is selected, the StepProgressBar.SelectedItemChanged event raises. The sample below illustrates how to use this event to dynamically change item and connector settings.

using DevExpress.XtraEditors;

// ...

spBar1.ConnectorLineThickness = 15;
spBar1.IndentBetweenItems = 50;
spBar1.IndicatorLineThickness = 4;
spBar1.ItemOptions.ConnectorOffset = -20;
spBar1.ItemOptions.Indicator.ActiveStateDrawMode = IndicatorDrawMode.None;
spBar1.ItemOptions.Indicator.InactiveStateDrawMode = IndicatorDrawMode.None;
spBar1.ItemOptions.Indicator.Width = 50;

void spBar1_SelectedItemChanged(object sender, StepProgressBarSelectedItemChangedEventArgs e) {
    StepProgressBar bar = sender as StepProgressBar;
    foreach (StepProgressBarItem item in bar.Items) {
        item.Options.Indicator.ActiveStateImageOptions.SvgImage = null;
        item.Options.Indicator.Width = 50;
        item.Options.ConnectorOffset = -20;
        item.ContentBlock1.Description = null;
    }

    var currentItem = e.SelectedItems.Last();

    if (currentItem != null) {
        currentItem.Options.Indicator.ActiveStateImageOptions.SvgImage = svgImageCollection1[0];
        currentItem.Options.Indicator.Width = 100;
        currentItem.ContentBlock1.Description = "Step " + (bar.SelectedItemIndex + 1).ToString() + " of 6";
        currentItem.Options.ConnectorOffset = 0;
        if (bar.SelectedItemIndex < 3)
            bar.Appearances.CommonActiveColor = Color.IndianRed;
        if (bar.SelectedItemIndex >= 3 && bar.SelectedItemIndex < 5)
            bar.Appearances.CommonActiveColor = Color.Goldenrod;
        if (bar.SelectedItemIndex >= 5)
            bar.Appearances.CommonActiveColor = Color.Green;
    }
}

#Tooltips

DevExpress controls support regular and super tooltips. Enable the ShowToolTips option to display tooltips when the mouse pointer hovers over the control.

Customize Regular Tooltip Text

Use the following properties of the target control to specify regular tooltip text and title:

API

Description

ToolTip

Specifies tooltip text. You can use line breaks in regular tooltips.

AllowHtmlTextInToolTip

Specifies whether to parse HTML tags in text.

ToolTipTitle

Specifies the tooltip title. If you do not specify tooltip text, the tooltip is not displayed even if you specify the title.

The following code snippet specifies tooltip text and title for a TextEdit editor:

public Form1() {
  InitializeComponent();
  textEdit1.ShowToolTips = true;
  textEdit1.ToolTipTitle = "Name";
  textEdit1.ToolTip = "Please enter your name";
}

WinForms - Customize a Regular Tooltip, DevExpress

Assign an Image to Regular Tooltips

Use the control’s ToolTipIconType property to assign a predefined icon. The ToolTipController.IconSize property specifies icon size.

Assign a custom image as follows:

  1. Create a ToolTipController and assign it to the control’s ToolTipController property.
  2. Create an image collection and assign it to the ToolTipController.ImageList property.
  3. Handle the ToolTipController.BeforeShow event. Use the e.ImageOptions parameter to assign a raster or vector image to the tooltip.

Note

The ToolTipIconType property has priority over e.ImageOptions. If you assign a custom image, set ToolTipIconType to None.

The following code snippet assigns a custom image to the TextEdit tooltip:

Note

textEdit1, toolTipController1, and svgImageCollection1 were created at runtime.

public Form1() {
  InitializeComponent();
  textEdit1.ShowToolTips = true;
  textEdit1.ToolTipTitle = "Name";
  textEdit1.ToolTip = "Please enter your name";
  textEdit1.ToolTipController = toolTipController1;
  toolTipController1.ImageList = svgImageCollection1;
  toolTipController1.BeforeShow += ToolTipController1_BeforeShow;
}

private void ToolTipController1_BeforeShow(object sender, ToolTipControllerShowEventArgs e) {
  ToolTipController controller = sender as ToolTipController;
  if (e.ToolTip == textEdit1.ToolTip)
    e.ImageOptions.SvgImage = (controller.ImageList as SvgImageCollection)["personalCard"];
}

WinForms - Assign a Custom Image to a Tooltip, DevExpress

Display a Super Tooltip

Use the control’s SuperTip property to assign a super tooltip. If you wish to use HTML tags in a super tooltip, enable the SuperToolTip.AllowHtmlText property.

Setting the ToolTipController.ToolTipType property to SuperTip converts existing regular tooltips to super tooltips.

WinForms - Convert Regular Tooltips to Super Tooltips, DevExpress

Tip

Read the following help topic for information on how to customize super tooltips: Hints and Tooltips.

#Inheritance

See Also