Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (23)Angular  (39)ASP.NET  (47)ASP.NET Core  (53)ASP.NET MVC  (83)Azure  (26)Blazor  (47)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (52)JavaScript  (134)Microsoft  (96)PDF  (48)React  (29)Succinctly series  (118)Syncfusion  (399)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (14)Windows Forms  (52)WPF  (92)Xamarin  (105)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (99)Chart  (40)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (31)Development  (233)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (13)Extensions  (7)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (139)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (15)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (15)UI  (62)Uncategorized  (68)Unix  (2)User interface  (48)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (7)Web  (96)What's new  (61)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
New WPF Step ProgressBar to Track Multi-Step Process

New WPF Step ProgressBar to Track Multi-Step Process

Most desktop applications handle complicated tasks that are tracked in steps or checkpoints. To visualize the progress of these kinds of tasks in a WPF application, we’ve introduced a new WPF Step ProgressBar control in our 2020 Volume 3 release.

The Step ProgressBar control can be used to show the progress of a multiple-step process, such as new-user registration or package delivery status tracking. You can completely customize the appearance by changing the step shape, progress bar color, step template, and content template.

Let’s now briefly see the features of the WPF Step ProgressBar, and then I’ll walk you through the steps to add it to your application.

Key features of WPF Step ProgressBar

The key features of the WPF Step ProgressBar include:

Data binding

Data binding support in the WPF Step ProgressBar allows you to bind a collection of data models to the ItemSource property and control the last active item using the SelectedIndex property.

Data binding support in WPF Step ProgressBarStep shapes

The shape of a step marker can be a circle or square. You can also load custom templates for it.

Step shapesStatuses

The WPF Step ProgressBar supports the following statuses to show progress:

  • Active
  • Inactive
  • Indeterminate

Based on the status, you can customize the step marker. This means whenever the status of a step changes, the visual of the step will also be changed synchronously.
Statuses

Orientation

You can visualize the progress of a multiple-step process both horizontally and vertically.
Orientation

Customization

The WPF Step ProgressBar control allows you to customize each step based on its status using the MarkerTemplateSelector property. You can customize the content of each step using a data template.
Step ProgressBar Customization

Getting started with the WPF Step ProgressBar

Follow these steps to include the Step ProgressBar in your WPF application.

Step 1: Create a WPF application and install the following NuGet packages:

Step 2: Create a new view model class as demonstrated in the following code example. Here, we are going to use the Step ProgressBar to show the status of online semester fees payments.

/// <summary>
/// Represents the view model class.
/// </summary>
public class StepViewModel: INotifyPropertyChanged
{
   /// <summary>
   /// Represents the step view item collection.
   /// </summary>
     private ObservableCollection<string> stepViewItems;
        
   /// <summary>
   /// Initializes a new instance of the <see cref="StepViewModel"/> class.
   /// </summary>
   public StepViewModel()
   {
       this.StepViewItems = new ObservableCollection<string>();
       this.PopulateData();
   }

   /// <summary>
   /// Represents the property changed event.
   /// </summary>
   public event PropertyChangedEventHandler PropertyChanged;
        
   /// <summary>
   /// Gets or sets the step view collections.
   /// </summary>
   public ObservableCollection<string> StepViewItems
   {
      get
      {
          return this.stepViewItems;
      }

      set
       {
          this.stepViewItems = value;
          this.OnPropertyChanged(new PropertyChangedEventArgs(nameof(this.StepViewItems)));
        }
    }
       
    /// <summary>
    /// Represents the property changed.
    /// </summary>
    /// <param name="e">event args.</param>
    public void OnPropertyChanged(PropertyChangedEventArgs e)
    {
         this.PropertyChanged?.Invoke(this, e);
     }

     private void PopulateData()
     {
         this.StepViewItems.Add("StudentInfo");
         this.StepViewItems.Add("AcademicInfo");
         this.StepViewItems.Add("PaymentInfo");
     }
}

Step 3: Import the WPF schema namespace in the MainWindow.xaml file as demonstrated in the following code.

 xmlns:Syncfusion="http://schemas.syncfusion.com/wpf"

Step 4: Initialize the Step ProgressBar as demonstrated in the following code example.

<Window.DataContext>
     <local:StepViewModel />
</Window.DataContext>      
<Syncfusion:SfStepProgressBar
      ItemsSource="{Binding StepViewItems}"
      SelectedIndex="{Binding SelectedIndex}"
      SelectedItemStatus="Indeterminate" />
<!--  The code for frame navigation goes here.-->

Now, we have added the Step ProgressBar control to our WPF application. After executing the previous code example, we will get output like in the following screenshot.
Output

Resources

You can download the source code for this sample project from this GitHub repository.

Conclusion

We hope you now have a clear idea of the features and how to get started with the new WPF Step ProgressBar control. Refer to this UG documentation for more customization options. You can download the control in our 2020 Volume 3 release setup to check out these features.

If you have any questions about this control, please let us know in the comments section below. You can also contact us through our support forumDirect-Trac, or feedback portal. We are happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (2)

When will be included in Angular packages??

Hi Cesar Smerling,

Thank you for your interest in Syncfusion products.

We have considered your request “StepProgressBar in Angular package” and it will be implemented by the 2021 volume 2 release

Regards,
Prakash Kumar

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top