从一个登录页面浅淡MVVM（三）

时间：2010-12-25 来源：Sunpire

ViewModelCommand.cs

/// <summary>
/// 使用 Action<Object> 作为通用的 Command，如果要使用 Action<T> 的其他形式，则要创建新的类型
/// </summary>
public class ViewModelCommand : ICommand
{
    public Action<Object> ViewModelAction { get; set; }

    public ViewModelCommand(Action<Object> action)
    {
        this.ViewModelAction = action;
    }

    public bool CanExecute(Object parameter)
    {
        return true;
    }
    public void Execute(Object parameter)
    {
        this.ViewModelAction(parameter);
    }
    public event EventHandler CanExecuteChanged
    {
        add { }
        remove { }
    }
}

在 LoginViewModel.cs 中增加两个Command，分别用于前台 UI 的两个 Button 的 Command 绑定。

LoginViewModel.cs

        public ViewModelCommand GenerateValidationCodeCommand { get; private set; }
        public ViewModelCommand LoginCommand { get; private set; }

        public LoginViewModel()
        {
            this.Data = new User();
            this.GenerateValidationCodeCommand = new ViewModelCommand((Object parameter) =>
            {
                this.GenerateValidationCodeAsync();
            });
            this.LoginCommand = new ViewModelCommand((Object parameter) =>
            {
                if (this.Validate())
                {
                    this.LoginAsync();
                }
            });
        }

同时，尝试将要执行 Validation 的 UI 引用移入 ViewModel 中

LoginViewModel.cs

        /// <summary>
        /// 用于控制UI的ValidationSummary
        /// </summary>
        public ValidationSummary ValidationSummary { get; set; }
        /// <summary>
        /// 用于控制UI的控件的校验
        /// </summary>
        public UIElementCollection ValidationUICollection { get; set; }

        /// <summary>
        /// 针对 ValidationSummary 和 ValidationUICollection 进行校验
        /// </summary>
        /// <returns></returns>
        public bool Validate()
        {
            if (this.ValidationSummary != null && this.ValidationSummary.HasErrors)
            {
                return false;
            }
            else if (this.ValidationUICollection != null)
            {
                // 扩展方法，校验各个控件的数据绑定
                this.ValidationUICollection.ValidateSource();
                if (this.ValidationSummary != null && this.ValidationSummary.HasErrors)
                {
                    return false;
                }
            }
            return true;
        }

这样，View 就更简单了，在 Xaml 中变为

<Button Content="换一个" Grid.Column="3" Grid.Row="2" Height="23" Margin="8" 
        Name="btnChangeValidationCode" Width="75" 
        Command="{Binding GenerateValidationCodeCommand}" />

<Button Content="登录" Grid.Row="3" Grid.ColumnSpan="4" Margin="8" Name="btnLogin" 
        Command="{Binding LoginCommand}"  />

LoginPage.cs 变为

LoginPage.cs

public partial class LoginPage : Page
{
    LoginViewModel loginVM;

    public LoginPage()
    {
        InitializeComponent();
        this.loginVM = new LoginViewModel()
        {
            ValidationSummary = this.validationSummary1,
            ValidationUICollection = this.LayoutRoot.Children
        };
        this.loginVM.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(loginVM_PropertyChanged);
        this.Loaded+=new RoutedEventHandler(LoginPage_Loaded);
    }

    void loginVM_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "IsDone")
        {
            if (this.loginVM.IsDone)
            {
                // 登录成功，执行跳转
            }
        }
        else if (e.PropertyName == "Message")
        {
            // 可以在 UI 上将 Message 也和 TextBlock 等进行绑定，以显示消息
            MessageBox.Show(this.loginVM.Message);
        }
    }

    void LoginPage_Loaded(object sender, RoutedEventArgs e)
    {
        this.loginVM.GenerateValidationCodeAsync();
        this.DataContext = this.loginVM;
    }

}