zoukankan      html  css  js  c++  java
  • 命令基础

    在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的相关内容。

  • 相关阅读:
    2. 替换空格
    1.二维数组中的查找
    《STL源码剖析》相关面试题总结
    STL详解
    java之Stack详细介绍
    ArrayList、LinkedList、Vector的区别
    记一次vue升级element-ui的体验
    nestJs项目打包部署的方法
    Echarts 图例 legend formatter 如何返回 html
    微信小程序echarts字体大小 真机和开发者工具不一致(太小)的解决办法
  • 原文地址:https://www.cnblogs.com/happyyftk/p/6903422.html
Copyright © 2011-2022 走看看