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，这样每个客户就像我们希望的一样显示出来了：

   1: <ListBox

   2:    x:Name="PersonListBox"

   3:    Margin="10"

   4:    ItemsSource="{Binding Customers}">

   5:    <ListBox.ItemTemplate>

   6:       <DataTemplate>

   7:          <StackPanel>

   8:             <StackPanel

   9:                x:Name="DataTemplateStackPanel"

  10:                Orientation="Horizontal">

  11:                <TextBlock

  12:                   x:Name="FirstName"

  13:                   Text="{Binding First}"

  14:                   Margin="0,0,5,0"

  15:                   Style="{StaticResource PhoneTextExtraLargeStyle}" />

  16:                <TextBlock

  17:                   x:Name="LastName"

  18:                   Text="{Binding Last}"

  19:                   Margin="0"

  20:                   Style="{StaticResource PhoneTextExtraLargeStyle}" />

  21:             </StackPanel>

  22:             <TextBlock

  23:                x:Name="Email"

  24:                Text="{Binding Email}"

  25:                Margin="0"

  26:                Style="{StaticResource PhoneTextSubtleStyle}" />

  27:  

  28:          </StackPanel>

  29:       </DataTemplate>

  30:    </ListBox.ItemTemplate>

  31: </ListBox>

 

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

 

源代码下载