稳扎稳打Silverlight(52) - 4.0绑定之 ICommand 命令和 MVVM 模式

[索引页]
[源码下载]

稳扎稳打Silverlight(52) - 4.0绑定之 ICommand 命令和 MVVM 模式

作者：webabcd


介绍
Silverlight 4.0 MVVM 模式：

• ICommand - 命令。可以将其绑定到 ButtonBase 或 Hyperlink 的 Command 属性上 
• MVVM 模式 - Model-View-ViewModel 

在线DEMO
http://www.cnblogs.com/webabcd/archive/2010/08/09/1795417.html


示例
1、演示 ICommand 的应用
MyCommand.cs

/*
 * ICommand - 命令。可以将其绑定到 ButtonBase 或 Hyperlink 的 Command 属性上
 *     bool CanExecute(object parameter) - 当请命令是否可以执行
 *     event EventHandler CanExecuteChanged - 当请命令是否可以执行的状态发生改变时所触发的事件
 *     void Execute(object parameter) - 当前命令被执行时，所调用的方法
 */

using 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 Silverlight40.Binding.Command
{
    public delegate void Execute(object parameter);
    public delegate bool CanExecute(object parameter);

    public class MyCommand : ICommand
    {
        private Execute _executeMethod;
        private CanExecute _canExecuteMethod;

        public MyCommand()
            : this(null, null)
        {

        }

        public MyCommand(Execute executeMethod)
            : this(executeMethod, null)
        {

        }

        public MyCommand(Execute executeMethod, CanExecute canExecuteMethod)
        {
            _executeMethod = executeMethod;
            _canExecuteMethod = canExecuteMethod;
        }

        public bool CanExecute(object parameter)
        {
            if (_canExecuteMethod == null)
                return true;
            else
                return _canExecuteMethod(parameter);
        }

        public void Execute(object parameter)
        {
            if (_executeMethod != null)
                _executeMethod(parameter);
        }

        public event EventHandler CanExecuteChanged;

        protected virtual void OnCanExecuteChanged(EventArgs e)
        {
            if (CanExecuteChanged != null)
                CanExecuteChanged(this, e);
        }

        public void RaiseCanExecuteChanged()
        {
            OnCanExecuteChanged(EventArgs.Empty);
        }
    }
}

MyViewModel.cs

using 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 Silverlight40.Binding.Command
{
    public class MyViewModel
    {
        // 声明一个 ICommand 类型，用于绑定到 ButtonBase 或 Hyperlink 的 Command 属性上
        public ICommand Hello { get; set; }

        public MyViewModel()
        {
            // 绑定了 Hello 的命令被执行时则会调用 ExecuteHello(object parameter) 方法
            Hello = new MyCommand(ExecuteHello);
        }

        private void ExecuteHello(object parameter)
        {
            MessageBox.Show("Hello: " + parameter.ToString());
        }
    }
}

Demo.xaml

<navigation:Page x:Class="Silverlight40.Binding.Command.Demo" 
           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:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           xmlns:ViewModel="clr-namespace:Silverlight40.Binding.Command"
           Title="Demo Page">
    <Grid x:Name="LayoutRoot">
        
        <Grid.DataContext>
            <ViewModel:MyViewModel />
        </Grid.DataContext>

        <!--
            Command - 指定需要关联的命令
            CommandParameter - 传递给 Command 的参数
        -->
        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal" Height="20">
            <TextBox Name="txtName" Text="webabcd" />
            <Button Content="Hello" Command="{Binding Hello}" CommandParameter="{Binding ElementName=txtName, Path=Text }" />
        </StackPanel>
        
    </Grid>
</navigation:Page>

2、MVVM 模式的 Demo
UpdateCommand.cs

using 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 Silverlight40.Binding.MVVM
{
    // 实现 ICommand 接口，在 MVVM 中它的作用是为 ButtonBase 或 Hyperlink 提供相应的行为逻辑

    public class UpdateCommand : ICommand
    {
        private ProductViewModel _viewModel;

        public UpdateCommand(ProductViewModel viewModel)
        {
            _viewModel = viewModel;
        }

        public bool CanExecute(object parameter)
        {
            return true;
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            _viewModel.Update();
        }
    }
}

ProductViewModel.cs

using 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;

using System.ComponentModel;

namespace Silverlight40.Binding.MVVM
{
    // MVVM 之 ViewModel - 为了数据的绑定需要实现 INotifyPropertyChanged 接口；为了命令的绑定需要有相对应的 ICommand 类型的属性

    public class ProductViewModel : INotifyPropertyChanged
    {
        public ProductViewModel()
            : this (13, "wii")
        {
           
        }

        public ProductViewModel(int productId, string name)
        {
            _productId = productId;
            _name = name;
        }

        private int _productId;
        public int ProductId
        {
            get { return _productId; }
            set
            {
                _productId = value;
                RaisePropertyChangedEvent("ProductId");
            }
        }

        private string _name;
        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                RaisePropertyChangedEvent("Name");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChangedEvent(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }



        public void Update()
        {
            MessageBox.Show(string.Format("将 ID 为 {0} 的名称更新为：{1}", _productId, _name));
        }

        public ICommand UpdateCommand
        {
            get 
            { 
                return new UpdateCommand(this); 
            }
        }
    }
}

Demo.xaml

<navigation:Page x:Class="Silverlight40.Binding.MVVM.Demo" 
           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:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           xmlns:vm="clr-namespace:Silverlight40.Binding.MVVM"
           Title="Demo Page">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <!--数据源-->
            <vm:ProductViewModel x:Key="productViewModel" />
        </Grid.Resources>

        <StackPanel HorizontalAlignment="Left" DataContext="{StaticResource productViewModel}">
            
            <!--绑定属性-->
            <TextBlock Text="{Binding ProductId}" />
            <TextBox Text="{Binding Name, Mode=TwoWay}" />

            <!--绑定命令-->
            <Button Command="{Binding UpdateCommand}" Content="更新" />
            
        </StackPanel>
    </Grid>
</navigation:Page>

OK
[源码下载]