Xamarin.Forms 用户界面——控件——TableView

TableView

当前滚动菜单，设置和输入表单。

PDF用于离线使用

• 下载PDF

相关样品：

• 的TableView

让我们知道你对此的感受

TableView是一个用于显示不共享相同模板的行的可滚动列表数据或选项的视图。与ListView不同，TableView没有一个概念ItemsSource，所以项目必须手动添加为子项。

本指南由以下部分组成：

• 使用案例 - 何时使用TableView而不是ListView或自定义视图。
• TableView Structure - TableView中需要的视图层次结构。
• TableView Appearance - TableView的自定义选项。
• 内置单元格 - 内置单元格选项，包括 EntryCell和 SwitchCell。
• 自定义单元格 - 如何制作自己的自定义单元格。

用例

TableView在以下情况下很有用：

• 提供设置列表，
• 以表单收集数据，或
• 显示不同行（例如数字，百分比和图像）呈现的数据。

TableView处理滚动并在有吸引力的部分布置行，这是上述情况的常见需求。该TableView控件在可用时使用每个平台的基础等效视图，为每个平台创建本机外观。

TableView结构

元素TableView分为几个部分。在根的根本TableView是TableRoot，哪一个是一个或多个的父母TableSections：

Content = new TableView {
    Root = new TableRoot {
        new TableSection...
    },
    Intent = TableIntent.Settings
};

每个都TableSection包含一个标题和一个或多个ViewCells。在这里，我们看到TableSection的Title属性设置为‘环’在构造函数：

var section = new TableSection ("Ring") { //TableSection constructor takes title as an optional parameter
    new SwitchCell {Text = "New Voice Mail"},
    new SwitchCell {Text = "New Mail", On = true}
};

在XAML中完成与上述相同的布局：

<TableView Intent="Settings">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="New Voice Mail" />
      <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>

TableView外观

TableView公开了Intent属性，它是以下选项的枚举：

• 数据 - 用于显示数据条目时使用。请注意，ListView可能是滚动数据列表的更好选择。
• 表格 - 用于TableView作为表单时使用。
• 菜单 - 用于显示选择菜单时使用。
• 设置 - 用于显示配置设置列表时使用。

在TableIntent您选择可能会影响如何TableView在每个平台上出现。即使没有明确的差异，最好选择TableIntent最符合您打算使用表格的方式。

内置单元格

Xamarin.Forms附带内置单元格，用于收集和显示信息。尽管ListView和TableView可以使用所有相同的单元格，但以下与TableView方案最相关：

• SwitchCell - 用于呈现和捕获真/假状态以及文本标签。
• EntryCell - 用于呈现和捕获文本。

有关TextCell和ImageCell的详细说明，请参阅ListView Cell Appearance。

SwitchCell

SwitchCell是用于呈现和捕获开/关或true/ false状态的控制。

SwitchCells有一行要编辑的文本和一个开/关属性。这两个属性都是可绑定的。

• Text - 显示在交换机旁边的文本。
• On - 开关是否显示为开或关。

请注意，SwitchCell暴露OnChanged事件，允许您响应单元格状态的更改。

EntryCell

EntryCell当您需要显示用户可以编辑的文本数据时很有用。EntryCells提供以下可定制的属性：

• Keyboard - 编辑时要显示的键盘。有数字值，电子邮件，电话号码等的选项。请参阅API文档。
• Label - 要显示在文本输入字段右侧的标签文本。
• LabelColor - 标签文字的颜色。
• Placeholder - 当文本为空或为空时，在输入字段中显示的文本。文本输入开始时，此文本消失。
• Text - 输入字段中的文本。
• HorizontalTextAlignment - 文本的水平对齐。可以是中心，左对齐或右对齐。请参阅API文档。

请注意，EntryCell显示Completed事件，当用户在编辑文本时在键盘上点击“完成”时触发。

自定义单元格

当内置单元格不够时，可以使用自定义单元格以适用于您的应用程序的方式呈现和捕获数据。例如，您可能需要提供滑块以允许用户选择图像的不透明度。

所有自定义单元格必须从ViewCell所有内置单元格类型使用的相同基类派生。

这是一个自定义单元格的示例：

XAML

XAML创建上述布局如下：

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DemoTableView.TablePage" Title="TableView">
    <ContentPage.Content>
        <TableView Intent="Settings">
            <TableRoot>
                <TableSection Title="Getting Started">
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Image Source="bulb.png" />
                            <Label Text="left"
                              TextColor="#f35e20" />
                            <Label Text="right"
                              HorizontalOptions="EndAndExpand"
                              TextColor="#503026" />
                        </StackLayout>
                    </ViewCell>
                </TableSection>
            </TableRoot>
        </TableView>
    </ContentPage.Content>
</ContentPage>

上面的XAML正在做很多。我们来吧吧

• 下面的根元素TableView是TableRoot。
• 有一个TableSection立即在下面TableRoot。
• 的ViewCell直接的TableSection下定义。不同于ListView，TableView不需要定义（或任何）单元格ItemTemplate。
• StackLayout用于管理自定义单元格的布局。任何布局都可以在这里使用。

C＃

因为TableView使用静态数据或手动更改的数据，它不具有项目模板的概念。相反，可以手动创建自定义单元格并将其放入表中。请注意，创建一个继承自定义单元格ViewCell，然后将其添加到TableView内置单元格的单元格的技术也受支持。以下是完成上述布局的c＃代码：

var table = new TableView();
table.Intent = TableIntent.Settings;
var layout = new StackLayout() { Orientation = StackOrientation.Horizontal };
layout.Children.Add (new Image() {Source = "bulb.png"});
layout.Children.Add (new Label() {
    Text = "left",
    TextColor = Color.FromHex("#f35e20"),
    VerticalOptions = LayoutOptions.Center
});
layout.Children.Add (new Label () {
    Text = "right",
    TextColor = Color.FromHex ("#503026"),
    VerticalOptions = LayoutOptions.Center,
    HorizontalOptions = LayoutOptions.EndAndExpand
});
table.Root = new TableRoot () {
    new TableSection("Getting Started") {
        new ViewCell() {View = layout}
    }
};

Content = table;

上面的C＃做了很多。我们来吧吧

• 下面的根元素TableView是TableRoot。
• 有一个TableSection立即在下面TableRoot。
• 的ViewCell直接的TableSection下定义。不同于ListView，TableView不需要定义（或任何）单元格ItemTemplate。
• StackLayout用于管理自定义单元格的布局。任何布局都可以在这里使用。

请注意，自定义单元格的类从不定义。而是将ViewCell视图属性设置为特定实例ViewCell。