Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement a progress bar using the MVVM pattern

Tags:

c#

mvvm

wpf

I have a WPF application which is built on the MVVM design pattern.

I wish to implement a progress bar in the app, that follows the MVVM pattern.

Does any one have any suggestions on how to implement this?

Thanks in advance

like image 675
jpgooner Avatar asked Aug 19 '10 09:08

jpgooner


People also ask

How use progress bar in WPF application?

The ProgressBar tag in XAML represents a WPF ProgressBar control. The Width and Height properties represent the width and the height of a ProgressBar. The Name property represents the name of the control, which is a unique identifier of a control.

What is the purpose of MVVM?

The Model-View-ViewModel (MVVM) pattern helps to cleanly separate the business and presentation logic of an application from its user interface (UI).

What is the role of model in MVVM?

The model implements your business logic. The view model decorates your business logic for the purpose of displaying it and interacting with it, in a view (UI of some form, eg. web, winform, CLI).

Is it necessary to use MVVM?

For trivial projects MVVM is unnecessary. Using only the View is sufficient. For simple projects, the ViewModel/Model split may be unnecessary, and just using a Model and a View is good enough. Model and ViewModel do not need to exist from the start and can be introduced when they are needed.


2 Answers

Use a ProgressBar control and bind its Value property to a property of the ViewModel:

View

<ProgressBar Minimum="0" Maximum="0" Value="{Binding CurrentProgress}" /> 

ViewModel

private double _currentProgress; public double CurrentProgress {     get { return _currentProgress; }     private set     {         _currentProgress = value;         OnPropertyChanged("CurrentProgress");     } } 
like image 32
Thomas Levesque Avatar answered Sep 20 '22 15:09

Thomas Levesque


Typically your UI would simply bind to properties in your VM:

<ProgressBar Value="{Binding CurrentProgress, Mode=OneWay}"               Visibility="{Binding ProgressVisibility}"/> 

Your VM would use a BackgroundWorker to do the work on a background thread, and to periodically update the CurrentProgress value. Something like this:

public class MyViewModel : ViewModel {     private readonly BackgroundWorker worker;     private readonly ICommand instigateWorkCommand;     private int currentProgress;      public MyViewModel()     {         this.instigateWorkCommand =                  new DelegateCommand(o => this.worker.RunWorkerAsync(),                                      o => !this.worker.IsBusy);          this.worker = new BackgroundWorker();         this.worker.DoWork += this.DoWork;         this.worker.ProgressChanged += this.ProgressChanged;     }      // your UI binds to this command in order to kick off the work     public ICommand InstigateWorkCommand     {         get { return this.instigateWorkCommand; }     }      public int CurrentProgress     {         get { return this.currentProgress; }         private set         {             if (this.currentProgress != value)             {                 this.currentProgress = value;                 this.OnPropertyChanged(() => this.CurrentProgress);             }         }     }      private void DoWork(object sender, DoWorkEventArgs e)     {         // do time-consuming work here, calling ReportProgress as and when you can     }      private void ProgressChanged(object sender, ProgressChangedEventArgs e)     {         this.CurrentProgress = e.ProgressPercentage;     } } 
like image 163
Kent Boogaart Avatar answered Sep 20 '22 15:09

Kent Boogaart