TableView

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

Среди свойств TableView следует выделить следующие:

• Intent: определяет назначение таблицы на iOS (применяется только к iOS). Представляет одну из констант перечисления TableIntent:

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

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

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

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

• HasUnevenRows: представляет тип bool и указывает, будут ли строки в таблицы иметь различную высоту. Значение по умолчаниюfalse.

• Root: определяет содерижимое таблицы в виде объекта TableRoot.

• RowHeight: определяет высоту строк в виде значения int, если свойство HasUnevenRows равно false.

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

namespace HelloApp;

class StartPage : ContentPage
{
    public StartPage()
    {
        TableView tableView = new TableView
        {
            Intent = TableIntent.Data,
            Root = new TableRoot("Разработка ПО")
            {
                new TableSection ("Языки программирования")
                {
                    new TextCell{ Text = "Java", Detail = "Был создан в 1995 году в компании Sun Microsystems"},
                    new TextCell{ Text = "C#", Detail = "Был создан в 2000 году в компании Microsoft"}
                },
                new TableSection ("Базы данных")
                {
                    new TextCell{ Text = "MySQL", Detail = "Была создана в 1995 году в компании MySQL AB"},
                    new TextCell{ Text = "MS SQL Server", Detail = "Была создана в 1989 году в компании Microsoft"},
                }
            }
        };
        Content = new StackLayout { Children = { tableView }, Padding = 10 };
    }
}

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

Аналог в xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <StackLayout Padding="8">
        <TableView>
            <TableView.Root>
                <TableRoot Title="Разработка ПО">
                    <TableSection Title="Языки программирования">
                        <TextCell Text="Java" Detail="Был создан в 1995 году в компании Sun Microsystems" />
                        <TextCell Text="C#" Detail="Был создан в 2000 году в компании Microsoft" />
                    </TableSection>
                    <TableSection Title="Базы данных">
                        <TextCell Text="MySQL" Detail="Была создана в 1995 году в компании MySQL AB" />
                        <TextCell Text="MS SQL Server" Detail="Была создана в 1989 году в компании Microsoft" />
                    </TableSection>
                </TableRoot>
            </TableView.Root>
        </TableView>
    </StackLayout>
</ContentPage>

Типы ячеек

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Элементы TableView поддерживают обработку событий. Для каждого типа ячеек тип поддерживаемых событий различается.

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

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

Например обработаем события EntryCell и SwitchCell. Определим в XAML следующий код:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <StackLayout Padding="8">
        <Label x:Name="loginLbl" FontSize="18" />
        <Label x:Name="saveLbl" FontSize="18" />
        <TableView>
            <TableView.Root>
                <TableRoot>
                    <TableSection Title="Персональные данные">
                        <EntryCell x:Name="loginEntry" Label="Логин" Keyboard="Default" Placeholder="Введите логин" Completed="OnTextCompleted" />
                        <SwitchCell x:Name="saveSwitch" Text="Сохранить" OnChanged="OnStatusChanged" />
                    </TableSection>
                </TableRoot>
            </TableView.Root>
        </TableView>
    </StackLayout>
</ContentPage>

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

namespace HelloApp;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
        InitializeComponent();
    }
    void OnTextCompleted(object sender, EventArgs e)
    {
        loginLbl.Text = loginEntry.Text;
    }

    void OnStatusChanged(object sender, ToggledEventArgs e)
    {
        saveLbl.Text = saveSwitch.On ? "сохранено" : "не сохранено";
    }
}

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

Использование изображений

Для вывода изображений применяется тип ImageCell. По сути это тот же TextCell, только с возможностью отображения картинки. Путь к изобрадению хранится в свойстве ImageSource. Простейший пример в XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.MainPage">
    <StackLayout Padding="8">
        <TableView>
            <TableView.Root>
                <TableRoot>
                    <TableSection Title="Языки программирования">
                        <ImageCell Text="C#" Detail="Создатель: Андерс Хейлсберг" ImageSource="csharp.jpg"  />
                        <ImageCell Text="C++" Detail="Создатель: Бьорн Страуструп" ImageSource="cpp.jpg" />
                        <ImageCell Text="Java" Detail="Создатель: Джеймс Гослинг" ImageSource="java.jpg" />
                    </TableSection>
                </TableRoot>
            </TableView.Root>
        </TableView>
    </StackLayout>
</ContentPage>

В данном случае предполагается, что в проекте в папке Resources/Images расположены файлы csharp.jpg, cpp.jpg и java.jpg.