Изображения
Многоплатформенный пользовательский интерфейс приложения .NET (.NET MAUI) Image отображает изображение, которое можно загрузить из локального файла, 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 , FontFamily=Ionicons, Size=44}" />
В этом примере сокращенная версия имени класса используется для отображения значка FontImageExtension XBox из семейства шрифтов Ionicons в :Image
Хотя символ юникода для значка имеет значение \uf30c
, он должен быть экранирован в XAML и поэтому становится 
.
Сведения о отображении значков шрифта путем указания данных значка шрифта в объекте 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
— центрируется изображение в области отображения при сохранении пропорции.