TextCell

В прошлой теме для настройки вывода списка в ListView использовался объект ViewCell. Этот объект представляет ячейку, которую мы можем настроить по своему усмотрению, опеределить в ней различные элементы. Однако кроме ViewCell в ListView для отображения данных можно применять еще несколько типов ячеек:

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

• ImageCell: выводит рядом с заголовком и детальным описанием изображение

Для простых случаев, когда для каждого объекта в списке необходимо вывести заголовок и некоторую аннотацию к нему, можно использовать класс TextCell. Его основные свойства, которые могут нам пригодиться:

• Text: основной текст, выводится большим шрифтом

• Detail: детальное описание, выводится меньшим шрифтом

• TextColor: цвет текста

• DetailColor: цвет детального описания

Пусть у нас определен в проекте класс User

public class User
{
    public string Name { get; set; } = "";
    public int Age { get; set; }
}

Используем TextCell для отображения одного объекта User:

<?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"
             xmlns:local="clr-namespace:HelloApp">
    <ContentPage.Resources>
        <ResourceDictionary>
            <x:Array x:Key="users" Type="{x:Type local:User}">
                <local:User Name="Tom" Age="38" />
                <local:User Name="Bob" Age="40" />
                <local:User Name="Sam" Age="28" />
                <local:User Name="Alice" Age="35" />
            </x:Array>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout Padding="7">
        <Label Text="Список пользователей" FontSize="18" TextColor="#004D40"/>
        <ListView x:Name="usersListView" ItemsSource="{StaticResource users}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell
                        Text="{Binding Name}"
                        Detail="{Binding Age, StringFormat='{0} лет'}"
                        TextColor="#004D40"
                        DetailColor="#26A69A"
                        />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

В данном случае определяем список объектов User в виде ресурса и передаем в ListView на отображение. В TextCell в качестве основного текста отображается имя пользователя, а в качестве детального описания - возраст с форматированием:

Таким образом, для вывода каких-то простых данных TextCell подходит, но естественно возможностей по кастомизации меньше, чем в случае с ViewCell.

Аналогичный пример в коде C#:

namespace HelloApp;

class StartPage : ContentPage
{
    public StartPage()
    {
        ListView usersListView = new ListView();
        // определяем источник данных
        usersListView.ItemsSource = new List<User>
        {
            new User {Name="Tom", Age=38 },
            new User {Name = "Bob", Age= 40},
            new User {Name="Sam", Age = 28},
            new User {Name = "Alice", Age = 35}
        };
        // определяем шаблон данных
        usersListView.ItemTemplate = new DataTemplate(() =>
        {
            // создаем объект TextCell
            TextCell textCell = new TextCell 
            { 
                TextColor = Color.FromArgb("#01579B"), 
                DetailColor = Color.FromArgb("#0288D1") 
            };
            // привязка к свойству Name
            textCell.SetBinding(TextCell.TextProperty, "Name");
            // привязка к свойству Age
            Binding ageBinding = new Binding { Path = "Age", StringFormat = "{0} лет" };
            textCell.SetBinding(TextCell.DetailProperty, ageBinding);
            return textCell;
        });

        Label header = new Label { FontSize = 18, Text = "Список пользователей" };
        Content = new StackLayout { Children = { header, usersListView }, Padding=7};
    }
}