MVVMLight學習筆記（四）---RelayCommand初探

一、概述

 在MVVM Light框架中，主要通過命令綁定來進行事件的處理。

 WPF中，命令是通過實現 ICommand 接口創建的。 ICommand 公開了兩個方法（Execute 及 CanExecute）和一個事件（CanExecuteChanged）。

在MVVM Light框架中，RelayCommand類實現了ICommand 接口，用於完成命令綁定。

通過RelayCommand類的構造函數傳入Action類型的Execute委托和Func<bool>類型的CanExecute委托，CanExecute委托用於表示當前命令是否可以執行，Execute委托則表示執行當前命令對應的方法。

通過命令綁定，解耦了View和ViewModel的行為交互，將視圖的顯示和業務邏輯分開。比如我們對界面上的某個按鈕進行命令綁定，當點擊按鈕的時候，實際上進行操作是在對應的ViewModel下的所綁定的方法中執行的。

二、Demo

我們模擬以下場景：

界面上有一個添加用戶的按鈕，一個輸入用戶信息的TextBox，一個用於顯示添加后結果Label，一個CheckBox。

按鈕使用RelayCommand進行綁定，CheckBox用於控制命令的可用性。

using GalaSoft.MvvmLight;

namespace MvvmLightDemo1.Model
{
    public class WelcomeModel : ObservableObject
    {
        private string welcomeMsg;
        public string WelcomeMsg
        {
            get { return welcomeMsg; }
            set { welcomeMsg = value; RaisePropertyChanged(() => WelcomeMsg); }
        }
    }

}

using CommonServiceLocator;
using GalaSoft.MvvmLight.Ioc;

namespace MvvmLightDemo1.ViewModel
{
    /// <summary>
    /// This class contains static references to all the view models in the
    /// application and provides an entry point for the bindings.
    /// </summary>
    public class ViewModelLocator
    {
        /// <summary>
        /// Initializes a new instance of the ViewModelLocator class.
        /// </summary>
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
            SimpleIoc.Default.Register<MainViewModel>();
        }

        public MainViewModel Main
        {
            get
            {
                return ServiceLocator.Current.GetInstance<MainViewModel>();
            }
        }
        
        public static void Cleanup()
        {
            // TODO Clear the ViewModels
        }
    }
}

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.CommandWpf;
using MvvmLightDemo1.Model;
using System.Windows.Input;

namespace MvvmLightDemo1.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        private WelcomeModel welcomeModel;
        public WelcomeModel WelcomeModel
        {
            get { return welcomeModel; }
            set { welcomeModel = value; RaisePropertyChanged(() => WelcomeModel); }
        }
        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel()
        {
            WelcomeModel = new WelcomeModel() { WelcomeMsg = "Welcome to MVVMLight World!" };
        }

        private string userList = "Mary";

        public string UserList
        {
            get { return userList; }
            set
            {
                userList = value;
                RaisePropertyChanged();
            }
        }
        private string user = "";

        public string User
        {
            get { return user; }
            set { user = value; }
        }
        private bool isCanAddUser;

        public bool IsCanAddUser
        {
            get { return isCanAddUser; }
            set { isCanAddUser = value; }
        }

        #region Command
        private RelayCommand addUserCommand;

        public RelayCommand AddUserCommand
        {
            get
            {
                if (addUserCommand == null)
                {
                    addUserCommand = new RelayCommand(AddUser, () => { return IsCanAddUser; });
                }
                return addUserCommand;
            }
            set { addUserCommand = value; }
        }
        private void AddUser()
        {
            UserList = UserList + "  " + User;
        }
        #endregion

    }
}

<Window x:Class="MvvmLightDemo1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MvvmLightDemo1"
        mc:Ignorable="d"
        Title="MVVMLIghtDemo1" Height="350" Width="525" Background="#FF699DC1">
    <Window.DataContext>
        <Binding Path="Main" Source="{StaticResource Locator}"></Binding>
    </Window.DataContext>
    <Grid>
        <StackPanel >
            <TextBlock Text="{Binding WelcomeModel.WelcomeMsg}" FontSize="28" Foreground="#FFBB4913" HorizontalAlignment="Center"/>
            <StackPanel Orientation="Horizontal" Visibility="Collapsed">
                <Label Content="修改信息：" VerticalContentAlignment="Center" FontSize="20" Foreground="#FFC55D21"></Label>
                <TextBox Text="{Binding Path=WelcomeModel.WelcomeMsg,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" FontSize="20" Foreground="#FFBB4913"/>
                <Button Content="LostFocus" Background="#FF22A658"></Button>
            </StackPanel>

            <StackPanel Orientation="Horizontal">
                <Label Content="UserList：" VerticalContentAlignment="Center" FontSize="20" Foreground="#FFC55D21"></Label>
                <Label Content="{Binding Path=UserList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" FontSize="20" Foreground="#FFBB4913"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Label Content="UserName：" VerticalContentAlignment="Center" FontSize="20" Foreground="#FFC55D21"></Label>
                <TextBox Width="200" Text="{Binding User, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></TextBox>
                <Button Content="AddUser" Command="{Binding AddUserCommand}"></Button>
                <CheckBox Content="IsCanAdd" VerticalAlignment="Center" FontSize="16" IsChecked="{Binding IsCanAddUser, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></CheckBox>
            </StackPanel>

        </StackPanel>
        <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center" >
  
        </StackPanel>
    </Grid>
</Window>

運行結果如下：