使用 MVVMLight 命令綁定

首先，若是您但願瞭解更多的MVVMLight技術或但願有順序的學習MVVMLight，請查閱目錄《MVVMLight 設計模式系列使用文章》。

繼上一篇文章的項目，咱們實現了數據綁定到界面中。這篇文章咱們將實現把命令綁定到按鈕上，在XAML中的Button之類的都會有個Command屬性可讓咱們來綁定命令使用。

首先咱們要實現的目標是，在界面中能夠點擊按鈕添加數據，可是最多能添加5條數據，最少保證有1條數據。也就是兩個按鈕哈（增長數據/刪除數據）。界面以下：

在界面中咱們能夠看見，已經增長了5條數據，按鈕「增長一條數據」已經呈現灰色不可用狀態。這正是由於咱們在命令中作了命令是否可用進行的限制。

 

MVVMLight 之 RelayCommand

在 GalaSoft.MvvmLight.Command; 命名空間中咱們能夠找到一個名爲 RelayCommand 的類，該類包含了兩種構造函數，根據狀況選擇。

第一種：

RelayCommand(傳入要執行的方法);

執行命令的就是執行你傳入的這個方法啦，詳細能夠參考本文的示例代碼。

 

第二種：

RelayCommand(傳入要執行的方法, 傳入判斷命令是否可執行的方法);

第二種構造函數基本上就是第一種的升級版，能夠控制命令是否可用。

 

下面來看看咱們的UserViewModel的完整源碼

其實只看命令部分便可，理解如何構造一個完整的命令。

1.  using System;
2. using System.Collections.Generic;
3. using System.Collections.ObjectModel;
4. using System.Linq;
5. using System.Text;
6. using System.Threading.Tasks;
7.  
8. using GalaSoft.MvvmLight;
9. using MyModel;
10. using GalaSoft.MvvmLight.Command;
11.  
12. namespace MVVMLightDemo.ViewModel
13. {
14.     public class UserViewModel : ViewModelBase
15.     {
16.         /*********** 構造函數 ************/
17.         public UserViewModel()
18.         {
19.             //初始化數據
20.             _userData = User.GetUserList();
21.  
22.             //初始化命令  (第一個參數是執行的命令方法，第二個參數是控制命令是否可用)
23.             AddUserCommand = new RelayCommand(ExecuteAddUser, CanExecuteAddUser);   
24.             DeleteUserCommand = new RelayCommand(ExecuteDeleteUser, CanExecuteDeleteUser);
25.         }
26.  
27.         /************** 屬性 **************/
28.         private ObservableCollection<User> _userData;
29.         /// <summary>
30.         /// 用戶信息數據
31.         /// </summary>
32.         public ObservableCollection<User> UserData
33.         {
34.             get { return _userData; }
35.             set
36.             {
37.                 _userData = value;
38.                 RaisePropertyChanged("UserData");
39.             }
40.         }
41.  
42.  
43.         /************* 命令 ***************/
44.         #region 新增一個用戶命令：AddUserCommand
45.         /// <summary>
46.         /// 新增一個用戶
47.         /// </summary>
48.         public RelayCommand AddUserCommand { get; private set; }
49.  
50.         //新增一個用戶 命令執行方法
51.         void ExecuteAddUser()
52.         {
53.             User user = new User();
54.             user.ID = 3;
55.             user.Name = "王旭";
56.             user.Domain = "無/" + DateTime.Now.ToString();
57.             UserData.Add(user);
58.         }
59.  
60.         //小於5條數據時命令可用
61.         bool CanExecuteAddUser()
62.         {
63.             return UserData.Count < 5;
64.         }
65.         #endregion
66.  
67.         #region 刪除一個用戶命令：DeleteUserCommand
68.         /// <summary>
69.         /// 刪除一個用戶
70.         /// </summary>
71.         public RelayCommand DeleteUserCommand { get; private set; }
72.  
73.         //刪除一個用戶 命令執行方法
74.         void ExecuteDeleteUser()
75.         {
76.             UserData.RemoveAt(0);
77.         }
78.  
79.         //最少保證有1條數據時命令可用
80.         bool CanExecuteDeleteUser()
81.         {
82.             return UserData.Count > 1;
83.         }
84.         #endregion
85.     }
86. }

以上包含的兩個命令實現了咱們前面所提交的邏輯，在這裏Execute開頭命名的方法是命令執行的方法，CanExecute開頭的命名的方法是執行以前所判斷的條件，根據你所給的返回值來決定這個命令是否可用。至於方法命名方式你要隨意，看習慣咯。

是否是很簡單？沒錯，就這麼簡單，下面咱們再看看View吧。

 

下面是UserView.xaml的XAML代碼

相對上一篇文章其實就加了兩個按鈕而已。

1. <Window x:Class="MVVMLightDemo.View.UserView"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         Title="UserView" Height="300" Width="300">
5.     <Grid>
6.         <Grid.RowDefinitions>
7.             <RowDefinition Height="auto" />
8.             <RowDefinition Height="*" />
9.         </Grid.RowDefinitions>
10.         <StackPanel Grid.Row="0">
11.             <Button Command="{Binding AddUserCommand}">增長一條數據</Button>
12.             <Button Command="{Binding DeleteUserCommand}">刪除一條數據</Button>
13.         </StackPanel>
14.         <DataGrid Grid.Row="1" ItemsSource="{Binding UserData}"></DataGrid>
15.     </Grid>
16. </Window>

在Button元素標籤中使用 Command屬性，將其綁定咱們指定命令名稱便可。

小提示：別忘了給本身的命令設置 public ，不然是無法成功綁定的。

 

至此咱們就完成了對MVVMLight命令綁定的一個瞭解，沒錯還有一些問題咱們如今無法解決。例如，在TextBox Lable Window 之類的沒有Command命令。咱們如何作，下一篇文章會詳細對此進行闡述，咱們將改進程序的加載方式，但願在界面呈現以後加載數據。

因此咱們會在Load的時候加載數據，可是不違背MVVM設計模式的思想之代碼分離。因此咱們不會在View中編寫代碼實現，而是經過事件綁定命令的方式實現。

本文示例源碼下載：MVVMLightDemo_2

 

更多的MVVMLight使用，請返回查閱《MVVMLight 設計模式系列使用文章》，歡迎各位Coder補充。

轉載請註明：王旭博客 » 使用 MVVMLight 命令綁定