Изображения в ListView. ImageCell и ViewCell

Для отображения изображений в ListView в простых случаях мы можем использовать класс ImageCell, а в более сложных можно воспользоваться ViewCell.

Класс ImageView расширяет класс TextCell, добавляя свойство ImageSource, которое указывает на источник изображения.

Например, пусть у нас есть класс Language, который представляет язык программирования:

class Language
{
    public string Name { get; set; } = "";
    public string Description { get; set; } = "";
    public string ImagePath { get; set; } = "";
}

Свойство Name представляет название языка программирования, Description - некоторое краткое описание, а ImagePath - путь к изображению.

Ранее в теме Работа с изображениями. Элемент Image уже рассматривалось, как добавлять изображения проект и выводить их на страницу. И аналогичным образом добавим в проект в папку Resources/Images несколько изображений, которые представляют логотипы языков программирования:

Теперь определим класс страницы, которая будет выводить эти изображения через ImageCell:

namespace HelloApp;

class StartPage : ContentPage
{
    public StartPage()
    {
        ListView listView = new ListView();
        // определяем источник данных
        listView.ItemsSource = new List<Language>
        {
            new Language {Name="C#", ImagePath="csharp_sm.jpg", Description = "Последняя версия C# 11" },
            new Language {Name="C++", ImagePath="cpp_sm.jpg", Description = "Последняя версия C++23" },
            new Language {Name="Java", ImagePath="java_sm.jpg", Description = "Последняя версия Java 19" },
            new Language {Name="Python", ImagePath="python_sm.png", Description = "Последняя версия Python 3.11" },
        };
        // определяем шаблон данных
        listView.ItemTemplate = new DataTemplate(() =>
        {
            ImageCell imageCell = new ImageCell 
            { 
                TextColor = Color.FromArgb("#455A64"), 
                DetailColor = Color.FromArgb("#90A4AE"),
            };
            imageCell.SetBinding(ImageCell.TextProperty, "Name");
            imageCell.SetBinding(ImageCell.DetailProperty, "Description");
            imageCell.SetBinding(ImageCell.ImageSourceProperty, "ImagePath");
            return imageCell;
        });

        Label header = new Label { FontSize = 18, Text = "Языки программирования" };
        Content = new StackLayout { Children = { header, listView }, Padding=7};
    }
}

По сравнению с прошлой темой в класс Phone было добавлено свойство ImagePath, которое хранит путь к изображению в проекте. К этому свойству осуществляется привязка свойства ImageSource объекта ImageCell.

Аналогичный пример в 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"
             xmlns:local="clr-namespace:HelloApp">
    <ContentPage.Resources>
        <ResourceDictionary>
            <x:Array x:Key="langs" Type="{x:Type local:Language}">
                <local:Language Name="C#" ImagePath="csharp_sm.jpg" Description="Последняя версия C# 11" />
                <local:Language Name="C++" ImagePath="cpp_sm.jpg" Description="Последняя версия C++23" />
                <local:Language Name="Java" ImagePath="java_sm.jpg" Description="Последняя версия Java 19" />
                <local:Language Name="Python" ImagePath="python_sm.png" Description="Последняя версия Python 3.11" />
            </x:Array>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout Padding="7">
        <Label Text="Языки программирования" FontSize="18" TextColor="#004D40"/>
        <ListView ItemsSource="{StaticResource langs}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ImageCell
                        ImageSource="{Binding ImagePath}"
                        Text="{Binding Name}"
                        Detail="{Binding Description}"
                        TextColor="#004D40"
                        DetailColor="#26A69A"
                    />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Вывод изображения в ViewCell

Хотя ImageCell и позволяет вывести изображения, ViewCell в данном случае имеет преимущество - при выводе элементов списка через ViewCell можно задать у элемента Image явным образом высоту и ширину:

<?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="langs" Type="{x:Type local:Language}">
                <local:Language Name="C#" ImagePath="csharp_sm.jpg" Description="Последняя версия C# 11" />
                <local:Language Name="C++" ImagePath="cpp_sm.jpg" Description="Последняя версия C++23" />
                <local:Language Name="Java" ImagePath="java_sm.jpg" Description="Последняя версия Java 19" />
                <local:Language Name="Python" ImagePath="python_sm.png" Description="Последняя версия Python 3.11" />
            </x:Array>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout Padding="7">
        <Label Text="Языки программирования" FontSize="18" TextColor="#004D40"/>
        <ListView ItemsSource="{StaticResource langs}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal" Margin="5">
                            <Image Source="{Binding ImagePath}" WidthRequest="30" HeightRequest="30" />
                            <StackLayout>
                                <Label Text="{Binding Name}" FontSize="16" TextColor="#004D40" />
                                <Label Text="{Binding Description}" TextColor="#26A69A" FontSize="13" />
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>