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

时间  2020-12-02
标签 html express app 框架 async ide 模块化 函数 this spa 栏目 HTML 繁體版
原文   原文链接
原文: .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模块化的知识，咱们下一篇会仔细探讨

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程