利刃 MVVMLight 6:命令基础

简介: 原文:利刃 MVVMLight 6:命令基础    在MVVM Light框架中,事件是WPF应用程序中UI与后台代码进行交互的最主要方式,与传统方式不同,mvvm中主要通过绑定到命令来进行事件的处理, 因此要了解mvvm中处理事件的方式,就必须先熟悉命令的工作原理。
原文: 利刃 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 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代码:

提交按钮绑定了一个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 }

 结果如下:

 这是最简单的命令操作了,下篇我们来深入了解下命令和EventToCommand的相关内容。

示例代码下载

转载请标明出处,谢谢

目录
相关文章
|
前端开发 C# 设计模式
利刃 MVVMLight 1:MVVMLight介绍以及在项目中的使用
原文:利刃 MVVMLight 1:MVVMLight介绍以及在项目中的使用 一、MVVM 和 MVVMLight介绍 MVVM是Model-View-ViewModel的简写。类似于目前比较流行的MVC、MVP设计模式,主要目的是为了分离视图(View)和模型(Model)的耦合。
1622 0
|
4月前
|
前端开发 开发者 设计模式
揭秘Uno Platform状态管理之道:INotifyPropertyChanged、依赖注入、MVVM大对决,帮你找到最佳策略!
【8月更文挑战第31天】本文对比分析了 Uno Platform 中的关键状态管理策略,包括内置的 INotifyPropertyChanged、依赖注入及 MVVM 框架。INotifyPropertyChanged 方案简单易用,适合小型项目;依赖注入则更灵活,支持状态共享与持久化,适用于复杂场景;MVVM 框架通过分离视图、视图模型和模型,使状态管理更清晰,适合大型项目。开发者可根据项目需求和技术栈选择合适的状态管理方案,以实现高效管理。
46 0
|
5月前
|
Python
惊呆了!学会这一招,你的Python上下文管理器也能玩出花样来文管理器也能玩出花样来
【7月更文挑战第6天】Python的上下文管理器是资源优雅管理的关键,与with语句结合,确保资源获取和释放。通过实现`__enter__`和`__exit__`,不仅能做资源分配和释放,还能扩展实现如计时、自动重试、事务处理等功能。例如,TimerContextManager类记录代码执行时间,展示了上下文管理器的灵活性。学习和利用这一机制能提升代码质量,增强功能,是Python编程的必备技巧。
34 0
|
7月前
|
XML Android开发 数据格式
Dialog里面用ComposeView竟会直接闪退?深挖Lifecycle与Compose的爱恨情仇
Dialog里面用ComposeView竟会直接闪退?深挖Lifecycle与Compose的爱恨情仇
306 0
|
缓存 自然语言处理 BI
CocosCreator3.8研究笔记(二十)CocosCreator UI组件(四)
CocosCreator3.8研究笔记(二十)CocosCreator UI组件(四)
319 0
|
存储 算法 安全
ARBT阿尔比特系统开发(DAPP技术)|ARBT阿尔比特模式开发系统案例
基于区链技术的智能合约不仅可以发挥智能合约在成本效率方面的优势
|
数据库 Windows
艾伟:基于.NET平台的Windows编程实战(三)—— 项目的创建及主界面的设计
第一步:创建一个新的Windows项目 打开VS2005,点击“文件”-->“新建”-->“项目”,在弹出的对话框里,在左边选择“Windows”,在右边选择“Windows应用程序”,并在下面的名称里输入“QuestionnaireSystem”,选择相应的保存位置后,点“确定”,如下图3-1所示:                                  图3-1  这样一个新的Windows项目就创建好了。
753 0
|
数据库 Windows
艾伟_转载:基于.NET平台的Windows编程实战(三)—— 项目的创建及主界面的设计
第一步:创建一个新的Windows项目 打开VS2005,点击“文件”-->“新建”-->“项目”,在弹出的对话框里,在左边选择“Windows”,在右边选择“Windows应用程序”,并在下面的名称里输入“QuestionnaireSystem”,选择相应的保存位置后,点“确定”,如下图3-1所示:                                  图3-1  这样一个新的Windows项目就创建好了。
826 0
|
前端开发 C# Windows
利刃 MVVMLight 7:命令深入
原文:利刃 MVVMLight 7:命令深入   上面一篇我们大致了解了命令的基本使用方法和基础原理,但是实际在运用命令的时候会复杂的多,并且会遇到各种各样的情况。 一、命令带参数的情况: 如果视图控件所绑定的命令想要传输参数,需要配置 CommandParameter 属性 ,用来传输参数出去。
900 0
|
前端开发 索引 API
利刃 MVVMLight 5:绑定在表单验证上的应用
原文:利刃 MVVMLight 5:绑定在表单验证上的应用    表单验证是MVVM体系中的重要一块。而绑定除了推动 Model-View-ViewModel (MVVM) 模式松散耦合 逻辑、数据 和 UI定义 的关系之外,还为业务数据验证方案提供强大而灵活的支持。
818 0