Xamarin.Forms Views介绍(七)——TableView

与ListView不同,ListView提供ItemTemplate显示同类型数据集合,TableView通过不同Cell显示不同数据类型集合,TableView没有ItemSource的概念需要手动设置Child。如借助TableView实现Setting界面:

Xamarin.Forms Views介绍(七)——TableView_第1张图片

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继承 TableSectionBase,都继承自TableSectionBase,TableSectionBase又实现了INotifyCollectionChanged接口,况且使用ObservableCollection管理内部集合元素,所以我们可以通过代码动态增加和删除TableView中的字元素。


Xamarin.Forms Views介绍(七)——TableView_第2张图片

TableView 定义


    
        
             
             
             
        
    

TableView默认填充整个屏幕,效果图:

Xamarin.Forms Views介绍(七)——TableView_第3张图片

TableView提供TableIntent类型属性Intent可以定义TableView的外观。

Xamarin.Forms Views介绍(七)——TableView_第4张图片
  • Data – TableView显示数据列表时使用。
  • Form – TableView每行提供对应动作时使用。
  • Menu – TableView显示成菜单样式.
  • Settings – TableView显示设置列表样式。

除了Data对应样式的Title显示外没发现有什么不同,,,


Xamarin.Forms Views介绍(七)——TableView_第5张图片
Intent对应的样式

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 ContentViewForms ContentView Xaml

Forms ContentView用来通过代码定义Cell,Forms ContentView Xaml用XAML定义Cell。
本示例新建一个Forms ContentView Xaml文件,命名PickerCell。
修改XAML文件的根节点为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 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:

Xamarin.Forms Views介绍(七)——TableView_第6张图片

运行效果:

Xamarin.Forms Views介绍(七)——TableView_第7张图片

为了方便,可以直接在XAML中定义TableView时自定义Cell:

Xamarin.Forms Views介绍(七)——TableView_第8张图片

响应TableView的点击事件

TextCell and ImageCell提供了Command和CommandParameter属性,结合Data Binding中ICommand相关知识,定义ICommand对象,绑定到Cell的Command属性以响应Cell的点击操作。
太困,不详细记录。

你可能感兴趣的:(Xamarin.Forms Views介绍(七)——TableView)