如何使用MVVM模式实现进度条

我有一个build立在MVVMdevise模式上的WPF应用程序。

我希望在应用中实现一个进度条,遵循MVVM模式。

有没有人有如何实施这个build议?

提前致谢

通常,您的用户界面将简单地绑定到虚拟机中的属性:

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

您的虚拟机将使用BackgroundWorker在后台线程上工作,并定期更新CurrentProgress值。 像这样的东西:

 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; } } 

使用ProgressBar控件并将其Value属性绑定到ViewModel的属性:

视图

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

视图模型

 private double _currentProgress; public double CurrentProgress { get { return _currentProgress; } private set { _currentProgress = value; OnPropertyChanged("CurrentProgress"); } } 

将两个属性添加到您的虚拟机:

 bool IsProgressBarVisible double ProgressValue 

如果您在虚拟机中启动了很长时间的操作,请将IsProgressBarVisible属性设置为true,并将ProgressValue期刊设置为当前进度值。 尝试计算一个介于0和100之间的值。这样做的好处是不必提供最小值和最大值。 asynchronous操作完成后,将IsProgressBarVisible设置为false。

在XAML中,绑定到这两个属性。 使用值转换器将布尔可见性转换为可见性。

 <ProgressBar Value="{Binding ProgressValue}" Visibility="{Binding IsProgressBarVisible,Converter={StaticResource BooleanToVisibility_ValueConverter}}"/>