為Windows Phone Mango MVVM 應用建立可複用 ICommand 實作類別

在這篇文章中，我將談一下windows phone 7.1 Mango中的ICommand介面，怎麼實現一個ICommand的實作類別：DelegateCommand，以及怎麼在MVVM Mango應用中使用。

當我們談及Commands時，一般說來，Command有兩個功能：

a:執行一個特殊的行為：command的主要功能。

b:確定某一UIElement的視覺狀態（visual state）：例如確定button是否可用。

DelegateCommand - ICommand可複用實作類別

DelegateCommand：實現了ICommand，當需要使用command時，可用使用此類。（多在viewmodel中）

ICommand組成如下：

ICommand成員如下：

a:CanExecuteChanged事件和CanExecute方法被用來確定command所施加控制項的視覺狀態，它們是這樣工作的：當某command施加於某控制項時，控制項會調用CanExecute方法，來確定初始的視覺狀態，假設調用者是button，如果CanExecute方法返回false，button會被禁用。button同時也會訂閱CanExecuteChanged事件。當觸發CanExecuteChanged事件時，會再次調用CanExecute以確定是否需要修改視覺狀態。

b:Execute方法比較直白：當需要執行某些行為操作時，控制項會調用它。例如，當按下按鈕時。

下面是DelegateCommand的代碼清單：

DelegateCommandusing System;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;namespace WP7MangoDelegateCommandMVVM{    public class DelegateCommand : ICommand    {        Func<object, bool> canExecute;        Action<object> executeAction;        public DelegateCommand(Action<object> executeAction)            : this(executeAction, null)        {        }        public DelegateCommand(Action<object> executeAction, Func<object, bool> canExecute)        {            if (executeAction == null)            {                throw new ArgumentNullException("executeAction");            }            this.executeAction = executeAction;            this.canExecute = canExecute;        }        public bool CanExecute(object parameter)        {            bool result = true;            Func<object, bool> canExecuteHandler = this.canExecute;            if (canExecuteHandler != null)            {                result = canExecuteHandler(parameter);            }            return result;        }        public event EventHandler CanExecuteChanged;        public void RaiseCanExecuteChanged()        {            EventHandler handler = this.CanExecuteChanged;            if (handler != null)            {                handler(this, new EventArgs());            }        }        public void Execute(object parameter)        {            this.executeAction(parameter);        }    }}

Windows Phone Mango MVVM 應用樣本：

為了說明DelegateCommand的用法，我們使用MVVM模式，建立一windows phone 7.1 mango的應用程式，建立View、ViewModel和Model。

Model

此時，建立Person類，包含一個string類型的屬性：

public class Person{    public string Name    {        get;        set;    }}

View Model

 

這是最重要的部分，使用了新建立的DelegateCommand類。我將建立PersonViewModel類，暴露ObservableCollection<Person>類型的DataSource屬性和ICommand類型的LoadDataCommand屬性。

 

public class PersonViewModel{    private ObservableCollection<Person> personDataSource;    private ICommand loadDataCommand;    public PersonViewModel()    {        this.personDataSource = new ObservableCollection<Person>();        this.loadDataCommand = new DelegateCommand(this.LoadDataAction);    }    private void LoadDataAction(object p)    {        this.DataSource.Add(new Person() { Name = "John" });        this.DataSource.Add(new Person() { Name = "Kate" });        this.DataSource.Add(new Person() { Name = "Sam" });    }    public ICommand LoadDataCommand    {        get        {            return this.loadDataCommand;        }    }    public ObservableCollection<Person> DataSource    {        get        {            return this.personDataSource;        }    }}

 

View

在這部分，我將添加一些UI元素，並通過ViewModel串連至資料，首先，需要為View設定DataContext，為簡單起見，我僅是在View構造器中給DataContext設定為PersonViewModel的執行個體。

// Constructorpublic MainPage(){    InitializeComponent();    // simple way to bind the view to the view model    this.DataContext = new PersonViewModel();}

接下來，綁定Command至button。

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">    <Button Content="LoadData" Command="{Binding LoadDataCommand}" />    <ListBox ItemsSource="{Binding DataSource}"<div class="wlWriterEditableSmartContent" id="scid:fb3a1972-4489-4e52-abe7-25a00bb07fdf:214b4eb9-c519-4afd-ad6d-bed19112debf" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><p> <a href="http://www.windowsphonegeek.com/upload/articles/WP7MangoDelegateCommand%20%282%29.zip" target="_blank">WPMangoDelegateCommandMVVM</a></p></div>>        <ListBox.ItemTemplate>            <DataTemplate>                <TextBlock Text="{Binding Name}" />            </DataTemplate>        </ListBox.ItemTemplate>    </ListBox> </StackPanel>

有關commands的更多資訊，可參閱MSDN文檔：

• Commands
• ICommand Interface

譯自：windowsphonegeek