WPF 在事件中綁定命令

導航：MVVMLight系列文章目錄：《關於 MVVMLight 設計模式系列》

 

其實這也不屬於MVVMLight系列中的東東了，沒興趣的朋友可以跳過這篇文章，本文主要介紹如何在WPF中實現將命令綁定到事件中。

上一篇中我們介紹了MVVMLight中的命令的用法，那么僅僅知道命令是如何構建使用的還不夠，很多情況下我們都需要在某個事件觸發的時候才去觸發命令，所以將命令綁定到事件上是非常有效的做法，下面我們來接着實現將命令綁定到事件中。

WPF實現命令綁定到事件

使用 System.Windows.Interactivity.dll 中的 Interaction 可以幫助我們實現對命令的綁定，所以我們需要引用該文件到項目中，這個文件是微軟的Blend中提供的。（如果你在VS中 NuGet 了MVVMLight，那么這個組件也會自動引用到項目中的）  如果你找不到該文件的話，我會在文章底部提供System.Windows.Interactivity.dll文件的下載。

 

引用 System.Windows.Interactivity.dll 程序集之后，我們在 View 中添加xmlns的引用如下：

1.  xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

這樣我們就可以在View中使用它了，我在 UserViewModel.cs 中編寫了一個 LoadDataCommand 的命令來加載數據。所以按照我們之前所想做的就是在窗口 Loaded 加載完之后加載數據，我們就將其命令綁定到  Loaded 事件中，代碼如下：

1.     <!--讓Load事件觸發LoadDataCommand命令-->
2.     <i:Interaction.Triggers>
3.         <i:EventTrigger EventName="Loaded">
4.             <i:InvokeCommandAction Command="{Binding LoadDataCommand}" />
5.         </i:EventTrigger>
6.     </i:Interaction.Triggers>

將這段代碼放在<Window>標簽之中即可，同理如果你要在其他元素中的事件進行綁定，那么就放到其元素的標簽中即可。

 

關於如何編寫LoadDataCommand呢，相信你看了上一篇文章，相信對你來說是很簡單的，不過我還是把代碼貼出來方便大家吧 ：）

下面是UserViewModel.cs的源碼

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.             _userData = new ObservableCollection<User>();
22.  
23.             //初始化命令  (第一個參數是執行的命令方法，第二個參數是控制命令是否可用)
24.             AddUserCommand = new RelayCommand(ExecuteAddUser, CanExecuteAddUser);   
25.             DeleteUserCommand = new RelayCommand(ExecuteDeleteUser, CanExecuteDeleteUser);
26.             LoadDataCommand = new RelayCommand(ExecuteLoadDataCommand);
27.         }
28.  
29.         /************** 屬性 **************/
30.         private ObservableCollection<User> _userData;
31.         /// <summary>
32.         /// 用戶信息數據
33.         /// </summary>
34.         public ObservableCollection<User> UserData
35.         {
36.             get { return _userData; }
37.             set
38.             {
39.                 _userData = value;
40.                 RaisePropertyChanged("UserData");
41.             }
42.         }
43.  
44.  
45.         /************* 命令 ***************/
46.         #region 新增一個用戶命令：AddUserCommand
47.         /// <summary>
48.         /// 新增一個用戶
49.         /// </summary>
50.         public RelayCommand AddUserCommand { get; private set; }
51.  
52.         //新增一個用戶 命令執行方法
53.         void ExecuteAddUser()
54.         {
55.             User user = new User();
56.             user.ID = 3;
57.             user.Name = "王旭";
58.             user.Domain = "無/" + DateTime.Now.ToString();
59.             UserData.Add(user);
60.         }
61.  
62.         //小於5條數據時命令可用
63.         bool CanExecuteAddUser()
64.         {
65.             return UserData.Count < 5;
66.         }
67.         #endregion
68.  
69.         #region 刪除一個用戶命令：DeleteUserCommand
70.         /// <summary>
71.         /// 刪除一個用戶
72.         /// </summary>
73.         public RelayCommand DeleteUserCommand { get; private set; }
74.  
75.         //刪除一個用戶 命令執行方法
76.         void ExecuteDeleteUser()
77.         {
78.             UserData.RemoveAt(0);
79.         }
80.  
81.         //最少保證有1條數據時命令可用
82.         bool CanExecuteDeleteUser()
83.         {
84.             return UserData.Count > 1;
85.         }
86.         #endregion
87.  
88.         #region 加載數據命令：LoadDataCommand
89.         /// <summary>
90.         /// 加載數據
91.         /// </summary>
92.         public RelayCommand LoadDataCommand { get; private set; }
93.  
94.         //加載用戶數據
95.         void ExecuteLoadDataCommand()
96.         {
97.             UserData = User.GetUserList();
98.         }
99.         #endregion
100.     }
101. }
102.  

這里我編寫的LoadDataCommand與之前寫的命令的區別就是，我的RelayCommand只使用了一個參數，並沒有去做命令的可用性的判斷。

至此，就完成了事件綁定到命令中，很簡單吧！

 

改進程序，符合MVVM設計模式

大家還記得么，我們程序一共有兩個窗口，是通過MainWindow中的一個Button按鈕點擊來打開的UserView窗口。是如何實現的？我們在 MainWindow.cs 中編寫了Button的Click事件…顯然不符合MVVM的設計模式。

我們下一篇則就是改進這個地方，並且是一個MVVMLight的非常有趣實用的技術點：消息通知。

有興趣的可以返回目錄《關於 MVVMLight 設計模式系列》進入下一篇文章。

 

System.Windows.Interactivity.dll 文件下載：System.Windows.Interactivity

本文中的程序源碼下載：MVVMLightDemo_3

轉載請注明：王旭博客 » WPF 在事件中綁定命令