Data-Binding.md

layout	post
title	Data Binding in WPF Step ProgressBar control | Syncfusion
description	Learn here all about Data Binding support in Syncfusion<sup>&reg;</sup>; WPF Step ProgressBar (SfStepProgressBar) control and more.
platform	wpf
control	Step ProgressBar
documentation	ug

Data Binding in WPF Step ProgressBar (SfStepProgressBar)

You can add a StepViewItem using the data binding in the WPF SfStepProgressBar.

Data binding to Objects

The SfStepProgressBar can bound to an external source to auto-create StepViewItem and display the data using the ItemsSource property.

N> To bind the ItemsSource to SfStepProgressBar, you need to have a collection with a data object which holds the step view item details.

Here, the StepItem class defined with Content and its properties, and the ViewModel class has the ItemsSource property of type ObservableCollection<StepItem>.

{% tabs %} {% highlight C# %}

// Model.cs ///

/// Represents the model. ///

public class StepItem { ///

/// Gets or sets the text for step view item. ///

public string ModelText { get; set; }

/// <summary>
/// Gets or sets the space between text and step view item.
/// </summary>
public double TitleSpace { get; set; }

}

//ViewModel.cs ///

/// Represents the view model class. ///

public class ViewModel : INotifyPropertyChanged { ///

/// Represents the step view items. ///

private ObservableCollection m_stepViewItems;

/// <summary>
/// Represents the property changed event.
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;

/// <summary>
/// Gets or sets the step view items.
/// </summary>
public ObservableCollection<StepItem> StepViewItems
{
    get
    {
        return m_stepViewItems;
    }
    set
    {
        m_stepViewItems = value;
        OnPropertyChanged(new PropertyChangedEventArgs("StepViewItems"));
    }
}

/// <summary>
/// Trigress the on property changed event.
/// </summary>
/// <param name="e"></param>
public void OnPropertyChanged(PropertyChangedEventArgs e)
{
    if (PropertyChanged != null)
        PropertyChanged(this, e);
}

/// <summary>
/// Initialize the instance of <see cref="ViewModel"/> class.
/// </summary>
public ViewModel()
{
    StepViewItems = new ObservableCollection<StepItem>();
    PopulateData();
}

/// <summary>
/// Populates the data.
/// </summary>
private void PopulateData()
{
    //Adding the step view items into the collection
    StepItem orderedStepViewItem = new StepItem()
    {
        ModelText = "Ordered",
        TitleSpace = 8
    };

    StepItem shippedStepViewItem = new StepItem()
    {
        ModelText = "Shipped",
        TitleSpace = 8
    };

    StepItem packedStepViewItem = new StepItem()
    {
        ModelText = "Packed",
        TitleSpace = 8
    };

    StepItem deliveredStepViewItem = new StepItem()
    {
        ModelText = "Delivered",
        TitleSpace = 8
    };

    StepViewItems.Add(orderedStepViewItem);
    StepViewItems.Add(shippedStepViewItem);
    StepViewItems.Add(packedStepViewItem);
    StepViewItems.Add(deliveredStepViewItem);
}

} {% endhighlight %} {% endtabs %}

{% tabs %} {% highlight XAML %}

<Style TargetType="syncfusion:StepViewItem"> </Style> {% endhighlight %} {% endtabs %}

Download demo from GitHub.

Data-Binding with XML

An XML file can also be used as the ItemsSource for the Step Progress Bar control. The following example shows this.

Create an XML file with the following information and name it Data.xml.

{% tabs %} {% highlight XAML %}

{% endhighlight %} {% endtabs %}

The ItemsSource property for the Step ProgressBar control.

{% tabs %} {% highlight XAML %} <Window.Resources> </Window.Resources>

<syncfusion:SfStepProgressBar x:Name="stepperControlName" ItemsSource="{Binding Source={StaticResource xmlSource}, XPath=Step}" SelectedIndex="{Binding Source={StaticResource xmlSource}, XPath=@SelectedIndex}"> syncfusion:SfStepProgressBar.ItemContainerStyle <Style TargetType="syncfusion:StepViewItem"> </Style> </syncfusion:SfStepProgressBar.ItemContainerStyle> </syncfusion:SfStepProgressBar> {% endhighlight %} {% endtabs %}

This will create the following Step ProgressBar control.

Download demo from GitHub.