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)