与ListView不同,ListView提供ItemTemplate显示同类型数据集合,TableView通过不同Cell显示不同数据类型集合,TableView没有ItemSource的概念需要手动设置Child。如借助TableView实现Setting界面:
TableView属性
- HasUnevenRows :bool类型的值,表示TableView是否有不均匀行。
- Intent :TableIntent类型,获取、设置列表底部的字符串或视图。
- RowHeight :int类型,设置TableView行高,如果HasUnevenRows为true忽略该属性。
-
Root :TableRoot类型,获取设置TableView显示Items结构的根节点。
每个TableView包含一个TableRoot,TableRoot内有一个Title(只对Windows Phone有效)和多个TableSection,每个TableSection又包含一个Title和多个Cell。
TableRoot 继承TableSectionBase<TableSection>,TableSection继承 TableSectionBase<Cell>,都继承自TableSectionBase<T>,TableSectionBase<T>又实现了INotifyCollectionChanged接口,况且使用ObservableCollection<T>管理内部集合元素,所以我们可以通过代码动态增加和删除TableView中的字元素。
TableView 定义
<TableView Intent="Settings">
<TableRoot>
<TableSection Title="Section Title">
<EntryCell Text="EntryCell" Label="EntryCell Label"/>
<SwitchCell Text="SwitchCell" On="true" />
<TextCell Text="Cell Text" Detail="Cell Detail"/>
</TableSection>
</TableRoot>
</TableView>
TableView默认填充整个屏幕,效果图:
TableView提供TableIntent类型属性Intent
可以定义TableView的外观。
- Data – TableView显示数据列表时使用。
- Form – TableView每行提供对应动作时使用。
- Menu – TableView显示成菜单样式.
- Settings – TableView显示设置列表样式。
除了Data对应样式的Title显示外没发现有什么不同,,,
Cell介绍
Forms提供了四个Cell方便我们的开发,这四个Cell分别是TextCell、ImageCell、SwitchCell、EntryCell,前两个通常用于ListView,介绍ListView时有Cell的相关介绍。SwitchCell和EntryCell多用于TableView的定义。
SwitchCell
SwitchCell用来设置和显示一个bool值。
- Text–左侧显示文本,对这个bool值进行描述。
- On–表示Switch的状态对应这个bool值。
EntryCell
EntryCell提供了一个Entry让用户进行输入。
- Keyboard – Entry获取焦点时显示软键盘的样式。
- Label – 左侧显示的说明文本。
- LabelColor – 左侧显示文本颜色。
- Placeholder – Entry内容为空时显示的内容。
- Text – Entry输入的内容。
- HorizontalTextAlignment – Text水平对其方式。
自定Cell
当Forms提供的Cell不能满足需求时可以通过继承ViewCell自定义Cell实现。
自定义PickerCell示例:
新建文件可以选择Forms ContentView
或Forms ContentView Xaml
Forms ContentView用来通过代码定义Cell,Forms ContentView Xaml用XAML定义Cell。
本示例新建一个Forms ContentView Xaml文件,命名PickerCell。
修改XAML文件的根节点为ViewCell,并做如下修改:
<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="views.PickerCell" x:Name="cell">
<ViewCell.View>
<StackLayout Orientation="Horizontal"
BindingContext="{x:Reference cell}"
Padding="16, 0">
<Label Text="{Binding Label}"
VerticalOptions="Center" />
<Picker x:Name="picker"
Title="{Binding Title}"
VerticalOptions="Center"
HorizontalOptions="FillAndExpand"
SelectedIndexChanged="OnPickerSelectedIndexChanged" />
</StackLayout>
</ViewCell.View>
</ViewCell>
给Cell添加Name属性,并设置StackLayout的BindingContext为Cell本身,用来绑定Label和Picker。
CS文件实现:
[ContentProperty("Items")]
public partial class PickerCell : ViewCell
{
public static readonly BindableProperty LabelProperty = BindableProperty.Create("Label", typeof(string), typeof(PickerCell), default(string));
public static readonly BindableProperty TitleProperty = BindableProperty.Create("Title", typeof(string), typeof(PickerCell), default(string));
public static readonly BindableProperty SelectedValueProperty = BindableProperty.Create("SelectedValue", typeof(string), typeof(PickerCell), null,
BindingMode.TwoWay, propertyChanged: (sender, oldValue, newValue) =>
{
PickerCell pickerCell = (PickerCell)sender;
if (String.IsNullOrEmpty((string)newValue))
{
pickerCell.picker.SelectedIndex = -1;
}
else
{
pickerCell.picker.SelectedIndex =
pickerCell.Items.IndexOf((string)newValue);
}
});
public PickerCell()
{
InitializeComponent();
}
public string Label
{
get { return (string)GetValue(LabelProperty); }
set { SetValue(LabelProperty, value); }
}
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public string SelectedValue
{
get { return (string)GetValue(SelectedValueProperty); }
set { SetValue(SelectedValueProperty, value); }
}
public IList<string> Items
{
get { return picker.Items; }
}
void OnPickerSelectedIndexChanged(object sender, EventArgs args)
{
if (picker.SelectedIndex == -1)
{
SelectedValue = null;
}
else
{
SelectedValue = Items[picker.SelectedIndex];
}
}
}
[ContentProperty("Items")]
这段代码使我们XAML中定义Cell是直接指定Items的值不需要设置属性节点。对属性值的操作尽量通过BindableObject提供的SetValue方法完成,属性有更新时可以更新到XAML界面。
定义TableView时使用自定义的PickerCell:
运行效果:
为了方便,可以直接在XAML中定义TableView时自定义Cell:
响应TableView的点击事件
TextCell and ImageCell提供了Command和CommandParameter属性,结合Data Binding中ICommand相关知识,定义ICommand对象,绑定到Cell的Command属性以响应Cell的点击操作。
太困,不详细记录。