1. 程式人生 > >【windows phone】CollectionViewSource的妙用

【windows phone】CollectionViewSource的妙用

.com edi mss 空間 eight mar item fontsize oba

在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" />
技術分享 http://www.cnblogs.com/ngnetboy/archive/2012/04/12/2444659.html

【windows phone】CollectionViewSource的妙用