• 【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" />

    保存运行即可。

     

  • 相关阅读:
    基于jQuery的自定义插件:实现整屏分页转换的功能
    蝶恋花
    js中面向对象编程
    移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法
    控制使用jquery load()方法载入新页面中的元素
    bootstrap-daterangepicker双日历控件开始日期选择问题
    点击select下拉框获取option的属性值
    bootstrap table表格前台分页,点击tab选项,重新刷新表格
    jquery中使元素显示和隐藏方法之间的区别
    jquery对象和DOM对象的相互转换
  • 原文地址:https://www.cnblogs.com/ngnetboy/p/2444659.html
Copyright © 2020-2023  润新知