C#

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

2016-10-22  本文已影响1291人  MayueCif

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

TableView属性

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对应样式的Title显示外没发现有什么不同,,,


Intent对应的样式

Cell介绍

Forms提供了四个Cell方便我们的开发,这四个Cell分别是TextCell、ImageCell、SwitchCell、EntryCell,前两个通常用于ListView,介绍ListView时有Cell的相关介绍。SwitchCell和EntryCell多用于TableView的定义。

SwitchCell

SwitchCell用来设置和显示一个bool值。

EntryCell

EntryCell提供了一个Entry让用户进行输入。

自定Cell

当Forms提供的Cell不能满足需求时可以通过继承ViewCell自定义Cell实现。

自定义PickerCell示例:
新建文件可以选择Forms ContentViewForms 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的点击操作。
太困,不详细记录。

上一篇 下一篇

猜你喜欢

热点阅读