web-dev-qa-db-fra.com

Comment implémenter une barre de progression à l'aide du modèle MVVM

J'ai une application WPF qui est construite sur le modèle de conception MVVM.

Je souhaite implémenter une barre de progression dans l'application, qui suit le modèle MVVM.

Quelqu'un at-il des suggestions sur la façon de mettre en œuvre cela?

Merci d'avance

33
jpgooner

En règle générale, votre interface utilisateur se lierait simplement aux propriétés de votre machine virtuelle:

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

Votre VM utiliserait un BackgroundWorker pour effectuer le travail sur un thread d'arrière-plan et pour mettre à jour périodiquement la valeur CurrentProgress. Quelque chose comme ça:

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;
    }
}
56
Kent Boogaart

Utilisez un contrôle ProgressBar et liez sa propriété Value à une propriété du ViewModel:

Voir

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

ViewModel

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

Ajoutez deux propriétés à votre machine virtuelle:

bool IsProgressBarVisible
double ProgressValue

Si vous démarrez une opération de longue durée dans votre machine virtuelle, définissez la propriété IsProgressBarVisible sur true et définissez le périodique ProgressValue sur la valeur de progression actuelle. Essayez de calculer une valeur entre 0 et 100. Cela a l'avantage que vous n'avez pas à fournir une valeur minimale et maximale. Une fois l'opération asynchrone terminée, définissez IsProgressBarVisible sur false.

En XAML, liez à ces deux propriétés. Utilisez un convertisseur de valeur pour convertir la visibilité booléenne en visibilité.

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