利刃 MVVMLight 6：命令基礎

時間 2019-11-09

標籤利刃 mvvmlight 命令基礎简体版

原文原文鏈接

在MVVM Light框架中，事件是WPF應用程序中UI與後臺代碼進行交互的最主要方式，與傳統方式不一樣，mvvm中主要經過綁定到命令來進行事件的處理，框架

所以要了解mvvm中處理事件的方式，就必須先熟悉命令的工做原理。mvvm

RelayCommand命令：
WPF命令是經過實現 ICommand 接口建立的。 ICommand 公開了兩個方法（Execute 及 CanExecute）和一個事件（CanExecuteChanged）。函數

Execute方法	執行與命令關聯的操做
CanExecute方法	肯定是否能夠在當前命令目標上執行命令，返回值爲true則按鈕可用，爲false的時候按鈕disable。在MvvmLight中實現ICommand接口的類是RelayCommand

RelayCommand經過構造函數初始化Execute 和 CanExecute方法，所以，構造函數傳入的是委託類型的參數，ui

Execute 和 CanExecute則執行的是委託的方法。如圖：spa

相對於CodeBehind 的方式，使用命令會好不少：code

最大的特色就是解耦View和ViewModel的行爲交互，將視圖的顯示和業務邏輯分開。對View上的某個元素進行命令的綁定，觸發點擊操做的時候，這個按鈕實際完成
的是對應ViewModel中的所綁定的方法的執行。這裏咱們用到Mvvm框架中的RelayCommand。orm

如今咱們來看一個例子，將咱們上篇的那個例子改裝一下，加進CanExcute()方法和列表數據的呈現。xml

Model代碼：對象

 1  [MetadataType(typeof(BindDataAnnotationsViewModel))]
 2     public class ValidateUserInfo:ValidateModelBase
 3     {
 4         #region 屬性 
 5         private String userName;
 6         /// <summary>
 7         /// 用戶名
 8         /// </summary>
 9         [Required]
10         public String UserName
11         {
12             get { return userName; }
13             set { userName = value; RaisePropertyChanged(() => UserName); }
14         }
15 
16 
17 
18         private String userPhone;
19         /// <summary>
20         /// 用戶電話
21         /// </summary>
22         [Required]
23         [RegularExpression(@"^[-]?[1-9]{8,11}\d*$|^[0]{1}$", ErrorMessage = "用戶電話必須爲8-11位的數值.")]
24         public String UserPhone
25         {
26             get { return userPhone; }
27             set { userPhone = value; RaisePropertyChanged(() => UserPhone); }
28         }
29 
30 
31 
32         private String userEmail;
33         /// <summary>
34         /// 用戶郵件
35         /// </summary>
36         [Required]
37         [StringLength(100, MinimumLength = 2)]
38         [RegularExpression("^\\s*([A-Za-z0-9_-]+(\\.\\w+)*@(\\w+\\.)+\\w{2,5})\\s*$", ErrorMessage = "請填寫正確的郵箱地址.")]
39         public String UserEmail
40         {
41             get { return userEmail; }
42             set { userEmail = value; RaisePropertyChanged(() => UserEmail);  }
43         }
44         #endregion

View代碼：blog

提交按鈕綁定了一個Command，這個Command指向對用的ViewModel中的SubmitCmd 方法。這樣確實很贊，SubmitCmd 獨立性、複用性很高。

 1 <Window x:Class="MVVMLightDemo.View.CommandView"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         DataContext="{Binding Source={StaticResource Locator},Path=Command}"
 5         Title="CommandView" Height="500" Width="800">
 6     <Grid>
 7         <StackPanel Orientation="Vertical" >
 8             <GroupBox Header="命令" Margin="10 20 10 10" >                
 9                 <StackPanel Orientation="Vertical" Margin="0,10,0,0">
10                     <StackPanel.Resources>
11                         <Style TargetType="StackPanel">
12                             <Setter Property="Orientation" Value="Horizontal" />
13                             <Setter Property="Margin" Value="0,0,0,4" />
14                         </Style>
15                         <Style TargetType="Label" BasedOn="{StaticResource {x:Type Label}}">
16                             <Setter Property="Width" Value="100" />
17                             <Setter Property="VerticalAlignment" Value="Center" />
18                         </Style>
19                         <Style TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}">
20                             <Setter Property="Padding" Value="0,3" />
21                         </Style>
22                         <Style TargetType="RadioButton" BasedOn="{StaticResource {x:Type RadioButton}}">
23                             <Setter Property="Padding" Value="0,3" />
24                         </Style>
25                     </StackPanel.Resources>
26 
27                     <StackPanel>
28                         <Label Content="用戶名" Target="{Binding ElementName=UserName}"/>
29                         <TextBox Width="150" 
30                                  Text="{Binding ValidateUI.UserName,UpdateSourceTrigger=PropertyChanged,ValidatesOnDataErrors=True}" >
31                         </TextBox>
32                     </StackPanel>
33                     <StackPanel>
34                         <Label Content="用戶郵箱" Target="{Binding ElementName=UserEmail}"/>
35                         <TextBox Width="150" Text="{Binding ValidateUI.UserEmail, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" />
36                     </StackPanel>
37                     <StackPanel>
38                         <Label Content="用戶電話" Target="{Binding ElementName=UserPhone}"/>
39                         <TextBox Width="150" Text="{Binding ValidateUI.UserPhone,UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" />
40                     </StackPanel>
41                     <StackPanel>
42                         <Label Foreground="Red" Content="提示：驗證所有經過的時候提交按鈕可操做！" Width="250"  ></Label>
43                     </StackPanel>                    
44                     <Button Content="提交" Margin="100,16,0,0" HorizontalAlignment="Left" Command="{Binding SubmitCmd}" />
45                 </StackPanel>
46             </GroupBox>            
47            
48             <StackPanel>
49                 <DataGrid x:Name="dg1" ItemsSource="{Binding List}" AutoGenerateColumns="False" CanUserAddRows="False" 
50                                       CanUserSortColumns="False" Margin="10" AllowDrop="True" IsReadOnly="True" >
51                     <DataGrid.Columns>
52                         <DataGridTextColumn Header="用戶姓名" Binding="{Binding UserName}" Width="100" />
53                         <DataGridTextColumn Header="郵箱"  Binding="{Binding UserEmail}" Width="400" />
54                         <DataGridTextColumn Header="電話" Binding="{Binding UserPhone}" Width="100" />
55                     </DataGrid.Columns>
56                 </DataGrid>
57 
58             </StackPanel>
59 
60         </StackPanel>
61       
62     </Grid>
63 </Window>

ViewModel代碼：

這邊須要注意的是:用戶在界面上點擊提交按鈕的時候去ViewModel 裏面尋找名爲SubmitCmd的 RelayCommand命令對象，若是找不到，則執行無效果，因此名稱必定要對應上，並且須要是公開的訪問級別。

CanExcute方法這邊用表單是否驗證經過來判斷命令是否執行，若是返回的是false，則該命令不執行，這時候提交按鈕也是不可用（Disable）的。

 1 using GalaSoft.MvvmLight;
 2 using GalaSoft.MvvmLight.CommandWpf;
 3 using MVVMLightDemo.Model;
 4 using System.Collections.ObjectModel;
 5 
 6 namespace MVVMLightDemo.ViewModel
 7 {
 8     public class CommandViewModel:ViewModelBase
 9     {
10         public CommandViewModel()
11         {
12             //構造函數
13             ValidateUI = new ValidateUserInfo();
14             List = new ObservableCollection<ValidateUserInfo>();
15         }
16 
17         #region 全局屬性
18         private ObservableCollection<ValidateUserInfo> list;
19         /// <summary>
20         /// 用戶數據列表
21         /// </summary>
22         public ObservableCollection<ValidateUserInfo> List
23         {
24             get { return list; }
25             set { list = value; }
26         }
27 
28         private ValidateUserInfo validateUI;
29         /// <summary>
30         /// 當前操做的用戶信息
31         /// </summary>
32         public ValidateUserInfo ValidateUI
33         {
34             get { return validateUI; }
35             set
36             {
37                 validateUI = value;
38                 RaisePropertyChanged(() => ValidateUI);
39             }
40         }
41         #endregion
42 
43         #region 全局命令
44         private RelayCommand submitCmd;
45         /// <summary>
46         /// 執行提交命令的方法
47         /// </summary>
48         public RelayCommand SubmitCmd
49         {
50             get
51             {
52                 if (submitCmd == null) return new RelayCommand(() => ExcuteValidForm(),CanExcute);
53                 return submitCmd;
54             }
55             set { submitCmd = value; }
56         }
57         #endregion
58 
59         #region 附屬方法
60         /// <summary>
61         /// 執行提交方法
62         /// </summary>
63         private void ExcuteValidForm()
64         {
65             List.Add(new ValidateUserInfo(){ UserEmail= ValidateUI.UserEmail, UserName = ValidateUI.UserName, UserPhone = ValidateUI.UserPhone });
66         }
67 
68         /// <summary>
69         /// 是否可執行（這邊用表單是否驗證經過來判斷命令是否執行）
70         /// </summary>
71         /// <returns></returns>
72         private bool CanExcute()
73         {
74             return ValidateUI.IsValidated;
75         }
76         #endregion
77 
78     }
79 }