Поделиться через

Образ

В компоненте Image в многоплатформенном пользовательском интерфейсе приложений .NET (.NET MAUI) отображается изображение, которое можно загрузить из локального файла, URI или потока данных. Поддерживаются стандартные форматы изображений платформы, включая анимированные GIF-файлы, а также локальные масштабируемые векторные графические файлы (SVG). Дополнительные сведения о добавлении изображений в проект приложения .NET MAUI см. в статье Добавление изображений в проект приложения .NET MAUI.

Image определяет следующие свойства:

  • Aspectтипа Aspectопределяет режим масштабирования изображения.
  • IsAnimationPlayingтипа boolопределяет, проигрывается ли анимированный GIF-файл или он остановлен. Значение по умолчанию этого свойства — false.
  • IsLoadingтипа boolуказывает состояние загрузки образа. Значение по умолчанию этого свойства — false.
  • IsOpaqueтипа boolуказывает, может ли движок отрисовки рассматривать изображение как непрозрачное. Значение по умолчанию этого свойства — false.
  • Sourceтипа ImageSourceуказывает источник изображения.

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

Заметка

Значки шрифтов можно отображать с помощью Image, указав данные значка шрифта в виде объекта FontImageSource. Дополнительные сведения см. в разделе Отображение значков шрифтов.

Класс ImageSource определяет следующие методы, которые можно использовать для загрузки изображения из разных источников:

  • FromFile возвращает FileImageSource, который считывает изображение из локального файла.
  • FromUri возвращает UriImageSource, который скачивает и считывает изображение из указанного URI.
  • FromStream возвращает StreamImageSource, который считывает изображение из потока, предоставляющего данные изображения.

В XAML изображения можно загрузить из файлов и URI, указав имя файла или URI в качестве строкового значения для свойства Source. Изображения также можно загружать из потоков в XAML с помощью пользовательских расширений разметки.

Важный

Изображения будут отображаться в полном разрешении, если только размер Image не ограничен его макетом или не задано свойство HeightRequest или WidthRequest для Image.

Сведения о добавлении значков приложения и экрана-заставки в приложение см. в значках приложений и .

Загрузка локального образа

Изображения можно добавить в проект приложения, перетащив их в папку Resources\Images вашего проекта, где действие сборки автоматически будет установлено на MauiImage. Во время сборки векторные изображения изменяются до правильных разрешений для целевой платформы и устройства и добавляются в пакет приложения. Это необходимо, так как разные платформы поддерживают разные разрешения изображений, а операционная система выбирает соответствующее разрешение изображений во время выполнения на основе возможностей устройства.

Чтобы соответствовать правилам именования ресурсов Android, все имена файлов локальных изображений должны быть написаны строчными буквами, начинаться и заканчиваться буквой и содержать только буквенно-цифровые символы или символы подчеркивания. Дополнительную информацию см. в обзоре ресурсов приложений на сайте developer.android.com.

Важный

.NET MAUI преобразует SVG-файлы в PNG-файлы. Поэтому при добавлении SVG-файла в проект приложения .NET MAUI следует ссылаться через XAML или C# с расширением .png.

В соответствии с этими правилами именования и размещения файлов можно загрузить и отобразить изображение в следующем XAML:

<Image Source="dotnet_bot.png" />

Эквивалентный код C#:

Image image = new Image
{
    Source = ImageSource.FromFile("dotnet_bot.png")
};

Метод ImageSource.FromFile требует аргумента string и возвращает новый объект FileImageSource, который считывает изображение из файла. Существует также неявный оператор преобразования, который позволяет указать имя файла в качестве аргумента string свойству Image.Source:

Image image = new Image { Source = "dotnet_bot.png" };

Загрузка удаленного образа

Удалённые изображения можно загрузить и показать, указав унифицированный идентификатор ресурса (URI) в качестве значения свойства Source.

<Image Source="https://aka.ms/campus.jpg" />

Эквивалентный код C#:

Image image = new Image
{
    Source = ImageSource.FromUri(new Uri("https://aka.ms/campus.jpg"))
};

Метод ImageSource.FromUri требует аргумента Uri и возвращает новый объект UriImageSource, который считывает изображение из Uri. Существует также неявное преобразование для строковых URI:

Image image = new Image { Source = "https://aka.ms/campus.jpg" };

Кэширование изображений

Кэширование скачанных изображений по умолчанию включено, при этом кэшированные образы хранятся в течение 1 дня. Это поведение можно изменить, задав свойства класса UriImageSource.

Класс UriImageSource определяет следующие свойства:

  • Uriтипа Uriпредставляет собой URI изображения, которое нужно скачать для отображения.
  • CacheValidityтипа TimeSpanуказывает, сколько времени образ будет храниться локально. Значение по умолчанию этого свойства составляет 1 день.
  • CachingEnabledтипа boolопределяет, включено ли кэширование изображений. Значение по умолчанию этого свойства — true.

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

Чтобы установить определенный период кэширования, задайте свойство Source объектом UriImageSource, который задает свое свойство CacheValidity.

<Image>
    <Image.Source>
        <UriImageSource Uri="https://aka.ms/campus.jpg"
                        CacheValidity="10:00:00:00" />
    </Image.Source>
</Image>

Эквивалентный код C#:

Image image = new Image();
image.Source = new UriImageSource
{
    Uri = new Uri("https://aka.ms/campus.jpg"),
    CacheValidity = new TimeSpan(10,0,0,0)
};

В этом примере период кэширования имеет значение 10 дней.

Загрузка изображения из потока

Изображения можно загрузить из потоков с помощью метода ImageSource.FromStream:

Image image = new Image
{
    Source = ImageSource.FromStream(() => stream)
};

Важный

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

Загрузка значка шрифта

Расширение разметки FontImage позволяет отображать значок шрифта в любом представлении, которое может отображать ImageSource. Он предоставляет те же функции, что и класс FontImageSource, но с более кратким представлением.

Расширение разметки FontImage поддерживается классом FontImageExtension, который определяет следующие свойства:

  • FontFamily типа string, семейство шрифтов, которому принадлежит иконка шрифта.
  • Glyph типа string, значение символа юникода иконки шрифта.
  • Color типа Color, цвет, используемый при отображении иконки шрифта.
  • Размер значка отрисованного шрифта Size типа doubleв единицах, независимых от устройства. Значение по умолчанию — 30. Кроме того, это свойство можно задать для именованного размера шрифта.

Заметка

Средство синтаксического анализа XAML позволяет сократить класс FontImageExtension как FontImage.

Свойство Glyph является свойством содержимого FontImageExtension. Поэтому для выражений разметки XAML, выраженных с фигурными скобками, можно исключить Glyph= часть выражения, если это первый аргумент.

В следующем примере XAML показано, как использовать расширение разметки FontImage:

<Image BackgroundColor="#D1D1D1"
       Source="{FontImage &#xf30c;, FontFamily=Ionicons, Size=44}" />

В этом примере сокращенная версия имени класса FontImageExtension используется для отображения значка XBox из семейства шрифтов Ionicons в Image:

Снимок экрана расширения разметки FontImage.

Хотя символ юникода для значка — \uf30c, он должен быть экранирован в XAML, и потому превращается в &#xf30c;.

Сведения о отображении значков шрифта путем указания данных значка шрифта в объекте FontImageSource см. в разделе Отображение значков шрифта.

Значки шрифта можно отобразить, указав данные значка шрифта в объекте FontImageSource. Дополнительные сведения см. в разделе Отображение значков шрифтов.

Загрузка анимированных GIF-файлов

.NET MAUI включает поддержку отображения небольших анимированных GIF-файлов. Это достигается путем установки свойства Source в анимированный GIF-файл:

<Image Source="demo.gif" />

Важный

Хотя поддержка анимированных GIF-файлов в .NET MAUI включает возможность скачивания файлов, она не поддерживает кэширование или потоковую передачу анимированных GIF-файлов.

По умолчанию при загрузке анимированного GIF-файла он не будет воспроизводиться. Это связано с тем, что свойство IsAnimationPlaying, которое определяет, воспроизводит ли анимированный GIF-файл или останавливается, имеет значение по умолчанию false. Поэтому, когда анимированный GIF-файл загружен, он не будет воспроизводиться, пока свойство IsAnimationPlaying не установлено в true. Воспроизведение можно остановить, сбросив свойство IsAnimationPlaying на false. Обратите внимание, что это свойство не действует при отображении источника изображения, отличного от GIF.

Управление масштабированием изображений

Свойство Aspect определяет, как будет масштабироваться изображение, чтобы соответствовать области отображения, и должно быть задано одно из элементов перечисления Aspect:

  • AspectFit — добавляет черные полосы к изображению (при необходимости), чтобы все изображение помещалось в область отображения, с пустыми полями, добавленными сверху или снизу, или по бокам в зависимости от соотношения сторон изображения.
  • AspectFill — обрезает изображение так, чтобы оно заполняло область отображения с сохранением пропорций.
  • Fill — растягивает изображение полностью и точно заполняет область отображения. Это может привести к искажению изображения.
  • Команда Center центрирует изображение на экране, сохраняя его пропорции.