Табличное представление элементов в .NET MAUI: элемент TableView

Элемент TableView в .NET MAUI, обычно используется для того, чтобы показать набор элементов, сгруппированных в разделы. Например, TableView может использоваться для страницы с настройками вашего приложения.

Свойства TableView

Элемент TableView предоставляет нам следующие свойства:

Чтобы создать экземпляр TableView в .NET MAUI мы должны:

1. Разместить TableView на странице приложения
2. Определить внутри TableView один или несколько элементов TableRoot
3. Внутри TableRoot определить один или несколько элементов TableSection
4. Внутри TableSection определить один или несколько элементов типаCell
5. Внутри Cell определить необходимые элементы управления

Рассмотрим весь этот процесс работы с TableView в .NET MAUI подробнее.

Создание таблицы TableView

Создадим новое приложение .NET MAUI и разместим на странице MainPage.xaml следующий код:

    <TableView>
        <TableRoot>
            <TableSection Title="Секция №1" TextColor="Blue">
                <TextCell Text="Это обычный текст в ячейке таблицы" Detail="Пояснения к тексту" />
                <TextCell Text="Это обычный текст в ячейке таблицы" Detail="Пояснения к тексту" />
                <TextCell Text="Это обычный текст в ячейке таблицы" Detail="Пояснения к тексту" />
            </TableSection>
            <TableSection Title="Секция №2" TextColor="Blue">
                <TextCell Text="Это обычный текст в ячейке таблицы" Detail="Пояснения к тексту" />
                <TextCell Text="Это обычный текст в ячейке таблицы" Detail="Пояснения к тексту" />
                <TextCell Text="Это обычный текст в ячейке таблицы" Detail="Пояснения к тексту" />
            </TableSection>
        </TableRoot>
    </TableView>
</ContentPage>

Здесь мы воспроизвели все пункты списка по созданию TableView, который представлен выше. Запустим приложение и посмотрим на результат:

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

<TextCell Text="Это обычный текст в ячейке таблицы" Detail="Пояснения к тексту" />

TextCell — это класс-наследник Cell. Всего, на данный момент, TableView поддерживает пять типов ячеек:

В качестве примера, используем некоторые типы этих ячеек в нашем приложении. Перепишем код XAML страницы MainPage следующим образом:

<?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="MauiApp7.MainPage">

    <TableView>
        <TableRoot>
            <TableSection Title="Секция с переключателем" TextColor="Blue">
                <SwitchCell Text="Включено" On="True" OnColor="Red" OnChanged="SwitchCell_OnChanged"/>
                <TextCell Text="Результат" x:Name="SwitchResult"/>
            </TableSection>
            <TableSection Title="Секция c текстовым полем" TextColor="Green">
                <EntryCell Label="Введите текст" Placeholder="Введите что-нибудь" Completed="EntryCell_Completed" x:Name="EntryData"/>
                <TextCell Text="Результат" DetailColor="Gray" x:Name="EntryResult"/>
            </TableSection>
        </TableRoot>
    </TableView>
        
</ContentPage>

Также добавим в файл отдельного кода MainPage.xaml.cs два обработчика событий:

private void SwitchCell_OnChanged(object sender, ToggledEventArgs e)
{
    SwitchResult.Detail = $"{e.Value}";
}

private void EntryCell_Completed(object sender, EventArgs e)
{
    EntryResult.Detail = EntryData.Text ;
}

Рассмотрим этот пример подробнее. В первой секции мы разместили ячейку с переключателем:

<SwitchCell Text="Включено" 
            On="True" 
            OnColor="Red" 
            OnChanged="SwitchCell_OnChanged"/>

У этой ячейки мы определили следующие свойства:

• Text — поясняющий текст, который будет размещен слева от переключателя
• On — свойство, определяющее значение переключателя по умолчанию (true — переключатель включен, false — выключен)
• OnColor — цвет переключателя, при наведении на него курсора
• OnChanged — событие, которое генерируется каждый раз при изменении состояния переключателя. В нашем случае, обработчик этого события изменяет свойство Detail во второй — текстовой ячейке секции:

<TextCell Text="Результат" x:Name="SwitchResult"/>

Сам обработчик события SwitchCell_OnChanged представлен выше.

Вторая секция содержит ячейку с текстовым полем:

<EntryCell Label="Введите текст" 
           Placeholder="Введите что-нибудь" 
           Completed="EntryCell_Completed" 
           x:Name="EntryData"/>

У этой ячейки определены следующие свойства:

• Label — метка слева от текстового поля, содержащая пояснения
• Placeholder — текст, отображаемый в текстовом поле, пока оно не содержит никакого значения (см. свойства Entry)
• Completed — событие, которое генерируется, когда пользователь завершает ввод текста (генерируется, когда пользователь нажимает кнопку Enter на клавиатуре). Обработчик этого события также выводит результат во вторую ячейку секции:

<TextCell Text="Результат" DetailColor="Gray" x:Name="EntryResult"/>

Также, у ячейки с результатом мы установили значение свойства DetailColor (цвет поясняющего текста) Теперь запустим приложение и посмотрим на результат

Итого

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