【windows phone】CollectionViewSource的妙用

在windows phone中绑定集合数据的时候，有时候需要分层数据，通常需要以主从试图形式显示。通常的方法是将第二个ListBox（主视图）的数据源绑定到第一个ListBox

（从视图）的SelectedItem，或者通过第一个ListBox的SelectionChanged事件来设置绑定。但是借助CollectionViewSource类可以更方便的实现；

CollectionView是一个集合视图类，支持数据的排序、分组、过滤。对数据的映像进行排列组合；

CollectionViewSource是CollectionView的一个XAML代理，可以在XAML中使用；

案例说明：用主从试图关系显示两个的员工列表；效果图如下：

前期工作，创建三个类来初始数据源；

（1）Employee.cs

    public class Employee

    {

        public int Number { get; set; } //工号

        public string  Name { get; set; } //姓名

        public string  Sex { get; set; } //性别

        public int BirthYear { get; set; } //出生年份

    }

（2）Department.cs

    public class Department:ObservableCollection<Employee>

    {

            public string DepName { get; set; }

            public ObservableCollection<Employee> Employees { get; set; }

    }

（3）DepartmentList.cs

    public class DepartmentList:ObservableCollection<Department>

    {

        public DepartmentList()

        {

            ObservableCollection<Employee> employee1 = new ObservableCollection<Employee> 

            {

                new Employee{Number=2012,Name="netboy",Sex="boy",BirthYear=1992},

                new Employee{Number=2013,Name="dandan",Sex="girl",BirthYear=2000},

                new Employee{Number=2014,Name="xiaobai",Sex="girl",BirthYear=2012}

            };



            ObservableCollection<Employee> employee2 = new ObservableCollection<Employee> 

            {

                new Employee{Number=2020,Name="kaizi",Sex="girl",BirthYear=2011},

                new Employee{Number=2021,Name="yangzai",Sex="gril",BirthYear=2010}

            };



            this.Add(new Department { DepName = "技术部", Employees = employee1 });

            this.Add(new Department { DepName = "商务部", Employees = employee2 });

            //ObservableCollection<Department> deparment = new ObservableCollection<Department> 

            //{

            //    new Department{DepName="tengfei",Employees=employee1},

            //    new Department{DepName="google",Employees=employee2}

            //};

        }



    }

注意：使用ObservableCollection<T>的时候需要引用命名空间——using System.Collections.ObjectModel;

通过在新建页面的phone:PhoneApplicationPage标记中添加一个命名空间映射。代码如下：

xmlns:local="clr-namespace:数据绑定"//我的项目为“数据绑定”

添加资源字典：

   <phone:PhoneApplicationPage.Resources>

        <local:DepartmentList x:Key="deplist"/>

        <CollectionViewSource x:Key="departmentView"

                              Source="{StaticResource deplist}"/>

        <DataTemplate x:Key="dtEmployees">

            <StackPanel Height="50"

                        HorizontalAlignment="Center"

                        Width="480"

                        VerticalAlignment="Top"

                        Orientation="Horizontal">



                <TextBlock Height="50"

                           HorizontalAlignment="Left"

                           Width="90"

                           Text="{Binding Number}"/>

                <TextBlock Height="50"

                           Width="120"

                           Text="{Binding Name}"/>

                <TextBlock Height="50"

                           Width="120"

                           Text="{Binding BirthYear}"/>

                <TextBlock Height="50"

                           Width="120"

                           Text="{Binding Sex}"/>



            </StackPanel>

        </DataTemplate>

    </phone:PhoneApplicationPage.Resources>

在布局页面中添加如下代码：

            <TextBlock Width="300"

                       Height="50"

                       FontSize="36"

                       Text="请选择部门:"

                       HorizontalAlignment="Left"

                       VerticalAlignment="Top"

                       Margin="10,30,0,0"/>

            <ListBox Name="lb1"

                     Height="100"

                     Width="156"

                     DisplayMemberPath="DepName"

                     ItemsSource="{Binding Source={StaticResource departmentView}}"

                     Margin="40,86,260,0"

                     HorizontalAlignment="Center"

                     VerticalAlignment="Top" FontSize="32" />

            <TextBlock Height="62"

                       Width="111"

                       HorizontalAlignment="Left"

                       VerticalAlignment="Top"

                       Text="{Binding Path=DepName,Source={StaticResource departmentView}}"

                       Foreground="Red" Margin="12,210,0,0" FontSize="32" />



            <TextBlock Height="50"

                       HorizontalAlignment="Right"

                       Text="员工列表"

                       VerticalAlignment="Top" Margin="0,210,169,0" Width="158" FontSize="32" />



            <TextBlock Height="50"

                       HorizontalAlignment="Left"

                       Width="120"

                       Text="性别" Margin="344,278,0,279" FontSize="32" />

            <TextBlock Height="50" Text="出生日期" Margin="204,278,112,279" FontSize="32" />

            <TextBlock Height="50"

                       Width="120"

                       Text="工号" Margin="6,278,330,279" FontSize="32" />

            <TextBlock Height="50"

                       Width="98"

                       Text="名字" Margin="0,278,260,279" HorizontalAlignment="Right" FontSize="32" />



            <ListBox Name="lb2"

                     Height="170"

                     VerticalAlignment="Top"

                     ItemsSource="{Binding Path=Employees,Source={StaticResource departmentView}}"

                     ItemTemplate="{StaticResource dtEmployees}" Margin="12,334,-46,0" FontSize="32" />

保存运行即可。