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

相關文章
相關標籤/搜索