Xamarin.Forms 第12局：集合型控件

总目录

---

前言

本文介绍集合型控件：
一、Picker
二、ListView
三、TableView

环境

1.Visual Studio 2017
2.Xamarin.Froms 4.0.0.8055-pre1
3.Android 4.4(API 19)或更高版本
4.约定：XF代表Xamarin.Forms

内容

一、Picker

Picker：选取器。

实现效果

Xaml方式

Picker主要属性和事件：

• Title：引导性标题；
• ItemSource：选择项集合；
• SelectedIndex：选中索引；
• SelectedItem：选中项；
• SelectedIndexChanged：用户选择某项时触发的事件。

注：上述属性也可通过绑定方式进行数据填充，后续会在数据绑定篇进行相关介绍。

C#方式

二、ListView

ListView：集合列表。

这里简单实现类似QQ好友列表的集合，包括以下功能：

• 列表展示和响应选择
• 上下文菜单
• 下拉刷新

实现效果

列表展示和响应选择

上下文菜单

下拉刷新

Xaml方式

1.ListView是常用控件，如好友列表，音乐列表等。分析ListView可知，它基本有以下部分：

• 数据源。即：要展示的数据；
• ListView外观。即：整体ListView外观；
• ListView单元格外观。即：列表中每一项的外观；
• 交互。即：点击操作，长按操作，下拉刷新操作等。

2.本例用到了数据模板和数据绑定相关知识，可以简单了解下：

• 数据模板(DataTemplate)：数据的表现形式。本例中，ListView每一项如何展示，需要设置其ItemTemplate为DataTemplate，在DataTemplate中写展示方式代码，这里用ViewCell展示，ViewCell是自定义单元格，在ViewCell中写布局，控件等，控制列表每一项的外观展示；

• 数据绑定(DataBinding)：将两个对象的属性绑定。本例中，数据源为FriendViewModel的集合，这里用ObservableCollection，它与List的区别是，当向列表中添加一条数据时，界面会自动更新，但List不会。将集合绑定到ListView的ItemSource属性，然后在ViewCell中直接以Binding的方式将展示数据。

3.列表展示：本例中，通过设置数据源，然后在ViewCell编写布局及控件，然后通过数据绑定展示数据。通过设置RowHeight属性设置每一行的行高。

4.列表选择：ItemSelected事件响应用户选择；

5.上下文菜单：通过在ContextActions中添加MenuItem，设置菜单项。注意，需要设置CommandParameter="{Binding .}"，即：将命令参数绑定到选项自身，然后传递到菜单点击事件中，若不设置，点击事件中无法获取要操作的项；

6.下拉刷新：将IsPullToRefreshEnabled设置为True以支持下拉刷新，下拉刷新会执行RefreshCommand命令。注意，在刷新操作最后将IsRefreshing设置为false，否则界面的刷新动画不会消失。

注：本例中的展示方式也可以用ImageCell，不过ViewCell比较重要，所以用它做实现，Cell更多信息在下面TableView中介绍。

C#方式：一般ListView用Xaml方式。

二、TableView

TableView：表控件。

实现效果

Xaml方式

1.TableView常用于显示设置界面；

2.TableView结构：

• TableView下面是TableRoot；
• TableRoot下面可包含多个TableSection节点；
• TableSection下面可包含多个单元格(Cell)；

3.单元格(Cell)：单元格是列表中的项，专用于ListView和TableView，有以下几类：

• TextCell：文本单元格，显示文本；
• ImageCell：图片单元格，显示图片和一些描述信息；
• SwitchCell：开关单元格；
• EntryCell：文本输入框单元格；
• ViewCell：自定义单元格(重要)，若上述内置单元格不足，可自定义单元格。

C#方式：一般TableView用Xaml方式。

后语

下篇介绍数据绑定，待续...

---

总目录