(2/7).NET Core 3 WPF MVVM框架 Prism系列的命令

(2/7).NET Core 3 WPF MVVM框架 Prism系列的命令

如何在.NET Core3環境下使用MVVM框架Prism的命令的用法

最後更新 2023/6/10 下午11:41
RyzenAdorer
預計閱讀 13 分鐘
分類
Blazor
專題
WPF MVVM框架 Prism系列
標籤
.NET C# Blazor WPF Prism

本文來自轉載

原文作者：RyzenAdorer

原文標題：.NET Core 3 WPF MVVM 框架 Prism 系列之命令

原文鏈接：https://www.cnblogs.com/ryzen/p/12143825.html

本文將介紹如何在 .NET Core 3 環境下使用 MVVM 框架 Prism 的命令用法。

一. 建立 DelegateCommand 命令

我們在上一篇 .NET Core 3 WPF MVVM 框架 Prism 系列之資料繫結 中知道 Prism 實作資料繫結的方式。我們按照標準寫法來實作：分別建立 Views 資料夾和 ViewModels 資料夾，將 MainWindow 放在 Views 資料夾下，再在 ViewModels 資料夾下建立 MainWindowViewModel 類別，如下：

XAML 程式碼如下：

<Window
  x:Class="CommandSample.Views.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:prism="http://prismlibrary.com/"
  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:local="clr-namespace:CommandSample"
  mc:Ignorable="d"
  Title="MainWindow"
  Height="350"
  Width="450"
  prism:ViewModelLocator.AutoWireViewModel="True"
>
  <StackPanel>
    <TextBox Margin="10" Text="{Binding CurrentTime}" FontSize="32" />
    <button
      x:Name="mybtn"
      FontSize="30"
      Content="Click Me"
      Margin="10"
      Height="60"
      Command="{Binding GetCurrentTimeCommand}"
    />
    <Viewbox Height="80">
      <CheckBox
        IsChecked="{Binding IsCanExcute}"
        Content="CanExcute"
        Margin="10"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
      />
    </Viewbox>
  </StackPanel>
</Window>

MainWindowViewModel 類別程式碼如下：

using Prism.Commands;
using Prism.Mvvm;
using System;
using System.Windows.Controls;

namespace CommandSample.ViewModels
{
   public class MainWindowViewModel: BindableBase
    {
        private bool _isCanExcute;
        public bool IsCanExcute
        {
            get { return _isCanExcute; }
            set
            {
                SetProperty(ref _isCanExcute, value);
                GetCurrentTimeCommand.RaiseCanExecuteChanged();
            }
        }

        private string _currentTime;
        public string CurrentTime
        {
            get { return _currentTime; }
            set { SetProperty(ref _currentTime, value); }
        }

        private DelegateCommand _getCurrentTimeCommand;
        public DelegateCommand GetCurrentTimeCommand =>
            _getCurrentTimeCommand ?? (_getCurrentTimeCommand = new DelegateCommand(ExecuteGetCurrentTimeCommand, CanExecuteGetCurrentTimeCommand));

        void ExecuteGetCurrentTimeCommand()
        {
            this.CurrentTime = DateTime.Now.ToString();
        }

        bool CanExecuteGetCurrentTimeCommand()
        {
            return IsCanExcute;
        }
    }
}

執行效果如下：

在程式碼中，我們透過 using Prism.Mvvm 引入並繼承 BindableBase，因為我們要用到屬性變更通知方法 SetProperty，這在上一篇已知道。再來我們 using Prism.Commands，我們所定義的 DelegateCommand 類型就在該命名空間下。我們知道，ICommand 介面有三個函式成員：事件 CanExecuteChanged、傳回值為 bool 且帶一個 object 參數的 CanExecute 方法、無傳回值且帶一個 object 參數的 Execute 方法。很明顯我們實作的 GetCurrentTimeCommand 命令就是一個不帶參數的命令。

另一個值得注意的地方是，我們透過 Checkbox 的 IsChecked 繫結了一個 bool 屬性 IsCanExcute，且在 CanExecute 方法中 return IsCanExcute。我們都知道 CanExecute 控制著 Execute 方法是否能夠執行，也控制著 Button 的 IsEnable 狀態。而在 IsCanExcute 的 set 方法中我們增加了一句：

GetCurrentTimeCommand.RaiseCanExecuteChanged();

其實透過 Prism 原始碼我們可以知道 RaiseCanExecuteChanged 方法就是內部呼叫 ICommand 介面下的 CanExecuteChanged 事件以呼叫 CanExecute 方法：

public void RaiseCanExecuteChanged()
{
    OnCanExecuteChanged();
}

protected virtual void OnCanExecuteChanged()
{
    EventHandler handler = this.CanExecuteChanged;
    if (handler != null)
    {
        if (_synchronizationContext != null && _synchronizationContext != SynchronizationContext.Current)
        {
            _synchronizationContext.Post(delegate
            {
                handler(this, EventArgs.Empty);
            }, null);
        }
        else
        {
            handler(this, EventArgs.Empty);
        }
    }
}

實際上，Prism 還提供了一個更簡潔優雅的寫法：

private bool _isCanExcute;
 public bool IsCanExcute
 {
    get { return _isCanExcute; }
    set { SetProperty(ref _isCanExcute, value);}
 }

 private DelegateCommand _getCurrentTimeCommand;
 public DelegateCommand GetCurrentTimeCommand =>
    _getCurrentTimeCommand ?? (_getCurrentTimeCommand = new  DelegateCommand(ExecuteGetCurrentTimeCommand).ObservesCanExecute(()=> IsCanExcute));

 void ExecuteGetCurrentTimeCommand()
 {
    this.CurrentTime = DateTime.Now.ToString();
 }

其中使用了 ObservesCanExecute 方法，其實在該方法內部也會去呼叫 RaiseCanExecuteChanged 方法。

透過上面的程式碼，我們可以引出兩個問題：

  • 如何建立帶參數的 DelegateCommand？
  • 假如控制項不包含相依屬性 Command，我們要用到該控制項的事件，如何轉為命令？

二. 建立 DelegateCommand 帶參命令

在建立帶參命令之前，我們可以先看看 DelegateCommand 的繼承鏈和公開的方法，詳細的實作可以去看原始碼。

其實已經很明顯了：我們之前建立的 DelegateCommand 是非泛型版本；當建立一個泛型版本的 DelegateCommand<T>，那麼 T 就是我們要傳入的命令參數的型別。現在我們可以把觸發命令的 Button 本身作為命令參數傳入。

XAML 程式碼如下：

<button
  x:Name="mybtn"
  FontSize="30"
  Content="Click Me"
  Margin="10"
  Height="60"
  Command="{Binding GetCurrentTimeCommand}"
  CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}}"
/>

GetCurrentTimeCommand 命令程式碼改為如下：

private DelegateCommand<object> _getCurrentTimeCommand;
public DelegateCommand<object> GetCurrentTimeCommand =>
    _getCurrentTimeCommand ?? (_getCurrentTimeCommand = new DelegateCommand<object>(ExecuteGetCurrentTimeCommand).ObservesCanExecute(()=> IsCanExcute));

 void ExecuteGetCurrentTimeCommand(object parameter)
 {
    this.CurrentTime =((Button)parameter)?.Name+ DateTime.Now.ToString();
 }

我們來看看執行效果：

三. 事件轉命令

在大多數擁有 Command 相依屬性的控制項中，通常是由於繼承了 ICommandSource 介面。ICommandSource 介面擁有三個函式成員：ICommand 介面型別的屬性 Command、object 型別的屬性 CommandParameter、IInputElement 型別的屬性 CommandTarget。而最基本繼承 ICommandSource 介面的兩個基礎類別是 ButtonBase 和 MenuItem。因此像 Button、Checkbox、RadioButton 等繼承自 ButtonBase 的控制項擁有 Command 相依屬性，而 MenuItem 也是同理。但是我們常用的 TextBox 那些就沒有。

現在我們有這種需求：在這個介面上新增第二個 TextBox，當 TextBox 的文字變更時，需要將按鈕的名稱和第二個 TextBox 的文字字串合併更新到第一個 TextBox 上。我們第一直覺肯定會想到用 TextBox 的 TextChanged 事件，那麼如何將 TextChanged 轉為命令？

首先我們在 XAML 介面引入：

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

該程式集 System.Windows.Interactivity.dll 是在 Expression Blend SDK 中的，而 Prism 的套件也將其引入包含在內，因此我們可以直接引入。然後我們新增第二個 TextBox 的程式碼：

<TextBox
  Margin="10"
  FontSize="32"
  Text="{Binding Foo,UpdateSourceTrigger=PropertyChanged}"
>
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="TextChanged">
      <i:InvokeCommandAction
        Command="{Binding TextChangedCommand}"
        CommandParameter="{Binding ElementName=mybtn}"
      />
    </i:EventTrigger>
  </i:Interaction.Triggers>
</TextBox>

MainWindowViewModel 新增程式碼：

private string _foo;
public string Foo
{
     get { return _foo; }
     set { SetProperty(ref _foo, value); }
}

private DelegateCommand<object> _textChangedCommand;
public DelegateCommand<object> TextChangedCommand =>
  _textChangedCommand ?? (_textChangedCommand = new DelegateCommand<object>(ExecuteTextChangedCommand));

void ExecuteTextChangedCommand(object parameter)
{
  this.CurrentTime = Foo + ((Button)parameter)?.Name;
}

執行效果如下：

上面我們在 XAML 程式碼中就是添加了對 TextBox 的 TextChanged 事件的 Blend EventTrigger 的偵聽。每當觸發該事件，InvokeCommandAction 就會去呼叫 TextChangedCommand 命令。

3.1. 將 EventArgs 參數傳遞給命令

我們知道，TextChanged 事件有一個 RoutedEventArgs 參數 TextChangedEventArgs。假如我們要拿到該 TextChangedEventArgs 或 RoutedEventArgs 參數裡面的屬性，該如何拿到？使用 System.Windows.Interactivity 命名空間下的 InvokeCommandAction 是無法做到的，這時候我們要用到 Prism 自帶的 InvokeCommandAction 的 TriggerParameterPath 屬性。現在我們有個要求：要在第一個 TextBox 顯示我們第二個 TextBox 輸入的字串加上觸發該事件的控制項的名稱。那麼我們可以使用其父類別 RoutedEventArgs 的 Source 屬性，而激發該事件的控制項就是第二個 TextBox。

XAML 程式碼修改如下：

<TextBox
  x:Name="myTextBox"
  Margin="10"
  FontSize="32"
  Text="{Binding Foo,UpdateSourceTrigger=PropertyChanged}"
>
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="TextChanged">
      <prism:InvokeCommandAction
        Command="{Binding TextChangedCommand}"
        TriggerParameterPath="Source"
      />
    </i:EventTrigger>
  </i:Interaction.Triggers>
</TextBox>

MainWindowViewModel 修改如下：

void ExecuteTextChangedCommand(object parameter)
{
    this.CurrentTime = Foo + ((TextBox)parameter)?.Name;
}

實作效果：

還有一個有趣的現象：假如上述 XAML 程式碼將 TriggerParameterPath 去掉，我們其實拿到的是 TextChangedEventArgs。

四. 實作基於 Task 的命令

首先我們在介面上新增一個新的按鈕，用來綁定新的基於 Task 的命令。我們要做的就是點擊該按鈕後，第一個 TextBox 在 5 秒後顯示 "Hello Prism!"，且期間 UI 介面不阻塞。

XAML 介面新增按鈕程式碼如下：

<button
  x:Name="mybtn1"
  FontSize="30"
  Content="Click Me 1"
  Margin="10"
  Height="60"
  Command="{Binding AsyncCommand}"
/>

MainWindowViewModel 新增程式碼：

private DelegateCommand _asyncCommand;
  public DelegateCommand AsyncCommand =>
     _asyncCommand ?? (_asyncCommand = new DelegateCommand(ExecuteAsyncCommand));

  async void ExecuteAsyncCommand()
  {
     await ExampleMethodAsync();
  }

  async Task ExampleMethodAsync()
  {
     await Task.Run(()=>
     {
        Thread.Sleep(5000);
        this.CurrentTime = "Hello Prism!";
     } );
  }

也可以更簡潔的寫法：

private DelegateCommand _asyncCommand;
 public DelegateCommand AsyncCommand =>
    _asyncCommand ?? (_asyncCommand = new DelegateCommand( async()=>await ExecuteAsyncCommand()));

 Task ExecuteAsyncCommand()
 {
    return Task.Run(() =>
    {
       Thread.Sleep(5000);
       this.CurrentTime = "Hello Prism!";
    });
  }

直接看效果：

五. 建立複合命令

Prism 提供 CompositeCommand 類別支援複合命令。什麼是複合命令？我們可能有這種場景：一個主介面的不同子視窗都有其各自的業務。假如我們可以將上面的例子稍微改一下，我們分為三個不同子視窗，三個分別用來顯示目前年份、月日、時分秒。我們希望在主視窗提供一個按鈕，點擊後能夠使它們同時顯示。這時候就有一種關係存在了：主視窗按鈕依賴於三個子視窗的按鈕，而子視窗的按鈕不依賴於主視窗的按鈕。

下面是建立和使用一個 Prism 標準複合命令的流程：

  • 建立一個全域的複合命令
  • 透過 IOC 容器註冊其為單例
  • 給複合命令註冊子命令
  • 繫結複合命令

5.1. 建立一個全域的複合命令

首先，我們建立一個類別庫專案，新增 ApplicationCommands 類別作為全域命令類別，程式碼如下：

public interface IApplicationCommands
{
    CompositeCommand GetCurrentAllTimeCommand { get; }
}

public class ApplicationCommands : IApplicationCommands
{
   private CompositeCommand _getCurrentAllTimeCommand = new CompositeCommand();
   public CompositeCommand GetCurrentAllTimeCommand
   {
        get { return _getCurrentAllTimeCommand; }
   }
}

其中我們建立了 IApplicationCommands 介面，讓 ApplicationCommands 實作了該介面，目的是為了下一步透過 IOC 容器註冊其為全域的單例介面。

5.2. 透過 IOC 容器註冊其為單例

我們建立一個新的專案作為主視窗，用來顯示子視窗和使用複合命令。關鍵部分程式碼如下：

App.cs 程式碼：

using Prism.Unity;
using Prism.Ioc;
using System.Windows;
using CompositeCommandsSample.Views;
using Prism.Modularity;
using CompositeCommandsCore;

namespace CompositeCommandsSample
{

 public partial class App : PrismApplication
 {
     protected override Window CreateShell()
     {
         return Container.Resolve<MainWindow>();
     }

     // 透過 IOC 容器註冊 IApplicationCommands 為單例
     protected override void RegisterTypes(IContainerRegistry containerRegistry)
     {
        containerRegistry.RegisterSingleton<IApplicationCommands, ApplicationCommands>();
     }

     // 註冊子視窗模組
     protected override void ConfigureModuleCatalog(IModuleCatalog moduleCatalog)
     {
        moduleCatalog.AddModule<CommandSample.CommandSampleMoudle>();
     }
  }
}

5.3. 給複合命令註冊子命令

我們在之前的 CommandSample 解決方案下的 Views 資料夾中新增兩個 UserControl，分別用來顯示月日和時分秒；在其 ViewModels 資料夾中新增兩個 UserControl 的 ViewModel，並將之前的 MainWindow 也改為 UserControl。大致結構如下圖：

關鍵部分程式碼：

GetHourTabViewModel.cs：

IApplicationCommands _applicationCommands;

public GetHourTabViewModel(IApplicationCommands applicationCommands)
{
    _applicationCommands = applicationCommands;
    // 給複合命令 GetCurrentAllTimeCommand 註冊子命令 GetHourCommand
    _applicationCommands.GetCurrentAllTimeCommand.RegisterCommand(GetHourCommand);
}

private DelegateCommand _getHourCommand;
public DelegateCommand GetHourCommand =>
   _getHourCommand ?? (_getHourCommand = new DelegateCommand(ExecuteGetHourCommand).ObservesCanExecute(() => IsCanExcute));

void ExecuteGetHourCommand()
{
   this.CurrentHour = DateTime.Now.ToString("HH:mm:ss");
}

GetMonthDayTabViewModel.cs：

IApplicationCommands _applicationCommands;

 public GetMonthDayTabViewModel(IApplicationCommands applicationCommands)
 {
     _applicationCommands = applicationCommands;
     // 給複合命令 GetCurrentAllTimeCommand 註冊子命令 GetMonthCommand
     _applicationCommands.GetCurrentAllTimeCommand.RegisterCommand(GetMonthCommand);
 }

 private DelegateCommand _getMonthCommand;
 public DelegateCommand GetMonthCommand =>
      _getMonthCommand ?? (_getMonthCommand = new DelegateCommand(ExecuteCommandName).ObservesCanExecute(()=>IsCanExcute));

 void ExecuteCommandName()
 {
    this.CurrentMonthDay = DateTime.Now.ToString("MM:dd");
 }

MainWindowViewModel.cs：

IApplicationCommands _applicationCommands;

public MainWindowViewModel(IApplicationCommands applicationCommands)
{
    _applicationCommands = applicationCommands;
    // 給複合命令 GetCurrentAllTimeCommand 註冊子命令 GetYearCommand
    _applicationCommands.GetCurrentAllTimeCommand.RegisterCommand(GetYearCommand);
}

private DelegateCommand _getYearCommand;
public DelegateCommand GetYearCommand =>
   _getYearCommand ?? (_getYearCommand = new DelegateCommand(ExecuteGetYearCommand).ObservesCanExecute(()=> IsCanExcute));

void ExecuteGetYearCommand()
{
   this.CurrentTime =DateTime.Now.ToString("yyyy");
}

CommandSampleMoudle.cs：

using CommandSample.ViewModels;
using CommandSample.Views;
using Prism.Ioc;
using Prism.Modularity;
using Prism.Regions;

namespace CommandSample
{
  public class CommandSampleMoudle : IModule
  {
    public void OnInitialized(IContainerProvider containerProvider)
    {
       var regionManager = containerProvider.Resolve<IRegionManager>();
       IRegion region= regionManager.Regions["ContentRegion"];

       var mainWindow = containerProvider.Resolve<MainWindow>();
       (mainWindow.DataContext as MainWindowViewModel).Title = "GetYearTab";
       region.Add(mainWindow);

       var getMonthTab = containerProvider.Resolve<GetMonthDayTab>();
       (getMonthTab.DataContext as GetMonthDayTabViewModel).Title = "GetMonthDayTab";
       region.Add(getMonthTab);

       var getHourTab = containerProvider.Resolve<GetHourTab>();
       (getHourTab.DataContext as GetHourTabViewModel).Title = "GetHourTab";
       region.Add(getHourTab);
    }

    public void RegisterTypes(IContainerRegistry containerRegistry)
    {

    }
  }
}

5.4. 繫結複合命令

主視窗 XAML 程式碼：

<Window
  x:Class="CompositeCommandsSample.Views.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:prism="http://prismlibrary.com/"
  xmlns:local="clr-namespace:CompositeCommandsSample"
  mc:Ignorable="d"
  prism:ViewModelLocator.AutoWireViewModel="True"
  Title="MainWindow"
  Height="650"
  Width="800"
>
  <Window.Resources>
    <style TargetType="TabItem">
      <Setter Property="Header" Value="{Binding DataContext.Title}"/>
    </style>
  </Window.Resources>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <button
      Content="GetCurrentTime"
      FontSize="30"
      Margin="10"
      Command="{Binding ApplicationCommands.GetCurrentAllTimeCommand}"
    />
    <TabControl Grid.Row="1" prism:RegionManager.RegionName="ContentRegion" />
  </Grid>
</Window>

MainWindowViewModel.cs：

using CompositeCommandsCore;
using Prism.Mvvm;

namespace CompositeCommandsSample.ViewModels
{
  public  class MainWindowViewModel:BindableBase
  {
    private IApplicationCommands _applicationCommands;
    public IApplicationCommands  ApplicationCommands
    {
       get { return _applicationCommands; }
       set { SetProperty(ref _applicationCommands, value); }
    }

    public MainWindowViewModel(IApplicationCommands applicationCommands)
    {
        this.ApplicationCommands = applicationCommands;
    }
  }
}

最後看看實際的效果如何：

最後，複合命令也驗證了我們一開始說的關係：複合命令依賴於子命令，但子命令不依賴於複合命令。因此，只有當三個子命令都是可執行時，才能執行複合命令。其中用到的 Prism 模組化知識，我們下一篇會仔細探討。

繼續探索

延伸閱讀

更多文章
友情連結
林德熙 YouZack WTM 工具小站 可乐不加冰 加菲的部落格 Furion 懒得勤快 迷恋自留地 52ABP dotnet全栈開發 程序设计实验室 江湖人士 King-AbpVnext-Pro