Class SfStepProgressBar

Represents a class that used to visualize the linear process and its current stage. Each step in the process visualized using StepViewItem item and current stage is set using SelectedIndexProperty property.

Inheritance
System.Object
SfStepProgressBar
Namespace: Syncfusion.UI.Xaml.ProgressBar
Assembly: Syncfusion.SfProgressBar.WPF.dll
Syntax
public class SfStepProgressBar : ItemsControl
Examples

Below controls show simple step progress bar control .

public ObservableCollection<StepViewItem> Steps { get; set; }
public ViewModel()
{
   Steps = new ObservableCollection<StepViewItem>();
   Steps.Add(new StepViewItem() { Content = "Ordered and Shipped" });
   Steps.Add(new StepViewItem() { Content = "Shipped and packed" });
   Steps.Add(new StepViewItem() { Content = "Packed" });
   Steps.Add(new StepViewItem() { Content = "Delivered" });
}

This example shows how to bind item source in StepProgressBar control.

Constructors

SfStepProgressBar()

Initializes a new instance of the SfStepProgressBar class.

Declaration
public SfStepProgressBar()

Fields

ActiveConnectorColorProperty

Identifies the ActiveConnectorColor dependency property.

Declaration
public static DependencyProperty ActiveConnectorColorProperty
Field Value
Type
System.Windows.DependencyProperty

AnimationDurationProperty

Identifies the AnimationDurationProperty dependency property.

Declaration
public static DependencyProperty AnimationDurationProperty
Field Value
Type
System.Windows.DependencyProperty

ConnectorColorProperty

Identifies the ConnectorColor dependency property.

Declaration
public static DependencyProperty ConnectorColorProperty
Field Value
Type
System.Windows.DependencyProperty

ConnectorThicknessProperty

Identifies the ConnectorThickness dependency property.

Declaration
public static DependencyProperty ConnectorThicknessProperty
Field Value
Type
System.Windows.DependencyProperty

ItemSpacingProperty

Identifies the ItemSpacing dependency property.

Declaration
public static DependencyProperty ItemSpacingProperty
Field Value
Type
System.Windows.DependencyProperty

ItemsStretchProperty

Identifies the ItemsStretch dependency property.

Declaration
public static DependencyProperty ItemsStretchProperty
Field Value
Type
System.Windows.DependencyProperty

MarkerShapeTypeProperty

Identifies the MarkerShapeType dependency property.

Declaration
public static DependencyProperty MarkerShapeTypeProperty
Field Value
Type
System.Windows.DependencyProperty

MarkerTemplateSelectorProperty

Identifies the MarkerTemplateSelector dependency property.

Declaration
public static DependencyProperty MarkerTemplateSelectorProperty
Field Value
Type
System.Windows.DependencyProperty

MinimumItemSpacingProperty

Identifies the MinimumItemSpacingProperty dependency property.

Declaration
public static DependencyProperty MinimumItemSpacingProperty
Field Value
Type
System.Windows.DependencyProperty

OrientationProperty

Identifies the Orientation dependency property.

Declaration
public static DependencyProperty OrientationProperty
Field Value
Type
System.Windows.DependencyProperty

SecondaryContentTemplateProperty

Identifies the SecondaryContentTemplate dependency property.

Declaration
public static DependencyProperty SecondaryContentTemplateProperty
Field Value
Type
System.Windows.DependencyProperty

SecondaryContentTemplateSelectorProperty

Identifies the SecondaryContentTemplateSelector dependency property.

Declaration
public static DependencyProperty SecondaryContentTemplateSelectorProperty
Field Value
Type
System.Windows.DependencyProperty

SelectedIndexProperty

Identifies the SelectedIndex dependency property.

Declaration
public static DependencyProperty SelectedIndexProperty
Field Value
Type
System.Windows.DependencyProperty

SelectedItemProgressProgressProperty

Identifies the SelectedItemProgress dependency property.

Declaration
public static DependencyProperty SelectedItemProgressProgressProperty
Field Value
Type
System.Windows.DependencyProperty

SelectedItemStatusProperty

Identifies the SelectedItemStatus dependency property.

Declaration
public static DependencyProperty SelectedItemStatusProperty
Field Value
Type
System.Windows.DependencyProperty

Properties

ActiveConnectorColor

Gets or sets a brush that describes the connector (line that connecting neighboring step view items) color for active StepViewItem.

Declaration
public Brush ActiveConnectorColor { get; set; }
Property Value
Type
System.Windows.Media.Brush
Remarks

The ActiveConnectorColor works when the Status is Active or Indeterminate status.

See Also

AnimationDuration

Gets or sets the values that indicates the duration for completing the animation Status changed.

Declaration
public TimeSpan AnimationDuration { get; set; }
Property Value
Type
System.TimeSpan
See Also

ConnectorColor

Gets or sets a brush that describes the connector color of StepViewItem.

Declaration
public Brush ConnectorColor { get; set; }
Property Value
Type
System.Windows.Media.Brush
Remarks

The ConnectorColor works when the Status status is Inactive.

See Also

ConnectorThickness

Gets or sets the thickness of connector line that connecting neighboring StepViewItem's.

Declaration
public double ConnectorThickness { get; set; }
Property Value
Type Description
System.Double

The default value is 2.
See Also

ItemSpacing

Gets or sets the spacing between the adjacent step view items in SfStepProgressBar.

Declaration
public double ItemSpacing { get; set; }
Property Value
Type Description
System.Double

The default value is 40/>.
Remarks

The SfStepProgressBar control arranges its items based on ItemsStretch. The ItemSpacing works only when the ItemsStretch is None. The single step size is calculated using ItemSpacing and MarkerWidth or MarkerHeight based on Orientation. The ItemSpacing applies between the current step view item and previous step view item.

See Also

ItemsStretch

Gets or sets a value that indicates how the size of the step view items are calculated based on the available size and ItemSpacing.

Declaration
public ItemsStretch ItemsStretch { get; set; }
Property Value
Type Description
ItemsStretch

The default value of ItemsStretch is None.
Remarks

When the ItemsStretch is Fill, the space between the items sized to fill the available space. if the calculated spacing is less than the MinimumItemSpacing, then the minimum item spacing is used. When the ItemsStretch is None, ItemSpacing used to defined the space between the step view items. When theItemsStretch is Auto, the space between the step view items are calculated based on the size of content and secondary content Auto is applicable only when the Orientation is System.Windows.Controls.Orientation.Vertical. If the size of content and secondary content is less than theMarkerHeight, then the MinimumItemSpacing is used.

Examples

Below example shows how to use the ItemStretch property in step progressbar control.

<syncfusion:SfStepProgressBar ItemsStretch="Fill" ItemSpacing="100" ItemsStretch="Fill" Orientation="Horizontal" x:Name="StepProgressBar">
    <syncfusion:StepViewItem Content="Ordered and packed"/>
    <syncfusion:StepViewItem Content="Packed and shipped"/>
    <syncfusion:StepViewItem Content="Shipped"/>
    <syncfusion:StepViewItem Content="Delivered"/>
</syncfusion:SfStepProgressBar>
See Also

MarkerShapeType

Gets or sets the shape of marker in StepViewItem.

Declaration
public MarkerShapeType MarkerShapeType { get; set; }
Property Value
Type Description
MarkerShapeType

The default value of MarkerShapeType is Circle.

MarkerTemplateSelector

Gets or sets the template selector for markers in step view items.

Declaration
public DataTemplateSelector MarkerTemplateSelector { get; set; }
Property Value
Type Description
System.Windows.Controls.DataTemplateSelector

The default value is null.
Remarks

A custom System.Windows.Controls.DataTemplateSelector objects that provides logic to choose System.Windows.DataTemplate based on the StepStatus.

Examples

Below example shows customization of markers using MarkerTemplateSelector and also marker width and height customization setting using ItemContainerStyle

# [MainWindow.xaml](#tab/tabid-1)

<DataTemplate x:Key="IndeterminateItemTemplate">
   <Grid>
      <Ellipse Width = "30" Height="30" Stroke="#00ccb1" Fill="#00ccb1"/>
      <Path Data = "M8,0 C12.411011,0 16,3.5890198 16,8 16,12.411011 12.411011,16 8,16 3.5889893,16 0,12.411011 0,8 0,3.5890198 3.5889893,0 8,0 z" Fill="White" HorizontalAlignment="Center" Height="12" Stretch="Fill" VerticalAlignment="Center" Width="12" />
   </Grid>
</DataTemplate>
<DataTemplate x:Key="ActiveItemTemplate">
   <Grid>
      <Ellipse Width = "30" Height="30" Stroke="#00ccb1" Fill="#00ccb1"/>
       <Path Data = "M15.288992,0 L15.997,0.70702839 5.7260096,11.000999 0,5.8859658 0.66601563,5.1399964 5.6870084,9.6239898 z" Fill="White" Stroke="White"  Height="11" Stretch="Fill" VerticalAlignment="Center" HorizontalAlignment="Center" Width="16" />
   </Grid>
</DataTemplate>
<DataTemplate x:Key="InactiveItemTemplate">
   <Grid>
       <Ellipse Width = "30" Height="30" Stroke="#D2D2D2" Fill="#FFFFFF"/>
  </Grid>
</DataTemplate>
<local:CustomDataTemplate x:Key="customDataTemplate"/>
<syncfusion:SfStepProgressBar ItemsSource="{Binding StepViewItems}" MarkerTemplateSelector="{StaticResource customDataTemplate}"  SelectedIndex="2" SelectedItemStatus="Completed" x:Name="StepProgressBar">
    <syncfusion:SfStepProgressBar.ItemContainerStyle>
        <Style TargetType = "syncfusion:StepViewItem" >
            <Setter Property="MarkerHeight"  Value="30"></Setter>
            <Setter Property="MarkerWidth"  Value="30"></Setter>
        </Style>
    </syncfusion:SfStepProgressBar.ItemContainerStyle>
</syncfusion:SfStepProgressBar>

The below codes shows how to select DataTemplate in step progress bar.

public class CustomDataTemplate : DataTemplateSelector
{
   public override DataTemplate SelectTemplate(object item, DependencyObject container)
   {
       if ((item is StepViewItem) && (item as StepViewItem) != null)
       {
           StepStatus status = (item as StepViewItem).Status;
           if (status == StepStatus.Indeterminate)
               return (item as StepViewItem).FindResource("IndeterminateItemTempalte") as DataTemplate;
           else if (status == StepStatus.Active)
               return (item as StepViewItem).FindResource("ActiveItemTemplate") as DataTemplate;
           else
               return (item as StepViewItem).FindResource("InActiveItemTemplate") as DataTemplate;
        }
        return null;
     }}

In the above use case, StepViewItem passed as item and SfStepProgressBar is passed as container.

See Also

MinimumItemSpacing

Gets or sets the value that indicates the minimum space between the step view items when is Fill.

Declaration
public double MinimumItemSpacing { get; set; }
Property Value
Type Description
System.Double

The default value of MinimumItemSpacing is 0.

Remarks

When the ItemsStretch is Fill, the space between the items sized to fill the available space. if the calculated spacing is less than the MinimumItemSpacing, then the minimum item spacing is used.

See Also

Orientation

Gets or sets a value that indicates the orientation by which the step view items are stacked.

Declaration
public Orientation Orientation { get; set; }
Property Value
Type Description
System.Windows.Controls.Orientation

The default value of Orientation is System.Windows.Controls.Orientation.Horizontal.

SecondaryContentTemplate

Gets or sets the data template used to display the secondary content of the StepViewItem.

Declaration
public DataTemplate SecondaryContentTemplate { get; set; }
Property Value
Type Description
System.Windows.DataTemplate

The default value is null.
Examples

Below example shows how the secondary item template is assigned for step progressbar.

public class StepItem
{
 public string Text { get; set; }
 public string SecondaryText { get; set; }
}
See Also

SecondaryContentTemplateSelector

Gets or sets the template selector for secondary content in step view items.

Declaration
public DataTemplateSelector SecondaryContentTemplateSelector { get; set; }
Property Value
Type Description
System.Windows.Controls.DataTemplateSelector

The default value is null.
Remarks

A custom System.Windows.Controls.DataTemplateSelector objects that provides logic to choose System.Windows.DataTemplate based on the StepStatus.

Examples

Below example shows customization of secondary content using SecondaryContentTemplateSelector.

# [Data.xaml](#tab/tabid-1)

<StepItems SelectedIndex = "3">
   <Step Text="Ordered" SecondaryText="step 1"/>
   <Step Text = "Shipped" SecondaryText="step 2"/>
   <Step Text = "Packed" SecondaryText="step 3"/>
   <Step Text = "Delivered" SecondaryText="step 4"/>
</StepItems>
<Window.Resources>
  <DataTemplate x:Key="ActiveContentTemplate">
     <Grid>
        <Grid.RowDefinitions>
           <RowDefinition Height = "Auto" />
            < RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
       <Path
          Width = "25"
          Height="25"
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Data="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
          Fill="#2B579A"
         Stroke="#2B579A" />
       <TextBlock
          Grid.Row="1"
          HorizontalAlignment= "Center"
          VerticalAlignment= "Center"
          Width= "40"
          Text= "{Binding XPath=@SecondaryText}"
          TextWrapping= "Wrap" />
      </Grid>
  </DataTemplate>
   <DataTemplate x:Key= "IndeterminateContentTemplate">
     <Grid>
        <Grid.RowDefinitions>
             <RowDefinition Height= "Auto" />
             <RowDefinition Height= "Auto" />
         </Grid.RowDefinitions>
        <Path
          Width= "25"
          Height= "25"
          HorizontalAlignment= "Center"
          VerticalAlignment= "Center"
          Data= "M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"
          Fill= "#2B579A"
          Stroke= "#2B579A" />
       <TextBlock
           Grid.Row= "1"
           HorizontalAlignment= "Center"
           VerticalAlignment= "Center"
           Width= "40"
           Text= "{Binding XPath=@SecondaryText}"
           TextWrapping= "Wrap" />
      </Grid>
</DataTemplate>
   <local:StepViewContentTemplateSelector x:Key= "stepViewContentTemplateSelector" />
    <XmlDataProvider
        x:Key= "xmlSource"
       Source= "Data.xml"
      XPath= "StepItems" />
</Window.Resources>
<Grid>
  <syncfusion:SfStepProgressBar x:Name= "stepperControlName" Margin= "40"
  ItemsSource= "{Binding Source={StaticResource xmlSource}, XPath=Step}" SecondaryContentTemplateSelector= "{StaticResource stepViewContentTemplateSelector}"
  SelectedIndex= "{Binding Source={StaticResource xmlSource}, XPath=@SelectedIndex}" SelectedItemStatus= "Indeterminate">
         <syncfusion:SfStepProgressBar.ItemContainerStyle>
             <Style TargetType = "syncfusion:StepViewItem">
                 <Setter Property= "Content" Value= "{Binding XPath=@Text}" />
            </Style>
       </syncfusion:SfStepProgressBar.ItemContainerStyle>
   </syncfusion:SfStepProgressBar>
   </Grid>

The below codes show how to select DataTemplate in step progress bar.

See Also

SelectedIndex

Gets or sets the index of the last active (selected) item where items before this index will moved to active status.

Declaration
public int SelectedIndex { get; set; }
Property Value
Type Description
System.Int32

The default value is -1.
Remarks

The SelectedIndex is a zero-index property and sets the last active (selected) step view item. Based on the SelectedItemStatus property, the last selected item will be in active or indeterminate or inactive status. The items before the selected index will be in active status and the item after the selected index will be in inactive status.

See Also

SelectedItemProgress

Gets or sets the value that indicates the progress of StepViewItem.

Declaration
public double SelectedItemProgress { get; set; }
Property Value
Type Description
System.Double

The default value of SelectedItemProgress is 100.

Remarks

The SelectedItemProgress works only when the SelectedItemStatus is Indeterminate or Inactive. When SelectedItemStatus is Active, the progress will always 100% regardless of this property.

See Also

SelectedItemStatus

Gets or sets the value that indicates the Status of last active (selected) StepViewItem.

Declaration
public StepStatus SelectedItemStatus { get; set; }
Property Value
Type Description
StepStatus

The default value of SelectedItemStatus is Active.
Remarks

The last selected item displays Active or Indeterminate or Inactive status based on SelectedItemStatus.

See Also

Methods

GetContainerForItemOverride()

Creates or identifies the element that is used to display the given item.

Declaration
protected override DependencyObject GetContainerForItemOverride()
Returns
Type Description
System.Windows.DependencyObject

The element that is used to display the given item.

IsItemItsOwnContainerOverride(Object)

Determines if the specified item is (or is eligible to be) its own container.

Declaration
protected override bool IsItemItsOwnContainerOverride(object item)
Parameters
Type Name Description
System.Object item

The item to check.
Returns
Type Description
System.Boolean

Returns true if the item is (or is eligible to be) its own container; otherwise, false.

OnApplyTemplate()

Invoked whenever application code or internal processes call System.Windows.FrameworkElement.ApplyTemplate. Used to apply and initialize the control's visual template.

Declaration
public override void OnApplyTemplate()

OnItemsChanged(NotifyCollectionChangedEventArgs)

Invoked when the items collection changes. Handles reset actions to update the selected index and ensure proper layout of step view items.

Declaration
protected override void OnItemsChanged(NotifyCollectionChangedEventArgs e)
Parameters
Type Name Description
System.Collections.Specialized.NotifyCollectionChangedEventArgs e

Provides data for the collection changed event.

PrepareContainerForItemOverride(DependencyObject, Object)

Prepares the specified element to display the specified item.

Declaration
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
Parameters
Type Name Description
System.Windows.DependencyObject element

Element used to display the specified item.
System.Object item

Specified item.

Events

MarkerClicked

Occurs when the marker of step view item is clicked.

Declaration
public event EventHandler<MarkerClickedEventArgs> MarkerClicked
Event Type
Type
System.EventHandler<MarkerClickedEventArgs>
Examples
stepProgressBar.MarkerClicked += StepProgressBar_MarkerClicked;
private void StepProgressBar_MarkerClicked(object sender, Syncfusion.UI.Xaml.ProgressBar.MarkerClickedEventArgs e)
{
   SfStepProgressBar stepProgressBar = (sender as SfStepProgressBar);
   stepProgressBar.SelectedIndex = stepProgressBar.Items.IndexOf(e.StepViewItem);
}

In the above code sample, passed sender as SfStepProgressBar.