WindowsPhone7中实现主从视图.doc

在实际开发中，经常会使用到主从的显示，当选中一个父项，则子项的集合自动进行修改，我们可以使用传统的SelectedIndexChanged修改去实现，但是通常情况下借助于collectionViewSource类更方便的来实现。
准备工作：
1.新建实体类
职工类：

public class Employee
{
public int Number { get; set; }
public string Name { get; set; }
public string Sex { get; set; }
public int BirthYear { get; set; }
}

 部门类：
public class Department
{
public string DeptName { get; set; }
public ObservableCollection<Employee> Employees { get; set; }
}

自定义集合类(关键):

public class DepartmentList:ObservableCollection<Department>
{
public DepartmentList()
{
ObservableCollection<Employee> employees1 = new ObservableCollection<Employee>()
{
new Employee{ Number=2012, Name="MagicBoy", Sex="男", BirthYear=2000},
new Employee{ Number=1001, Name="ListenFly", Sex="男", BirthYear=1990},
new Employee{ Number=2555,Name="Tank", Sex="男", BirthYear=1980}
};

ObservableCollection<Employee> employees2 = new ObservableCollection<Employee>()
{
new Employee{ Number=2012, Name="Harry", Sex="男", BirthYear=2000},
new Employee{ Number=1001, Name="Fly", Sex="男", BirthYear=1990},
new Employee{ Number=2555,Name="MayDay", Sex="男", BirthYear=1980}
};

this.Add (new Department{ DeptName="录音部", Employees=employees1});
this.Add(new Department { DeptName = "唱片部", Employees = employees2 });
}
}

一共创建了三个类，一个职工类，一个部门类，部门类和职工类是一对多的关系，所以在部门类中有一个职工的集合；最后一个类是自定义集合，顾名思义，实现了ObservableCollection<Deparment>,然后在类中添加了两个Department对象(同时初始化职工类的数据，这样便有了一对多的数据).

然后看XAML怎么使用:
首先在phone中引用对当前命名空间的引用，前缀为local,然后生命资源；资源包括一个DepartmentList的对象，一个CollectionViewSource的对象(source属性表明该数据源，在这里赋值为DepartmentList，这样便可以进行主动的实现，后边会讲到)，同时为了让ListBox显示更好的效果(多列)，在此创建了一个模板，用于显示职工信息。

<phone:PhoneApplicationPage.Resources>
<local:DepartmentList x:Key="depList"></local:DepartmentList>
<CollectionViewSource x:Key="departmentView" Source="{StaticResource depList}"></CollectionViewSource>
<DataTemplate x:Key="dtEmployees">
<StackPanel Height="50" HorizontalAlignment="Center" Width="480"
VerticalAlignment="Top" Orientation="Horizontal">
<TextBlock Height="50" HorizontalAlignment="Left" Text="{Binding Number}" VerticalAlignment="Top" Width="120"></TextBlock>
<TextBlock Height="50" HorizontalAlignment="Left" Text="{Binding Name}" VerticalAlignment="Top" Width="120"></TextBlock>
<TextBlock Height="50" HorizontalAlignment="Left" Text="{Binding Sex}" VerticalAlignment="Top" Width="120"></TextBlock>
<TextBlock Height="50" HorizontalAlignment="Left" Text="{Binding BirthYear}" VerticalAlignment="Top" Width="120"></TextBlock>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>

看下显示部分的代码：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<ListBox x:Name="listDepartment" Grid.Row="0" DisplayMemberPath="DeptName"
ItemsSource="{Binding Source={StaticResource departmentView}}"></ListBox>
<ListBox x:Name="listEmployees" Grid.Row="1"  VerticalAlignment="Top" Height="400" ItemTemplate="{StaticResource dtEmployees}"
ItemsSource="{Binding Path=CurrentItem.Employees,Source={StaticResource departmentView}}">
</ListBox>

</Grid>

代码很简单，两个ListBox构成，这个不是重点，重点的属性的设置，可以看到设置listDepartment(部门列表)的DisplayMemberPath为部门名称,同时设置ItemSource为
很奇怪的表达式ItemsSource="{Binding Source={StaticResource departmentView}}" ，慢慢来分析，Binding不用解释就是绑定，Source为指向一个数据源，这里
数据源就是在资源中创建的collectionViewSource,由于我们指定了listDepartment的DisplayMemberPath为DepName，所以只会显示部门信息。
然后来看第二个ListBox，listEmployees先是指定了ItemTemplate,后头去看我们的这个模板，可以看到在模板中使用一个StackPanel横向放了四个TextBlock，同时
设置Text绑定为一个个属性。我们指定listEmployeest的项模板为资源中创建的，重点不是这个，重点同样为ItemsSource的设置，
ItemsSource="{Binding Path=CurrentItem.Employees,Source={StaticResource departmentView}}",这个看起来比刚才的还要复杂，没关系，道理是一样的。
首先我们会发现这个表达式中后半部分和listDeparment是一样的，那就是Source={StaticResource departmentView}，说明这两个ListBox的数据源是一致的，重点
是前边的Path=CurrentItem.Employees,很神奇，这个CurrentItem就是代表当前绑定源departmentView的当前选中项，这个CollectionViewSource会自动识别(其实
可以省略的),所以CurrentItem.Employees就是当前department对应的Employees.到此Windows Phone中实现简单的主从显示就完成了，附效果图和源码.

 源码下载