.NET Core 3 WPF MVVM框架 Prism系列之命令

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

一.建立DelegateCommand命令#

咱們在上一篇.NET Core 3 WPF MVVM框架 Prism系列之數據綁定中知道prism實現數據綁定的方式，咱們按照標準的寫法來實現，咱們分別建立Views文件夾和ViewModels文件夾，將MainWindow放在Views文件夾下，再在ViewModels文件夾下面建立MainWindowViewModel類，以下：express

xaml代碼以下：app

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

運行效果以下：async

在代碼中，咱們經過using Prism.Mvvm引入繼承BindableBase，由於咱們要用到屬性改變通知方法SetProperty，這在咱們上一篇就知道了，再來咱們using Prism.Commands，咱們所定義的DelegateCommand類型就在該命名空間下，咱們知道，ICommand接口是有三個函數成員的，事件CanExecuteChanged，一個返回值bool的，且帶一個參數爲object的CanExecute方法，一個無返回值且帶一個參數爲object的Execute方法，很明顯咱們實現的GetCurrentTimeCommand命令就是一個不帶參數的命令ide

還有一個值得注意的是，咱們經過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還提供了一個更簡潔優雅的寫法：this

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方法spa

咱們經過上面代碼咱們能夠會引出兩個問題：

如何建立帶參數的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的文本變化時，須要將按鈕的Name和第二個Textbox的文本字符串合併更新到第一個Textbox上，咱們第一直覺確定會想到用Textbox的TextChanged事件，那麼如何將TextChanged轉爲命令？

首先咱們在xmal界面引入：

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命令

將EventArgs參數傳遞給命令#

咱們知道，TextChanged事件是有個RoutedEventArgs參數TextChangedEventArgs，假如咱們要拿到該TextChangedEventArgs或者是RoutedEventArgs參數裏面的屬性，那麼該怎麼拿到，咱們使用System.Windows.Interactivity的NameSpace下的InvokeCommandAction是不能作到的，這時候咱們要用到prism自帶的InvokeCommandAction的TriggerParameterPath屬性，咱們如今有個要求，咱們要在第一個TextBox，顯示咱們第二個TextBox輸入的字符串加上觸發該事件的控件的名字，那麼咱們能夠用到其父類RoutedEventArgs的Soucre屬性，而激發該事件的控件就是第二個TextBox

xaml代碼修改以下：

<TextBox x:Name="myTextBox" Margin="10" FontSize="32" Text="{Binding Foo,UpdateSourceTrigger=PropertyChanged}" TextChanged="TextBox_TextChanged">
            <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容器註冊其爲單例
給複合命令註冊子命令
綁定複合命令

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容器註冊其爲全局的單例接口

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

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) { } } }

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模塊化的知識，咱們下一篇會仔細探討