c# - 在这个简单的 WPF 应用程序中实现进度条

Question

我有 MainWindow，它有它的 View 模型 MainWindowViewModel。窗口内有一个接受用户输入的文本框、几个用于过滤搜索的单选按钮和一个按钮。使用如下命令将按钮操作绑定(bind)到 View 模型:

<Button x:Name="btnSearch" Command="{Binding SearchByCommand, Mode=OneWay}" />

ViewModel 内部有:

public ICommand SearchByCommand
{
    get
    {
        if (_SearchByCommand == null)
        {
            _SearchByCommand = new RelayCommand(
                x => this.LoadData(this.SearchBy),
                x => { return !string.IsNullOrEmpty(this.SearchText); }
            );
        }
        return _SearchByCommand;
    }
}

和加载数据:

private void LoadData(string searchBy)
{
   switch(searchBy)
   ...
}

这工作得很好，但我不知道如何在此解决方案中实现进度条。当用户单击搜索按钮时，进度条应启动进度并卡住当前 UI。在 LoadData 方法中加载数据后，进度条的进度计数应该结束并再次启用 UI。

Answer 1

您可以使用扩展 WPF 工具包中的忙碌指示器:here .

然后您需要在另一个线程中进行处理 (LoadData)，以免卡住 UI。为此，简单的方法是使用后台 worker :

向您的 wm 添加一个 bool 值以指示应用程序何时繁忙:

private bool isBusy;
public bool IsBusy
{
    get { return isBusy; }
    set
    {
        this.isBusy = value;
        this.OnPropertyChanged("IsBusy");
    }
}

设置后台 worker :

private void LoadData(string searchBy)
{
    IsBusy = true;
    BackgroundWorker worker = new BackgroundWorker();
    worker.DoWork += (o, ea) =>
    {
        //Do your heavy work here
    };

    worker.RunWorkerCompleted += (o, ea) =>
    {
        IsBusy = false;
    };

    worker.RunWorkerAsync();
}

如果您想显示当前处理进度的进度条，您需要做更多的工作。首先，您需要将自定义样式应用于忙碌指示器:

<toolkit:BusyIndicator IsBusy="True" BusyContent="Processing..." >
    <extToolkit:BusyIndicator.ProgressBarStyle>
        <Style TargetType="ProgressBar">
            <Setter Property="IsIndeterminate" Value="False"/>
            <Setter Property="Height" Value="15"/>
            <Setter Property="Margin" Value="8,0,8,8"/>
            <Setter Property="Value" Value="{Binding ProgressValue}"/>
        </Style>
    </extToolkit:BusyIndicator.ProgressBarStyle>
</toolkit:BusyIndicator>

然后将 ProgressValue 属性添加到您的虚拟机:

private int progressValue ;
public int ProgressValue
{
    get { return progressValue ; }
    set
    {
        this.progressValue = value;
        this.OnPropertyChanged("ProgressValue ");
    }
}

并从后台工作人员报告进度:

BackgroundWorker worker = new BackgroundWorker();
worker.WorkerReportsProgress = true;
worker.DoWork += (o, ea) =>
    {
        //Do your heavy work here
        worker.ReportProgress(10);

        //Do your heavy work here
        worker.ReportProgress(20);

        //And so on
    };

worker.ProgressChanged += (o,ea) =>
    {
        ProgressValue = e.ProgressPercentage;
    };

worker.RunWorkerCompleted += (o, ea) =>
    {
      IsBusy = false;
    };