原文地址：

 

让我们回顾一下，前面三部分使用了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: 

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
      
        Customers
      

2: {

3:    get

4:    {

5:       var customerCollection = new CustomerCollection();

6:

return customerCollection.Customers;

7:    }

8: }

 

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

1: 

2:    x:Name="PersonListBox"

3:    Margin="10"

4:    ItemsSource="{Binding Customers}">

5:    
      

6:       
      

7:          
      

8:             

9:                x:Name="DataTemplateStackPanel"

10:                Orientation="Horizontal">

11:                

12:                   x:Name="FirstName"

13:                   Text="{Binding First}"

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

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

16:                

17:                   x:Name="LastName"

18:                   Text="{Binding Last}"

19:                   Margin="0"

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

21:             

22:             

23:                x:Name="Email"

24:                Text="{Binding Email}"

25:                Margin="0"

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

27:

28:          

29:       

30:    

31: 

 

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