TableView

TableView позволяет создавать таблицы с различным содержимым, при этом в таблицах могут размещаться и другие элементы управления. TableView может быть полезен для отображения списка различных настроек, вывод данных в виде формы, либо для построчного отображения данных.

Элементы в TableView организованы в секции (элементы TableSection). Корневым элементов в TableView является элемент TableRoot, который инкапсулирует в себе все секции:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        this.Content = new TableView
        {
            Intent = TableIntent.Form,
            Root = new TableRoot("Ввод данных") 
            {
			    new TableSection ("Персональные данные") 
                {
				    new EntryCell 
                    {
					    Label = "Логин:",
					    Placeholder = "введите логин",
					    Keyboard = Keyboard.Default
				    },
				    new SwitchCell { Text = "Сохранить"}
			    },
			    new TableSection ("Контакты") 
                {
				    new EntryCell 
                    {
					    Label = "Телефон:",
					    Placeholder = "введите телефон",
					    Keyboard = Keyboard.Telephone
				    },
				    new EntryCell 
                    {
					    Label = "Email:",
					    Placeholder = "введите email",
					    Keyboard = Keyboard.Email
				    }
			    }
		    }
        };   
    }
}

Чтобы определить содержимое TableView, надо его свойству Root присвоить некоторый объект TableRoot. TableRoot хранит секции таблицы в виде объектов TableSection. Каждая же секция в свою очередь содержит набор отдельных ячеек или элементов Cell

Аналог в 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="HelloApp.MainPage">
  <TableView>
    <TableView.Root>
      <TableRoot>
        <TableSection Title="Персональные данные">
          <EntryCell Label="Логин" Keyboard="Default" Placeholder="Введите логин" />
          <SwitchCell Text="Сохранить" />
        </TableSection>
        <TableSection Title="Контакты">
          <EntryCell Label="Телефон" Keyboard="Telephone" Placeholder="введите телефон" />
          <EntryCell Label="Email" Keyboard="Email" Placeholder="введите email" />
        </TableSection>
      </TableRoot>
    </TableView.Root>
  </TableView>
</ContentPage>

Типы ячеек

При создании таблицы мы можем использовать разные виды ячеек:

• EntryCell: представляет метку с текстовым полем для ввода данных

• SwitchCell: представляет метку с переключателем

• TextCell: две метки для вывода текста

• ImageCell: аналогична TextCell со включением изображения

• ViewCell: содержимое и формат отображения данных ячейки определяется разработчиком

Наиболее часто используемыми из них являются SwitchCell и EntryCell.

Каждый тип ячеек имеет свой набор свойств. Например, для ячейки типа SwitchCell можно выделить два следующих свойства:

• Text: представляет текст ячейки

• On: указывает, находится в отмеченном или нет состоянии

А у EntryCell можно выделить следующие свойства:

• Keyboard: тип клавиатуры, которая отображается для ввода текста

• Label: текстовая метка, которая отображается слева от поля ввода

• LabelColor: цвет текста метки

• Placeholder: текст, отображаемый до ввода текста

• Text: сам введенный текст

• HorizontalTextAlignment: горизонтальное выравнивание текста

Виды таблиц

Свойство Intent определяет виды таблицчных представлений и может принимать следующие значения:

• Data: предназначен для простого отображения данных

• Form: представляет форму ввода данных, как в примере выше

• Menu: используется для вывода меню

• Settings: используется для отображения набора настроек

Хотя на первый взгляд разница между этими пунктами не столь очевидна, однако же свойство Intent влияет на то, как TableView будет отображаться на каждой платформе. И хорошей практикой является все же определение свойства Intent и придание ему того значения, которое наиболее оптимально подходит таблицы по ее назначению.

Обработка событий

Элементы TableView поддерживают обработку событий.

EntryCell при завершении ввода (когда пользователь нажимает на кнопку "Готово" на клавиатуре) генерирует событие Completed.

Объект SwitchCell при переключении состояния генерирует событие

А ViewCell при касании/нажатии генерирует событие OnViewCellTapped

Например обработаем события EntryCell и SwitchCell. Определим в 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="HelloApp.MainPage">
    <StackLayout>
        <Label x:Name="loginLbl" FontSize="Large" />
        <Label x:Name="saveLbl" FontSize="Large" />
        <TableView>
            <TableView.Root>
                <TableRoot>
                    <TableSection Title="Персональные данные">
                        <EntryCell x:Name="loginEntry" Label="Логин" Keyboard="Default" Placeholder="Введите логин" Completed="EntryCell_Completed" />
                        <SwitchCell x:Name="saveSwitch" Text="Сохранить" OnChanged="SwitchCell_OnChanged" />
                    </TableSection>
                </TableRoot>
            </TableView.Root>
        </TableView>
    </StackLayout>
</ContentPage>

В файле кода C# пропишем обработку событий:

using Xamarin.Forms;
using System;

namespace HelloApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void EntryCell_Completed(object sender, EventArgs e)
        {
            loginLbl.Text = loginEntry.Text;
        }

        private void SwitchCell_OnChanged(object sender, ToggledEventArgs e)
        {
            saveLbl.Text = saveSwitch.On.ToString();
        }
    }
}

При запуске на Windows10 событие Completed у EntryCell срабатывает при нажатии клавиши Enter при вводе в текстовое поле.