Изображения

  • Статья

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

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

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

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

Примечание.

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

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

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

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

Важно!

Изображения будут отображаться в полном разрешении, если размер Image объекта не ограничен его макетом или HeightRequestWidthRequest свойством 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 определяет следующие свойства:

  • UriUriТип , представляет URI изображения, который нужно скачать для отображения.
  • CacheValidityTimeSpanТип , указывает, сколько времени образ будет храниться локально. Значение по умолчанию этого свойства составляет 1 день.
  • CachingEnabledboolТип , определяет, включена ли кэширование изображений. Значение по умолчанию этого свойства равно 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

Screenshot of the FontImage markup extension.

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

Сведения о отображении значков шрифта путем указания данных значка шрифта в объекте 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 — центрируется изображение в области отображения при сохранении пропорции.