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

与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显示外没发现有什么不同,,,


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,并做如下修改:

<?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的点击操作。
太困,不详细记录。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容

  • ListView用来显示列表数据,适合单一类型数据集合。 ListView属性 Footer :object类型,...
    MayueCif阅读 12,561评论 4 10
  • 概述在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似...
    liudhkk阅读 8,985评论 3 38
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,594评论 18 139
  • 代码创建UIWindow对象 Xcode7之后使用代码创建UIWindow对象: //创建UIWindow对象 s...
    云之君兮鹏阅读 1,306评论 0 2
  • 小倩在家最小,是爸妈最疼爱的孩子。从小她身材瘦,皮肤白,眼晴大,很招人喜欢。二十岁时,她已出落成亭亭王立的大姑娘了...
    雨晴天空阅读 992评论 5 19