小舞很执着

这个屌丝很懒，什么也没留下！

热门标签

wpf 异步命令_wpf 异步更新数据示例

作者：小舞很执着 | 2024-07-26 11:09:26

踩

wpf 异步更新数据示例

异步编程

针对异步 MVVM 应用程序的模式：命令

Stephen Cleary

下载代码示例

本文是关于将 async 和 await 与主流 Model-View-ViewModel (MVVM) 模式相结合的一系列文章中的第二篇。上次，我展示了如何数据绑定到异步操作，并开发了一个名为 NotifyTaskCompletion<TResult> 的键类型，其作用类似一个数据绑定友好型的 Task<TResult>（请参阅 msdn.microsoft.com/magazine/dn605875）。现在我将介绍 ICommand，这是一个 MVVM 应用程序用于定义用户操作（通常被数据绑定到按钮）的 .NET 接口，并探讨创建异步 ICommand 的意义。

此处的这些模式可能不会与所有情景完美契合，因此请根据需要进行调整。实际上，整篇文章以对异步命令类型的一系列改进为主线展开。在这些迭代过程的最后，您将最终获得如图 1 中所示的应用程序。这类似于我在上一篇文章中开发的应用程序，但这次，我为用户提供了要执行的实际命令。当用户单击“开始”按钮时，将从文本框读取 URL，并且该应用程序将对此 URL 上的字节数进行计数（人为设置的延迟之后）。在此操作正在进行时，用户无法启动另一个操作，但他能够取消此操作。

图 1：能够执行一个命令的应用程序

然后我将展示如何使用非常类似的方法创建任何数目的操作。图 2 显示了修改后的应用程序，“开始”按钮表示将操作添加到操作集中。

图 2：执行多个命令的应用程序

在开发此应用程序过程中，我将进行一些简化，以便将重点始终放在异步命令上，而不是实现细节上。首先，我不会使用命令执行参数。在真实应用程序中我几乎从不需要使用参数；但如果需要，本文中的模式可轻松进行扩展，将其包含在内。其次，我不亲自实现 ICommand.CanExecuteChanged。类似字段的标准事件将在某些 MVVM 平台上泄漏内存（请参阅 bit.ly/1bROnVj）。为使此代码保持简单，我使用 Windows Presentation Foundation (WPF) 内置的 CommandManager 来实现 CanExecuteChanged。

我还使用了简化的“服务层”，目前这只是一个静态方法，如图 3 所示。实际上该服务与我在上一篇文章中的服务相同，但进行了扩展，可支持取消操作。下一篇文章将采用适当的异步服务设计，但目前使用这个简化的服务即可。

图 3：服务层


  
  public static class MyService
{
  // bit.ly/1fCnbJ2
  public static async Task<int> DownloadAndCountBytesAsync(string url,
    CancellationToken token = new CancellationToken())
  {
    await Task.Delay(TimeSpan.FromSeconds(3), token).ConfigureAwait(false);
    var client = new HttpClient();
    using (var response = await client.GetAsync(url, token).ConfigureAwait(false))
    {
      var data = await
        response.Content.ReadAsByteArrayAsync().ConfigureAwait(false);
      return data.Length;
    }
  }
}

异步命令

开始前，迅速了解一下 ICommand 接口：


  
  public interface ICommand
{
  event EventHandler CanExecuteChanged;
  bool CanExecute(object parameter);
  void Execute(object parameter);
}

忽略 CanExecuteChanged 和参数，稍微思考一下异步命令将如何使用此接口。CanExecute 方法必是同步的；唯一可为异步的成员是 Execute。Execute 方法是为同步实现设计的，因此其返回 void。正如我在上一篇文章“异步编程的最佳做法”（msdn.microsoft.com/magazine/jj991977）中所提到的，应避免 async void 方法，除非它们是事件处理程序（或者事件处理程序的逻辑对等物）。ICommand.Execute 的实现在逻辑上是事件处理程序，因此可以是 async void。

但最好尽量减少 async void 方法中的代码，而将一个包含实际逻辑的 async Task 方法公开。这种做法可使代码更容易测试。本着这一宗旨，我建议将以下作为异步命令接口，图 4 中的代码作为基类：


  
  public interface IAsyncCommand : ICommand
{
  Task ExecuteAsync(object parameter);
}

图 4：异步命令的基类型


  
  public abstract class AsyncCommandBase : IAsyncCommand
{
  public abstract bool CanExecute(object parameter);
  public abstract Task ExecuteAsync(object parameter);
  public async void Execute(object parameter)
  {
    await ExecuteAsync(parameter);
  }
  public event EventHandler CanExecuteChanged
  {
    add { CommandManager.RequerySuggested += value; }
    remove { CommandManager.RequerySuggested -= value; }
  }
  protected void RaiseCanExecuteChanged()
  {
    CommandManager.InvalidateRequerySuggested();
  }
}

该基类负责两件事：它将 CanExecuteChanged 实现交给 CommandManager 类完成；通过调用 IAsyncCommand.ExecuteAsync 方法实现 async void ICommand.Execute 方法。它等待结果，以确保异步命令逻辑中的任何异常都将被正确提交到 UI 线程的主循环。

这颇为复杂，但其中每个类型都有一个用途。IAsyncCommand 可用于任何异步 ICommand 实现，其设计初衷是从 ViewModel 公开，供 View 和单元测试使用。AsyncCommandBase 提供所有异步 ICommand 公共的样板代码。

奠定了这一基础，我可以着手开始开发一个有效的异步命令。对于无返回值的同步操作，标准委托类型为 Action。异步对等物为 Func<Task>。图 5 显示了基于委托的 AsyncCommand 的第一次迭代。

图 5：对异步命令的第一次尝试


  
  public class AsyncCommand : AsyncCommandBase
{
  private readonly Func<Task> _command;
  public AsyncCommand(Func<Task> command)
  {
    _command = command;
  }
  public override bool CanExecute(object parameter)
  {
    return true;
  }
  public override Task ExecuteAsync(object parameter)
  {
    return _command();
  }
}

此时，UI 只有显示 URL 的文本框、启动 HTTP 请求的按钮，以及用于显示结果的标签。XAML 和 ViewModel 的基本部分很简单。以下为 MainWindow.xaml（跳过定位属性，例如 Margin）：


<Grid>
  <TextBox Text="{Binding Url}" />
  <Button Command="{Binding CountUrlBytesCommand}" 
      Content="Go" />
  <TextBlock Text="{Binding ByteCount}" />
</Grid>

图 6 显示了 MainWindowViewModel.cs。

图 6：第一个 MainWindowViewModel


  
  public sealed class MainWindowViewModel : INotifyPropertyChanged
{
  public MainWindowViewModel()
  {
    Url = "http://www.example.com/";
    CountUrlBytesCommand = new AsyncCommand(async () =>
    {
      ByteCount = await MyService.DownloadAndCountBytesAsync(Url);
    });
  }
  public string Url { get; set; } // Raises PropertyChanged
  public IAsyncCommand CountUrlBytesCommand { get; private set; }
  public int ByteCount { get; private set; } // Raises PropertyChanged
}

如果您执行该应用程序（示例代码下载中的 AsyncCommands1），您将注意到四种不良行为情况。第一，标签始终显示结果，甚至在单击按钮之前。第二，单击按钮后没有忙碌状态指示器来指示操作正在进行。第三，如果 HTTP 请求失败，则会将异常传递到 UI 主循环，从而导致应用程序崩溃。第四，如果用户做出了多个请求，则该用户无法辨别结果；由于服务器响应时间的不确定性，较早请求的结果可能覆盖较晚请求的结果。

这是一连串的问题！但在我迭代此设计之前，暂时考虑一下引发的问题的类型。当 UI 变成异步时，您不得不考虑 UI 中的额外状态。我建议您至少问自己三个问题：

此 UI 将如何显示错误？（我希望您的同步 UI 已经对此有了答案！）
当操作正在进行时，此 UI 的外观应如何？（例如，它是否将通过忙碌状态指示器及时提供反馈？）
当操作正在进行时，用户受到哪些限制？（例如，按钮是否禁用？）
当操作正在进行时，用户是否可发出额外命令？（例如，他能否取消操作？）
如果用户能够启动多个操作，UI 如何为每个操作提供完成或错误详细信息？（例如，UI 将使用“命令队列”样式还是弹出通知？）

通过数据绑定完成异步命令

第一个 AsyncCommand 迭代中的大部分问题与如何处理结果有关。真正需要的是找到某种类型，该类型包装 Task<T> 并提供一些数据绑定功能，使应用程序能够顺畅响应。幸好，在我的上一篇文章中开发的 NotifyTaskCompletion<T> 类型几乎完美地符合这些需求。我将在该类型中添加一个成员，以简化一些 AsyncCommand 逻辑：TaskCompletion 属性，表示操作完成，但不传播异常（或返回结果）。以下是对 NotifyTaskCompletion<T> 的修改：


  
  public NotifyTaskCompletion(Task<TResult> task)
{
  Task = task;
  if (!task.IsCompleted)
    TaskCompletion = WatchTaskAsync(task);
}
public Task TaskCompletion { get; private set; }

AsyncCommand 的下一迭代使用 NotifyTaskCompletion 来表示实际操作。这样一来，XAML 能够直接数据绑定到操作的结果和错误消息，并且在操作正在进行的过程中，还可使用数据绑定来显示相应的消息。新 AsyncCommand 现在具有表示实际操作的属性，如图 7 所示。

图 7：异步命令的第二次尝试


  
  public class AsyncCommand<TResult> : AsyncCommandBase, INotifyPropertyChanged
{
  private readonly Func<Task<TResult>> _command;
  private NotifyTaskCompletion<TResult> _execution;
  public AsyncCommand(Func<Task<TResult>> command)
  {
    _command = command;
  }
  public override bool CanExecute(object parameter)
  {
    return true;
  }
  public override Task ExecuteAsync(object parameter)
  {
    Execution = new NotifyTaskCompletion<TResult>(_command());
    return Execution.TaskCompletion;
  }
  // Raises PropertyChanged
  public NotifyTaskCompletion<TResult> Execution { get; private set; }
}

注意，AsyncCommand.ExecuteAsync 使用 TaskCompletion，而不是 Task。我不想将异常传播回 UI 主循环（如果其等待 Task 属性，则会发生这种情况）；而是通过数据绑定返回 TaskCompletion 并处理异常。我还在项目中添加了一个简单的 NullToVisibilityConverter，这样，忙碌状态指示器、结果和错误消息在单击按钮前都是隐藏的。图 8 显示了更新的 ViewModel 代码。

图 8：第二个 MainWindowViewModel


  
  public sealed class MainWindowViewModel : INotifyPropertyChanged
{
  public MainWindowViewModel()
  {
    Url = "http://www.example.com/";
    CountUrlBytesCommand = new AsyncCommand<int>(() => 
      MyService.DownloadAndCountBytesAsync(Url));
  }
  // Raises PropertyChanged
  public string Url { get; set; }
  public IAsyncCommand CountUrlBytesCommand { get; private set; }
}

图 9 显示了新 XAML 代码。

图 9：第二个 MainWindow XAML


<Grid>
  <TextBox Text="{Binding Url}" />
  <Button Command="{Binding CountUrlBytesCommand}" Content="Go" />
  <Grid Visibility="{Binding CountUrlBytesCommand.Execution,
    Converter={StaticResource NullToVisibilityConverter}}">
    <!--Busy indicator-->
    <Label Visibility="{Binding CountUrlBytesCommand.Execution.IsNotCompleted,
      Converter={StaticResource BooleanToVisibilityConverter}}"
      Content="Loading..." />
    <!--Results-->
    <Label Content="{Binding CountUrlBytesCommand.Execution.Result}"
      Visibility="{Binding CountUrlBytesCommand.Execution.IsSuccessfullyCompleted,
      Converter={StaticResource BooleanToVisibilityConverter}}" />
    <!--Error details-->
    <Label Content="{Binding CountUrlBytesCommand.Execution.ErrorMessage}"
      Visibility="{Binding CountUrlBytesCommand.Execution.IsFaulted,
      Converter={StaticResource BooleanToVisibilityConverter}}" Foreground="Red" />
  </Grid>
</Grid>

现在，此代码匹配示例代码中的 AsyncCommands2 项目。此代码负责解决初始解决方案中提及的所有问题：在第一个操作开始前，标签是隐藏的；有一个直接的忙碌状态指示器为用户提供反馈；捕获了异常，并且通过数据绑定更新了 UI；多个请求不再互相干扰。每个请求均创建一个新的 NotifyTaskCompletion 包装，其具有自己的独立 Result 和其他属性。NotifyTaskCompletion 作为异步操作的可数据绑定抽象。这允许多个请求，同时 UI 始终绑定到最新请求。但在许多真实情况中，相应解决方案是禁用多个请求。即，要在操作正在进行时让命令从 CanExecute 返回 false。对 AsyncCommand 进行些许修改即可，如图 10 所示。

图 10：禁用多个请求


  
  public class AsyncCommand<TResult> : AsyncCommandBase, INotifyPropertyChanged
{
  public override bool CanExecute(object parameter)
  {
    return Execution == null || Execution.IsCompleted;
  }
  public override async Task ExecuteAsync(object parameter)
  {
    Execution = new NotifyTaskCompletion<TResult>(_command());
    RaiseCanExecuteChanged();
    await Execution.TaskCompletion;
    RaiseCanExecuteChanged();
  }
}

现在，此代码匹配示例代码中的 AsyncCommands3 项目。此按钮在操作进行过程中被禁用。

添加取消

许多异步操作所用的时间量可能不同。例如，HTTP 请求通常可能非常快速地做出响应，甚至快于用户响应。但如果网络较慢，或者服务器繁忙，同一 HTTP 请求可能会导致相当长的延迟。设计异步 UI 的部分原因就是针对这种情况。当前解决方案已经具有忙碌状态指示器。设计异步 UI 时，您可能还选择为用户提供更多选择，取消操作是一个常见选择。

取消本身始终是同步操作 — 请求取消的行为需立即执行。取消的最棘手部分是它何时运行；应仅在异步命令正在进行时才能够执行。对图 11 中 AsyncCommand 的修改提供了嵌套的取消命令，并且在异步命令开始和结束时会发出该取消命令的通知。

图 11：添加取消


  
  public class AsyncCommand<TResult> : AsyncCommandBase, INotifyPropertyChanged
{
  private readonly Func<CancellationToken, Task<TResult>> _command;
  private readonly CancelAsyncCommand _cancelCommand;
  private NotifyTaskCompletion<TResult> _execution;
  public AsyncCommand(Func<CancellationToken, Task<TResult>> command)
  {
    _command = command;
    _cancelCommand = new CancelAsyncCommand();
  }
  public override async Task ExecuteAsync(object parameter)
  {
    _cancelCommand.NotifyCommandStarting();
    Execution = new NotifyTaskCompletion<TResult>(_command(_cancelCommand.Token));
    RaiseCanExecuteChanged();
    await Execution.TaskCompletion;
    _cancelCommand.NotifyCommandFinished();
    RaiseCanExecuteChanged();
  }
  public ICommand CancelCommand
  {
    get { return _cancelCommand; }
  }
  private sealed class CancelAsyncCommand : ICommand
  {
    private CancellationTokenSource _cts = new CancellationTokenSource();
    private bool _commandExecuting;
    public CancellationToken Token { get { return _cts.Token; } }
    public void NotifyCommandStarting()
    {
      _commandExecuting = true;
      if (!_cts.IsCancellationRequested)
        return;
      _cts = new CancellationTokenSource();
      RaiseCanExecuteChanged();
    }
    public void NotifyCommandFinished()
    {
      _commandExecuting = false;
      RaiseCanExecuteChanged();
    }
    bool ICommand.CanExecute(object parameter)
    {
      return _commandExecuting && !_cts.IsCancellationRequested;
    }
    void ICommand.Execute(object parameter)
    {
      _cts.Cancel();
      RaiseCanExecuteChanged();
    }
  }
}

将“取消”按钮（和取消的标签）添加到 UI 十分简单，如图 12 所示。

图 12：添加“取消”按钮


<Grid>
  <TextBox Text="{Binding Url}" />
  <Button Command="{Binding CountUrlBytesCommand}" Content="Go" />
  <Button Command="{Binding CountUrlBytesCommand.CancelCommand}" Content="Cancel" />
  <Grid Visibility="{Binding CountUrlBytesCommand.Execution,
    Converter={StaticResource NullToVisibilityConverter}}">
    <!--Busy indicator-->
    <Label Content="Loading..."
      Visibility="{Binding CountUrlBytesCommand.Execution.IsNotCompleted,
      Converter={StaticResource BooleanToVisibilityConverter}}" />
    <!--Results-->
    <Label Content="{Binding CountUrlBytesCommand.Execution.Result}"
      Visibility="{Binding CountUrlBytesCommand.Execution.IsSuccessfullyCompleted,
      Converter={StaticResource BooleanToVisibilityConverter}}" />
    <!--Error details-->
    <Label Content="{Binding CountUrlBytesCommand.Execution.ErrorMessage}"
      Visibility="{Binding CountUrlBytesCommand.Execution.IsFaulted,
      Converter={StaticResource BooleanToVisibilityConverter}}" Foreground="Red" />
    <!--Canceled-->
    <Label Content="Canceled"
      Visibility="{Binding CountUrlBytesCommand.Execution.IsCanceled,
      Converter={StaticResource BooleanToVisibilityConverter}}" Foreground="Blue" />
  </Grid>
</Grid>

现在，如果您执行该应用程序（示例代码中的 AsyncCommands4），您将发现“取消”按钮最初被禁用。当您单击“开始”按钮时会启用该按钮，并且其启用状态会一直保持到操作完成为止（无论成功、失败还是取消）。您现在拥有了可以说是完整的异步操作 UI。

简单工作队列

到目前为止，我一直在着重探讨一次只针对一个操作的 UI。在许多情况下这些都是必要的，但有时您需要能够启动多个异步操作。我认为，作为一个社区，我们尚未拥有用于处理多个异步操作的真正好的 UX。两个常用方法是使用工作队列或通知系统，但这两个方法都不理想。

工作队列显示集合中的所有异步操作；这会为用户提供最大的可见性和控制，但对于典型最终用户来说处理起来太过复杂。通知系统会在操作正在运行时隐藏它们，如果其中任何一个操作失败，该系统都会弹出通知（当它们成功完成时也可能弹出通知）。通知系统更便于用户使用，但它不提供全面可见性和工作队列的功能）（例如，难以将取消插入基于通知的系统中）。我必须找到可处理多个异步操作的理想 UX。

也就是说，此时可扩展示例代码，以便不太困难地支持多操作情况。在现有代码中，“开始”按钮和“取消”按钮在概念上均与单一异步操作相关。新 UI 将更改“开始”按钮，使其表示“启动一个新异步操作并将其添加到操作列表中”。这意味着“开始”按钮现在实际上是同步的。我将一个简单（同步）的 DelegateCommand 添加到了解决方案中，现在可更新 ViewModel 和 XAML，如图 13 和图 14 所示。

图 13：用于多个命令的 ViewModel


  
  public sealed class CountUrlBytesViewModel
{
  public CountUrlBytesViewModel(MainWindowViewModel parent, string url,
    IAsyncCommand command)
  {
    LoadingMessage = "Loading (" + url + ")...";
    Command = command;
    RemoveCommand = new DelegateCommand(() => parent.Operations.Remove(this));
  }
  public string LoadingMessage { get; private set; }
  public IAsyncCommand Command { get; private set; }
  public ICommand RemoveCommand { get; private set; }
}
public sealed class MainWindowViewModel : INotifyPropertyChanged
{
  public MainWindowViewModel()
  {
    Url = "http://www.example.com/";
    Operations = new ObservableCollection<CountUrlBytesViewModel>();
    CountUrlBytesCommand = new DelegateCommand(() =>
    {
      var countBytes = new AsyncCommand<int>(token =>
        MyService.DownloadAndCountBytesAsync(
        Url, token));
      countBytes.Execute(null);
      Operations.Add(new CountUrlBytesViewModel(this, Url, countBytes));
    });
  }
  public string Url { get; set; } // Raises PropertyChanged
  public ObservableCollection<CountUrlBytesViewModel> Operations
    { get; private set; }
  public ICommand CountUrlBytesCommand { get; private set; }
}

图 14：用于多个命令的 XAML


<Grid>
  <TextBox Text="{Binding Url}" />
  <Button Command="{Binding CountUrlBytesCommand}" Content="Go" />
  <ItemsControl ItemsSource="{Binding Operations}">
    <ItemsControl.ItemTemplate>
      <DataTemplate>
        <Grid>
          <!--Busy indicator-->
          <Label Content="{Binding LoadingMessage}"
            Visibility="{Binding Command.Execution.IsNotCompleted,
            Converter={StaticResource BooleanToVisibilityConverter}}" />
          <!--Results-->
          <Label Content="{Binding Command.Execution.Result}"
            Visibility="{Binding Command.Execution.IsSuccessfullyCompleted,
            Converter={StaticResource BooleanToVisibilityConverter}}" />
          <!--Error details-->
          <Label Content="{Binding Command.Execution.ErrorMessage}"
            Visibility="{Binding Command.Execution.IsFaulted,
            Converter={StaticResource BooleanToVisibilityConverter}}"
            Foreground="Red" />
          <!--Canceled-->
          <Label Content="Canceled"
            Visibility="{Binding Command.Execution.IsCanceled,
            Converter={StaticResource BooleanToVisibilityConverter}}"
            Foreground="Blue" />
          <Button Command="{Binding Command.CancelCommand}" Content="Cancel" />
          <Button Command="{Binding RemoveCommand}" Content="X" />
        </Grid>
      </DataTemplate>
    </ItemsControl.ItemTemplate>
  </ItemsControl>
</Grid>

此代码等同于示例代码中的 AsyncCommandsWithQueue 项目。当用户单击“开始”按钮时，将创建一个新 AsyncCommand，并且会将其包装到子 ViewModel (CountUrlBytesViewModel) 中。然后该子 ViewModel 实例会被添加到操作列表中。与这个特殊操作相关联的所有信息（各个标签和“取消”按钮）显示在工作队列的数据模板中。我还添加了一个简单的按钮“X”，该按钮会将项目从队列中移除。

这是一个非常基本的工作队列，我做出了一些有关设计的假设。例如，在将操作从队列中移除时，不会自动取消此操作。当您开始使用多个异步操作时，我建议您最少问自己三个额外问题：

用户如何知道哪个通知或工作项针对哪个操作？（例如，在该工作队列示例中的忙碌状态指示器包含其正在下载的 URL）。
用户是否需要知道每个结果？（例如，仅通知用户错误即可，或者自动将成功操作从工作队列中移除）。

总结

目前对于异步命令还没有适合每个人需求的通用解决方案。开发者社区仍在探索异步 UI 模式。在本文中，我的目标是展示如何在 MVVM 应用程序上下文中考虑异步命令，尤其是考虑在 UI 变为异步时必须解决的 UX 问题。但记住，本文以及示例代码中的模式只是范例，应根据应用程序的需求调整它们。

特别要指出的是，关于多个异步操作还没有完美案例。工作队列和通知都有弊端，在我看来今后应有通用的 UX。当更多 UI 变为异步时，将会有更多人思考该问题，革命性的突破可能会马上出现。亲爱的读者，请谈谈您对该问题的想法。或许您将是新 UX 的发现者。

另外可别忘了发布。在本文中，我从最基本的异步 ICommand 实现开始，然后逐渐添加功能，最后得到适用于大多数新型应用程序的结果。其结果还完全可进行单元测试；由于 async void ICommand.Execute 方法仅调用返回任务的 IAsyncCommand.ExecuteAsync 方法，因此您可以在单元测试中直接使用 ExecuteAsync。

在我的上一篇文章中，我开发了 NotifyTaskCompletion<T>，这是围绕 Task<T> 的一个数据绑定包装。在这篇文章中，我展示了如何开发 AsyncCommand<T> 的一个类型，即，ICommand 的异步实现。在我的下一篇文章中，我将涉及异步服务。请记住，异步 MVVM 模式仍是非常新的概念；不要担心违背它们，革新您自己的解决方案。

Stephen Cleary 生活在密歇根州北部，他是一位丈夫、父亲和程序员。他已从事了 16 年的多线程和异步编程工作，自第一个 CTP 以来便在使用 Microsoft .NET Framework 中的异步支持。他的主页（包括博客）位于 stephencleary.com。

衷心感谢以下 Microsoft 技术专家对本文的审阅：James McCaffrey 和 Stephen Toub

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/884953

wpf 异步命令_wpf 异步更新数据 示例