The magic of "Windows Phone" CollectionViewSource

When binding collection data in Windows Phone, it is sometimes necessary to have hierarchical data, usually in the form of master-slave attempts to display. The usual approach is to bind the data source of the second listbox (main view) to the first listbox

The SelectedItem (from the view), or the SelectionChanged event of the first ListBox, sets the binding. But the use of CollectionViewSource class can be more convenient to achieve;

CollectionView is a collection view class that supports sorting, grouping, and filtering of data. The image of the data is arranged in combination;

CollectionViewSource is a XAML proxy for CollectionView, which can be used in XAML;

Case Description: Use the master-slave attempt to display a list of two employees, as follows:

Pre-work, create three classes to initial data source;

(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}
            //};
        }

    }

Note: You need to refer to the namespace--using System.Collections.ObjectModel when using observablecollection<t>;

Add a namespace mapping in the phone:phoneapplicationpage tag of the new page. The code is as follows:

Xmlns:local= "Clr-namespace: Data Binding"//My project is "data binding"

To add a resource dictionary:

  <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>

Add the following code to the layout page:

<TextBlock Width="300"
                       Height="50"
                       FontSize="36"
                       Text="Please select department:"
                       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="Employee List"
                       VerticalAlignment="Top" Margin="0,210,169,0" Width="158" FontSize="32" />

            <TextBlock Height="50"
                       HorizontalAlignment="Left"
                       Width="120"
                       Text="gender" Margin="344,278,0,279" FontSize="32" />
            <TextBlock Height="50" Text="date of birth" Margin="204,278,112,279" FontSize="32" />
            <TextBlock Height="50"
                       Width="120"
                       Text="work number" Margin="6,278,330,279" FontSize="32" />
            <TextBlock Height="50"
                       Width="98"
                       Text="name" 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" /> 

http://www.cnblogs.com/ngnetboy/archive/2012/04/12/2444659.html

The magic of "Windows Phone" CollectionViewSource