MVVM Light (Part 4)

原文地址：http://jesseliberty.com/2011/01/07/windows-phone-from-scratch-19-mvvm-light-toolkit-soup-to-nuts-4/

 

让我们回顾一下，前面三部分使用了ViewModel，并绑定到ViewModel。在这个迷你教程中，我将展示如何把ViewModel中的collection绑定到View中的ListBox的基础知识。接下来，我将展示如何捕获ListBox的选择，在ViewModel中确定详情页面应该如何显示。

 

我们来创建一个简单的应用程序，将显示客户和他们的电子邮件的全名，并最终允许用户点击某客户并显示此客户的详细信息。

 

我们开始创建一个新的MVVM程序。创建后，在Blend中打开，并在content panel中添加一个ListBox。

 

创建CustomerCollection类

CustomerCollection类将给我们一些数据以用来展示。我从之前的demo中“借用”这个类。这个类包含许多字段（姓、名、地址、城市、邮编、电话、传真、电子邮件），属性，最重要的返回一个随机混合和匹配值的observable collection。

 

Binding the ItemSource

理解MVVM处理数据绑定的关键是View的DataContext是ViewModel。正如你所期望的，在View中为ItemSource的绑定应该如下所示：

   1: <ListBox

   2:    x:Name="PersonListBox"

   3:    Margin="10"

   4:    

ItemsSource="{Binding Customers}">

 

当你安装了MVVM Light，页面的Data Context应该设置为ViewModel，你需要一个只读的属性来绑定。我建议使用MVVM Light中的code snippet。

 

因此，返回VS，在code behind文件，MainViewModel.cs里，输入mvvminpc，按Tab。这将帮助你快速完成输入属性的任务，你可以设置属性的名字为Customers，返回变量为_customers。但我们不需要返回变量也不需要Setter，所以我们将使用CustomerCollection类中的Customers属性。

   1: public ObservableCollection<Customer> Customers

   2: {

   3:    get

   4:    {

   5:       var customerCollection = new CustomerCollection();

   6:       

return customerCollection.Customers;

   7:    }

   8: }

 

剩下的就是在View里提供一个DataTemplate，这样每个客户就像我们希望的一样显示出来了：

<ListBox
   x:Name="PersonListBox"
   Margin="10"
   ItemsSource="{Binding Customers}">
   <ListBox.ItemTemplate>
      <DataTemplate>
         <StackPanel>
            <StackPanel
               x:Name="DataTemplateStackPanel"
               Orientation="Horizontal">
               <TextBlock
                  x:Name="FirstName"
                  Text="{Binding First}"
                  Margin="0,0,5,0"
                  Style="{StaticResource PhoneTextExtraLargeStyle}" />
               <TextBlock
                  x:Name="LastName"
                  Text="{Binding Last}"
                  Margin="0"
                  Style="{StaticResource PhoneTextExtraLargeStyle}" />
            </StackPanel>
            <TextBlock
               x:Name="Email"
               Text="{Binding Email}"
               Margin="0"
               Style="{StaticResource PhoneTextSubtleStyle}" />

         </StackPanel>
      </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

 

最后，我们需要处理用户点击每个客户的事件，并转向一个详情页面，下个部分会继续讨论。

 

源代码下载