首页 > 代码库 > 利刃 MVVMLight 6：命令基础
利刃 MVVMLight 6：命令基础
在MVVM Light框架中，事件是WPF应用程序中UI与后台代码进行交互的最主要方式，与传统方式不同，mvvm中主要通过绑定到命令来进行事件的处理，
因此要了解mvvm中处理事件的方式，就必须先熟悉命令的工作原理。
RelayCommand命令：
WPF命令是通过实现 ICommand 接口创建的。 ICommand 公开了两个方法（Execute 及 CanExecute）和一个事件（CanExecuteChanged）。
| Execute方法 | 执行与命令关联的操作 |
| CanExecute方法 | 确定是否可以在当前命令目标上执行命令，返回值为true则按钮可用，为false的时候按钮disable。在MvvmLight中实现ICommand接口的类是RelayCommand |
RelayCommand通过构造函数初始化Execute 和 CanExecute方法，因此，构造函数传入的是委托类型的参数，
Execute 和 CanExecute则执行的是委托的方法。如图：
相对于CodeBehind 的方式，使用命令会好很多：
最大的特点就是解耦View和ViewModel的行为交互，将视图的显示和业务逻辑分开。对View上的某个元素进行命令的绑定，触发点击操作的时候，这个按钮实际完成
的是对应ViewModel中的所绑定的方法的执行。这里我们用到Mvvm框架中的RelayCommand。
现在我们来看一个例子，将我们上篇的那个例子改装一下，加进CanExcute()方法和列表数据的呈现。
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 UserName11 {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 UserPhone25 {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 UserEmail40 {41 get { return userEmail; }42 set { userEmail = value; RaisePropertyChanged(() => UserEmail); }43 }44 #endregion
View代码：
提交按钮绑定了一个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=http://www.mamicode.com/"Horizontal" />13 <Setter Property="Margin" Value=http://www.mamicode.com/"0,0,0,4" />14 </Style>15 <Style TargetType="Label" BasedOn="{StaticResource {x:Type Label}}">16 <Setter Property="Width" Value=http://www.mamicode.com/"100" />17 <Setter Property="VerticalAlignment" Value=http://www.mamicode.com/"Center" />18 </Style>19 <Style TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}">20 <Setter Property="Padding" Value=http://www.mamicode.com/"0,3" />21 </Style>22 <Style TargetType="RadioButton" BasedOn="{StaticResource {x:Type RadioButton}}">23 <Setter Property="Padding" Value=http://www.mamicode.com/"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> List23 {24 get { return list; }25 set { list = value; }26 }27 28 private ValidateUserInfo validateUI;29 /// <summary>30 /// 当前操作的用户信息31 /// </summary>32 public ValidateUserInfo ValidateUI33 {34 get { return validateUI; }35 set36 {37 validateUI = value;38 RaisePropertyChanged(() => ValidateUI);39 }40 }41 #endregion42 43 #region 全局命令44 private RelayCommand submitCmd;45 /// <summary>46 /// 执行提交命令的方法47 /// </summary>48 public RelayCommand SubmitCmd49 {50 get51 {52 if (submitCmd == null) return new RelayCommand(() => ExcuteValidForm(),CanExcute);53 return submitCmd;54 }55 set { submitCmd = value; }56 }57 #endregion58 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 #endregion77 78 }79 }
结果如下：
这是最简单的命令操作了，下篇我们来深入了解下命令和EventToCommand的相关内容。
示例代码下载
转载请标明出处，谢谢
利刃 MVVMLight 6：命令基础
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。