MVVM体验记之DataGrid绑定

    知道MVVM这个词已经很久，但是一直没有去认识一下它，恰好这几天正在做点Silverlight的东西玩，顺便就也见识一下MVVM。

    准备工作：

1、Silverlight 4包括SDK 及 Silverlight 4 Toolkit April 2010

2、创建实体类(将在后面的DEMO中使用)People.cs：

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

        public int Age { get; set; }
    }

3、创建实体类相应View视图PeopleView.xaml：

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Text="姓名：" />
        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}" />
        <TextBlock Grid.Row="1" Grid.Column="0" Text="年龄：" />
        <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Age}" />
    </Grid>

4、创建ViewModel(PropertyChangedBase来自这里)，使它实现INotifyPropertyChanged接口：

    public class PeopleViewModel : PropertyChangedBase
    {
        public PeopleViewModel()
        {
            Peoples = new ObservableCollection<People>();
            for (int i = 10; i < 30; i++)
            {
                Peoples.Add(new People { Name = "test" + i.ToString(), Age = i });
            }
        }

        private People selectedPeople;

        public People SelectedPeople
        {
            get { return selectedPeople; }
            set
            {
                selectedPeople = value;
                this.NotifyPropertyChanged(p => p.SelectedPeople);
            }
        }

        public ObservableCollection<People> Peoples { get; set; }

    }

接下来开始DEMO

一、绑定DataGrid当前选中的行SelectedItem

创建DEMO1页面，Xaml代码为：

<UserControl x:Class="LWME.MVVMExperience.Views.Demo1"
    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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
    xmlns:v="clr-namespace:LWME.MVVMExperience.Views"
    xmlns:vm="clr-namespace:LWME.MVVMExperience.ViewModel"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <vm:PeopleViewModel x:Key="vm1" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource vm1}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="400" />
        </Grid.ColumnDefinitions>
        <sdk:DataGrid Grid.Column="0" ItemsSource="{Binding Peoples}" SelectedItem="{Binding SelectedPeople, Mode=TwoWay}" />
        <StackPanel Grid.Column="1" HorizontalAlignment="Center">
            <TextBlock Text="当前选中：" />
            <v:PeopleView DataContext="{Binding SelectedPeople}" />
        </StackPanel>
    </Grid>
</UserControl>

运行它，可以看到选择DataGrid某一行的时候，右边相应的详细信息也跟着变了，但这里并没有写任何代码，是不是很神奇呢？

二、绑定选择的多行SelectedItems

    上面由于SelectedItem同时有get、set访问器，所以支持直接绑定。但是SelectedItems是不支持set访问器的，所以无法直接绑定。有人提到使用Command来解决这一问题，现在便用一下他的方法吧：

    首先，实现ICommand接口：

    public class RelayCommand<T> : ICommand
    {
        /// <summary>
        /// Occurs when changes occur that affect whether the command should execute.
        /// </summary>
        public event EventHandler CanExecuteChanged;

        Predicate<T> canExecute;
        Action<T> executeAction;
        bool canExecuteCache;

        /// <summary>
        /// Initializes a new instance of the <see cref="RelayCommand"/> class.
        /// </summary>
        /// <param name="executeAction">The execute action.</param>
        public RelayCommand(Action<T> executeAction) : this(executeAction, null) { }

        /// <summary>
        /// Initializes a new instance of the <see cref="RelayCommand"/> class.
        /// </summary>
        /// <param name="executeAction">The execute action.</param>
        /// <param name="canExecute">The can execute.</param>
        public RelayCommand(Action<T> executeAction,
                               Predicate<T> canExecute)
        {
            this.executeAction = executeAction;
            this.canExecute = canExecute;
        }

        #region ICommand Members
        /// <summary>
        /// Defines the method that determines whether the command 
        /// can execute in its current state.
        /// </summary>
        /// <param name="parameter">
        /// Data used by the command. 
        /// If the command does not require data to be passed,
        /// this object can be set to null.
        /// </param>
        /// <returns>
        /// true if this command can be executed; otherwise, false.
        /// </returns>
        public bool CanExecute(object parameter)
        {
            if (canExecute == null)
                return true;

            bool tempCanExecute = canExecute((T)parameter);

            if (canExecuteCache != tempCanExecute)
            {
                canExecuteCache = tempCanExecute;
                if (CanExecuteChanged != null)
                {
                    CanExecuteChanged(this, EventArgs.Empty);
                }
            }

            return canExecuteCache;
        }

        /// <summary>
        /// Defines the method to be called when the command is invoked.
        /// </summary>
        /// <param name="parameter">
        /// Data used by the command. 
        /// If the command does not require data to be passed, 
        /// this object can be set to null.
        /// </param>
        public void Execute(object parameter)
        {
            executeAction((T)parameter);
        }
        #endregion
    }

  接下来，修改PeopleViewModel，定义一个Command属性以绑定到DataGrid的SelectionChange事件，同时添加其他需要用于多选的属性：

    public class PeopleViewModel : PropertyChangedBase
    {
        public PeopleViewModel()
        {
            Peoples = new ObservableCollection<People>();
            for (int i = 10; i < 30; i++)
            {
                Peoples.Add(new People { Name = "test" + i.ToString(), Age = i });
            }

            SelectionChangedCommand = new RelayCommand<IList>(SelectionChanged);
        }

        private People selectedPeople;

        public People SelectedPeople
        {
            get { return selectedPeople; }
            set
            {
                selectedPeople = value;
                this.NotifyPropertyChanged(p => p.SelectedPeople);
            }
        }

        public ObservableCollection<People> Peoples { get; set; }


        #region 多选

        private IEnumerable<People> selectedPeoples;
        public IEnumerable<People> SelectedPeoples
        {
            get { return selectedPeoples; }
            set
            {
                selectedPeoples = value;
                this.NotifyPropertyChanged(p => p.SelectedPeoples);
            }
        }

        private int numberOfItemsSelected;
        public int NumberOfItemsSelected
        {
            get { return numberOfItemsSelected; }
            set
            {
                numberOfItemsSelected = value;
                this.NotifyPropertyChanged(p => p.NumberOfItemsSelected);
            }
        }

        public RelayCommand<IList> SelectionChangedCommand { get; set; }

        private void SelectionChanged(IList items)
        {
            if (items != null)
            {
                SelectedPeoples = items.Cast<People>();
                NumberOfItemsSelected = items.Count;
            }
            else
            {
                SelectedPeoples = null;
                NumberOfItemsSelected = 0;
            }
        }
        #endregion
    }

    再定义一个Converter用于显示多个选择的People到textblock上：

    public class SelectedPeoplesConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            IEnumerable<People> SelectedPeoples = value as IEnumerable<People>;
            if (SelectedPeoples != null)
            {
                return string.Join(
                    "|",
                    SelectedPeoples.Select(p => string.Format("姓名：{0}，年龄：{1}   ", p.Name, p.Age))
                    );
            }

            return string.Empty;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    再添加我们的Demo2.xaml，这里Command的绑定用到了System.Windows.Interactivity.dll：

<UserControl x:Class="LWME.MVVMExperience.Views.Demo2"
    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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:v="clr-namespace:LWME.MVVMExperience.Views"
    xmlns:vm="clr-namespace:LWME.MVVMExperience.ViewModel"
    xmlns:cv="clr-namespace:LWME.MVVMExperience.Common"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <vm:PeopleViewModel x:Key="vm1" />
        <cv:SelectedPeoplesConverter x:Key="pc1" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource vm1}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="400" />
        </Grid.ColumnDefinitions>
        <sdk:DataGrid x:Name="peoplesDataGrid" Grid.Column="0" ItemsSource="{Binding Peoples}" SelectedItem="{Binding SelectedPeople, Mode=TwoWay}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged">
                    <i:InvokeCommandAction
                        Command="{Binding SelectionChangedCommand, Mode=OneWay}"
                        CommandParameter="{Binding SelectedItems, ElementName=peoplesDataGrid}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </sdk:DataGrid>
        <StackPanel Grid.Column="1" HorizontalAlignment="Center">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text=" 总共选中了：" />
                <TextBlock Text="{Binding NumberOfItemsSelected}" />
                <TextBlock Text="条记录，分别为：" />
            </StackPanel>
            <TextBlock Text="{Binding SelectedPeoples, Converter={StaticResource pc1}}" TextWrapping="Wrap" />
            <TextBlock Text=" 当前选中：" />
            <v:PeopleView DataContext="{Binding SelectedPeople}" />
        </StackPanel>
    </Grid>
</UserControl>

运行一下，选中多个列的时候，右边同时显示出了多个被选中的People数据以及选中的数目。

总结一下，良好的分离使MVVM看起来蛮优雅的，而且熟悉了以后，有利于简化代码以及提高开发效率，over。

DEMO在这里。。。