最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

MAUI新生6.4-集合内容类控件难点：CollectionView

来源：博客园

一、基本使用（数据源在ViewModel中硬编码）

//①在Models文件夹下，新建Employee.cs文件，创建Employee类型public class Employee{    public int Id { get; set; }    public string Name { get; set; }    public string Department { get; set; }    public string Portrait { get; set; }    public string Info { get; set; }}//②在ViewModels文件夹下，创建MainPageViewModel.cs//头像图片复制到Resources/Images文件夹下public partial class MainPageViewModel:ObservableObject{    [ObservableProperty]    private ObservableCollection employees;    public MainPageViewModel()    {        employees = new ObservableCollection         {             new Employee{ Id=1,Name="zs",Department="行政部",Portrait="zs.png",Info="这是关于张三的介绍" },            new Employee{ Id=2,Name="ls",Department="行政部",Portrait="ls.png",Info="这是关于李四的介绍" },            new Employee{ Id=3,Name="ww",Department="营销部",Portrait="ww.png",Info="这是关于王五的介绍" },            new Employee{ Id=4,Name="zl",Department="营销部",Portrait="zl.png",Info="这是关于赵六的介绍" },            new Employee{ Id=5,Name="qq",Department="营销部",Portrait="qq.png",Info="这是关于钱七的介绍" }        };    }}//③MainPage.xaml使用CollectionView


(相关资料图)

二、外观设置

1、条件样式：迭代数据项时，根据不同条件，显示不同外观，类似于Vue的v-for中if、Blaozor的foreach中if

//①在Controls文件夹下，创建一个Selector类public class EmployeeDataTemplateSelector : DataTemplateSelector{    //实例化EmployeeDataTemplateSelector时，从外部赋值XingZhengBu和YingXiaoBu属性    public DataTemplate XingZhengBu { get; set; }    public DataTemplate YingXiaoBu { get; set; }    //参数item为CollectionView迭代数据项，此例为Employee类型对象    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)    {        return ((Employee)item).Department.Contains("行政部")? XingZhengBu: YingXiaoBu;    }}//②在MainPage.xaml文件中使用                                                                        ......                                                            ......

2、排列方式：通过ItemsLayout设置垂直列表、水平列表、垂直网格、水平网格

1）垂直列表（如果不设置ItemsLayout，默认为垂直列表）

    ...                    ...

2）水平列表

    ...                    ...

3）垂直网格

    ......                   ...

4）水平网格

    ......                   ...

3、页眉页脚Header/Footer设置

1）页眉页脚设置为字符串

    ...

2）页眉页脚中显示视图

                                                            ......

3）页眉页脚设置DataTemplate。使用了DataTemplate后，可以设置条件模板，可自行测试。

                                                                                                            ......

4、数据项的间距。此时，ItemsLayout需要使用属性元素的方式进行设置（见第2项设置）

1）垂直/水平列表的数据项间距

                    ......

2）垂直/水平网格的Item数据项间距

                   ...

5、数据项大小调整的策略

    ...                        ...

7、动态调整数据项的大小

//XAML文件中，ImageButton定义Clicked事件                                                                                    ......                                                            //后台代码Clicked事件中，更改ImageButton的尺寸private void ImageButton_Clicked(object sender, EventArgs e){    var imageButton = sender as ImageButton;    imageButton.HeightRequest = imageButton.WidthRequest = imageButton.HeightRequest.Equals(60) ? 100 : 60;}

8、轻扫上下文菜单，结合SwipeView控件

                                                                                                                                                                                                                                                                                                                                                ......                                                            //ViewModel中的命令（DeleteCommand）[RelayCommand]private void Delete(Employee employee){    employees.Remove(employee);}

三、数据源设置

1、数据项选择控制

1）单选及设置预选

                                    //ViewModel设置初始预先项目SelectedEmployeepublic partial class MainPageViewModel:ObservableObject{    [ObservableProperty]    private ObservableCollection employees;    [ObservableProperty]    private Employee selectedEmployee;    public MainPageViewModel()    {        employees = new ObservableCollection         {             new Employee{ Id=1,Name="zs",Department="行政部",Portrait="zs.png",Info="这是关于张三的介绍" },            new Employee{ Id=2,Name="ls",Department="行政部",Portrait="ls.png",Info="这是关于李四的介绍" },            new Employee{ Id=3,Name="ww",Department="营销部",Portrait="ww.png",Info="这是关于王五的介绍" },            new Employee{ Id=4,Name="zl",Department="营销部",Portrait="zl.png",Info="这是关于赵六的介绍" },            new Employee{ Id=5,Name="qq",Department="营销部",Portrait="qq.png",Info="这是关于钱七的介绍" }        };        selectedEmployee = employees.Skip(2).FirstOrDefault();    }}

2）多选及设置预选

                                                                ......                        //ViewModel中设置SelectedEmployeespublic partial class MainPageViewModel:ObservableObject{    ......    [ObservableProperty]    private ObservableCollection selectedEmployees;    public MainPageViewModel()    {        ......        selectedEmployees = new ObservableCollection { employees[0], employees[3] };    }}

3）设置选择颜色

                                        .....

2、EmptyView：设置数据源不可用时，显示的替代内容

1）数据不可用时，显示字符串

    ......

2）数据不可用时，显示视图（ContentView）

                                                                ......

3）运行时再确定数据不可用时显示的视图方式一：ContentView

                                                                                                                                                            ......                        //Switch的Toggled事件上private void Switch_Toggled(object sender, ToggledEventArgs e){    collectionView.EmptyView = e.Value ? Resources["EmptyViewA"] : Resources["EmptyViewB"];}

4、下拉刷新？

5、增量加载？

四、列表滚动控制

1、滚动事件

    ......//ItemsViewScrolledEventArgs类型参数定义了丰富的属性，包括：//HorizontalDelta/VerticalDelta：水平/垂直滚动量//HorizontalOffset/VerticalOffset：相对于原点的水平/垂直偏移量//FirstVisibleItemIndex/LastVisibleItemIndex/CenterItemIndex：列表中可见的第一项/最后一项/中间项索引private async void CollectionView_Scrolled(object sender, ItemsViewScrolledEventArgs e){    ......    }

2、代码控件滚动

1）滚动到索引

//滚动到索引为5的数据项，并将数据项显示在列表可视窗的开始位置collectionView.ScrollTo(5,position:ScrollToPosition.Start);//分组数据时，滚动到第2组，索引为1的数据项collectionView.ScrollTo(2, 1);

2）滚动到Item数据项

//获取当前页面的BindingContext，并转化为页面对应的ViewModel对象var viewModel = BindingContext as MainPageViewModel;//筛选ViewModel中的Employees数据集合，并选取Name为qq的第一条数据var person = viewModel.Employees.FirstOrDefault(e=>e.Name=="qq");//滚动到这条数据项，在列表窗口的开始位置显示，并禁用滚动动画collectionView.ScrollTo(person,position:ScrollToPosition.Start,animate:false);//分组数据滚动GroupedAnimalsViewModel viewModel = BindingContext as GroupedAnimalsViewModel;AnimalGroup group = viewModel.Animals.FirstOrDefault(a => a.Name == "Monkeys");Animal monkey = group.FirstOrDefault(m => m.Name == "Proboscis Monkey");collectionView.ScrollTo(monkey, group);

五、数据分组显示 ：

总体分为两步：一、设置分组数据源；二、在XAML中显示分组；三、设置页眉、页脚、空组显示等，可详见文档。

关键词： 属性设置 分组数据 直接设置