The magic of "Windows Phone" CollectionViewSource

Source: Internet
Author: User

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:

        <local:DepartmentList x:Key="deplist"/>
        <CollectionViewSource x:Key="departmentView"
                              Source="{StaticResource deplist}"/>
        <DataTemplate x:Key="dtEmployees">
            <StackPanel Height="50"

                <TextBlock Height="50"
                           Text="{Binding Number}"/>
                <TextBlock Height="50"
                           Text="{Binding Name}"/>
                <TextBlock Height="50"
                           Text="{Binding BirthYear}"/>
                <TextBlock Height="50"
                           Text="{Binding Sex}"/>


Add the following code to the layout page:

<TextBlock Width="300"
                       Text="Please select department:"
            <ListBox Name="lb1"
                     ItemsSource="{Binding Source={StaticResource departmentView}}"
                     VerticalAlignment="Top" FontSize="32" />
            <TextBlock Height="62"
                       Text="{Binding Path=DepName,Source={StaticResource departmentView}}"
                       Foreground="Red" Margin="12,210,0,0" FontSize="32" />

            <TextBlock Height="50"
                       Text="Employee List"
                       VerticalAlignment="Top" Margin="0,210,169,0" Width="158" FontSize="32" />

            <TextBlock Height="50"
                       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"
                       Text="work number" Margin="6,278,330,279" FontSize="32" />
            <TextBlock Height="50"
                       Text="name" Margin="0,278,260,279" HorizontalAlignment="Right" FontSize="32" />

            <ListBox Name="lb2"
                     ItemsSource="{Binding Path=Employees,Source={StaticResource departmentView}}"
                     ItemTemplate="{StaticResource dtEmployees}" Margin="12,334,-46,0" FontSize="32" />

The magic of "Windows Phone" CollectionViewSource

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.