.NET Core 3 WPF MVVM框架 Prism系列之命令
本文將介紹如何在.NET Core3環境下使用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的文字變化時,需要將按鈕的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模組化的知識,我們下一篇會仔細探討