Simple MVVM Toolkit 之 Messaging（A）

1. Simple MVVM Toolkit 简单介绍：

    Simple MVVM Toolkit是一个开源的MVVM框架，提供VS项目和项的模板，依赖注入，支持深拷贝以及模型和视图模型之间的属性关联。想了解具体介绍的请点击这里。

2. Simple MVVM Toolkit 的 Messaging 简单介绍：

    Simple MVVM Toolkit 的 Messaging 能够达到不同View-Model之间松耦合的通讯。

3. 通过一个MVVM的示例，体会 Simple MVVM Toolkit 的 Messaging 机制如何实现不同 View-Model 之间的通讯：

    需求说明：

    a)客户列表窗体和客户列表对应的客户的明细窗体同时存在；

    b)点击客户列表的某个客户，为其年龄增加1岁，此变更会通知到列表对应客户的明细窗体。

    步骤：

3.1 新建WPF项目，项目命名为MessagingSimple。

注意：新建完项目之后请添加对SimpleMvvmToolkit-WPF.dll的引用。

3.2 右键项目，添加文件夹 Models、ViewModels 和 Views。        

  

4. 首先定义客户实体，右键Models文件夹，添加类 Customer：

    public class Customer : ModelBase<Customer>
    {
        private string customerName;

        public string CustomerName
        {
            get { return customerName; }
            set
            {
                customerName = value;
                NotifyPropertyChanged(m => m.CustomerName);
            }
        }

        private int age;

        public int Age
        {
            get { return age; }
            set
            {
                age = value;
                NotifyPropertyChanged(m => m.Age);
            }
        }

        // Manufacture a list of customers
        private static ObservableCollection<Customer> customersList;

        public static ObservableCollection<Customer> CustomersList
        {
            get
            {
                if (customersList == null)
                {
                    customersList = new ObservableCollection<Customer>
                    {
                        new Customer { CustomerName = "Bill Gates", Age = 10 },
                        new Customer { CustomerName = "Steve Jobs", Age = 20 },
                        new Customer { CustomerName = "Mark Zuckerberg", Age = 30 }
                    };
                }
                return customersList;
            }
        }
    }

5. 其次，定义显示数据的视图，右键Views文件夹，添加用户控件CustomerList和CustomerDetail：

    CustomerList.xaml：

<UserControl x:Class="MessagingSimple.Views.CustomerList"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="250"
             d:DesignWidth="250"
             Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <ListBox ItemsSource="{Binding Path=Customers}"
                 SelectedItem="{Binding Path=SelectedCustomer, Mode=TwoWay}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Path=CustomerName}"
                                   Padding="5,5,0,5" />
                        <TextBlock Text=":"
                                   Padding="5,5,0,5" />
                        <TextBlock Text="{Binding Path=Age}"
                                   Padding="5,5,0,5"
                                   FontWeight="Bold" />
                        <TextBlock Text="Age"
                                   Padding="5,5,5,5" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
       
    </Grid>
</UserControl>

   CustomerList.xaml.cs：

    /// <summary>
    /// CustomerList.xaml 的交互逻辑
    /// </summary>
    public partial class CustomerList : UserControl
    {
        public CustomerList()
        {
            InitializeComponent();

            this.DataContext = new CustomerListViewModel();
        }
    }

   CustomerDetail.xaml：

<UserControl x:Class="MessagingSimple.Views.CustomerDetail"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:vm="clr-namespace:MessagingSimple.ViewModels"
             mc:Ignorable="d"
             d:DesignHeight="180"
             d:DesignWidth="345">
    <UserControl.DataContext>
        <vm:CustomerDetailViewModel />
    </UserControl.DataContext>
    <Grid>
        <TextBlock Height="23"
                   HorizontalAlignment="Left"
                   Margin="24,37,0,0"
                   Name="textBlock1"
                   Text="Customer Name :"
                   VerticalAlignment="Top" />
        <TextBlock Height="23"
                   HorizontalAlignment="Left"
                   Margin="24,82,0,0"
                   Name="textBlock2"
                   Text="Customer Age :"
                   VerticalAlignment="Top" />
        <TextBox Height="23"
                 HorizontalAlignment="Left"
                 Margin="137,34,0,0"
                 Name="textBox1"
                 Text="{Binding Path=Customer.CustomerName}"
                 VerticalAlignment="Top"
                 Width="172" />
        <TextBox Height="23"
                 Text="{Binding Path=Customer.Age}"
                 HorizontalAlignment="Left"
                 Margin="137,79,0,0"
                 Name="textBox2"
                 VerticalAlignment="Top"
                 Width="172" />
    </Grid>
</UserControl>

    CustomerDetail.xaml.cs：

    /// <summary>
    /// CustomerDetail.xaml 的交互逻辑
    /// </summary>
    public partial class CustomerDetail : UserControl
    {
        private CustomerDetailViewModel viewModel;

        public CustomerDetail()
        {
            InitializeComponent();

            viewModel = (CustomerDetailViewModel)DataContext;
        }

        private int customerIndex;

        public int CustomerIndex
        {
            get { return customerIndex; }
            set
            {
                customerIndex = value;
                viewModel.Customer = Customer.CustomersList[value];
            }
        }
    }

 

6. 最后为视图 CustomerList 和 CustomerDetail 创建对应的View-Model类，右键ViewModels文件夹，添加类 CustomerListViewModel 和 CustomerDetailViewModel：

    CustomerListViewModel.cs：

    public class CustomerListViewModel : ViewModelBase<CustomerListViewModel>
    {
        public CustomerListViewModel()
        {
            Customers = Customer.CustomersList;
        }

        private ObservableCollection<Customer> customers =
            new ObservableCollection<Customer>();

        public ObservableCollection<Customer> Customers
        {
            get { return customers; }
            set { customers = value; }
        }

        private Customer selectedCustomer;

        public Customer SelectedCustomer
        {
            get { return selectedCustomer; }
            set
            {
                selectedCustomer = value;
                NotifyPropertyChanged(m => m.SelectedCustomer);
            }
        }
    }

    CustomerDetailViewModel.cs：

    public class CustomerDetailViewModel : ViewModelDetailBase<CustomerDetailViewModel, Customer>
    {
        public Customer Customer
        {
            get { return base.Model; }
            set
            {
                base.Model = value;
                NotifyPropertyChanged(m => m.Customer);
            }
        }
    }

7. 现在运行项目，效果如下，客户列表和客户明细之间是相互独立的。

为了达到使用 Messaging 前后的比较效果，所以我打算分开写。未完待续。。。

点击这里下载源代码。(MessagingSimple-MessagingBefore)