Изображения и кисти изображений

  • Статья

Чтобы отобразить изображение, вы можете использовать объект Image или ImageBrush. Объект Image отрисовывает изображение, а объект ImageBrush закрашивает изображением другой объект.

Эти элементы правильные?

Используйте элемент Image для отображения отдельного изображения в приложении.

Используйте ImageBrush для применения изображения к другому объекту. К способам использования ImageBrush относятся декоративные эффекты для текста или фоны для элементов управления или контейнеров макета.

UWP и WinUI 2

Важно!

Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.

Этот раздел содержит сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

API для этого элемента управления существуют в пространствах имен Windows.UI.Xaml.Controls и Windows.UI.Xaml.Media .

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые последние стили и шаблоны для всех элементов управления.

Начиная с Windows 10 версии 1607, элемент Image поддерживает анимационные GIF-изображения. При использовании объекта BitmapImage в качестве изображения Source можно обращаться к API-интерфейсам BitmapImage для управления воспроизведением анимационных GIF-изображений. Дополнительные сведения см. в разделе "Примечания" на странице класса BitmapImage.

Примечание

Поддержка анимированных GIF доступна, когда приложение компилируется для Windows 10 версии 1607 и работает в версии 1607 (или более поздней). Если приложение скомпилировано для предыдущих версий или выполняется в предыдущих версиях, отображается только первый кадр GIF-изображения, без анимации.

Создание образа

Откройте приложение коллекции WinUI 3 и ознакомьтесь с разделом ImageBrushes в действии.

Приложение "Коллекция WinUI 3" содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или исходный код на сайте GitHub

ОС контейнера

В этом примере показано, как создать изображение с помощью объекта Image.

<Image Width="200" Source="sunset.jpg" />

Ниже показан отрисованный объект Image.

Пример элемента Image

В этом примере свойство Source определяет расположение изображения, которое следует отобразить. Вы можете задать источник, указав абсолютный URL-адрес (например, http://contoso.com/myPicture.jpg) или URL-адрес относительно структуры упаковки приложения. В нашем примере мы помещаем файл образа sunset.jpg в корневую папку проекта и объявляем параметры проекта, включающие файл изображения в качестве содержимого.

ImageBrush

Объект ImageBrush позволяет использовать изображение для рисования области, где применяется объект Brush. Например, вы можете использовать ImageBrush в качестве значения свойства Fill класса Ellipse или свойства Background класса Canvas.

В следующем примере показано, как можно использовать объект ImageBrush для закрашивания фигуры Ellipse.

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="sunset.jpg" />
   </Ellipse.Fill>
</Ellipse>

Ниже показана фигура Ellipse, закрашенная с помощью объекта ImageBrush.

Фигура Ellipse, закрашенная с помощью ImageBrush.

Растяжение изображения

Если не указать значение Width или Height для Image, то изображение отображается с размерами, задаваемыми Source. Определяя значения Width и Height, вы создаете удерживающую прямоугольную область, в пределах которой отображается изображение. Вы можете выбрать, каким образом изображение будет заполнять удерживающую область, с помощью свойства Stretch. Свойство Stretch может принимать следующие значения, определенные в перечислении Stretch.

  • Нет. изображение не растягивается для заполнения отображаемой области. Будьте осторожны при настройке значения Stretch. Если исходное изображение больше заполняемой области, то изображение будет обрезано, а это обычно нежелательно, так как, в отличие от намеренного вырезания Clip, окном просмотра управлять вы не можете.
  • Uniform: масштаб изображения изменяется так, чтобы оно соответствовало размеру отображаемой области. но пропорции изображения сохраняются. Это значение по умолчанию.
  • UniformToFill: масштаб изображения изменяется так, чтобы оно полностью заполняло отображаемую область, но исходные пропорции изображения сохраняются.
  • Fill: масштаб изображения изменяется так, чтобы оно соответствовало размеру отображаемой области. Поскольку высота и ширина изображения изменяются независимо друг от друга, его исходные пропорции могут быть нарушены. То есть изображение может быть искажено так, что не сможет полностью заполнить отображаемую область.

Пример параметров растяжения.

Обрезка изображения

С помощью свойства Clip можно вырезать область отображаемого изображения. Свойство Clip задается в Geometry. Вырезание областей непрямоугольной формы в настоящее время не поддерживается.

В следующем примере показано, как можно использовать класс RectangleGeometry для вырезания области изображения. В этом примере мы определяем объект Image со значением высоты 200. Объект RectangleGeometry определяет прямоугольную область для отображаемого изображения. Для свойства Rect задано значение "25,25,100,150", которое определяет начало прямоугольника в точке "25,25" с шириной 100 и высотой 150. Отображается только та часть изображения, которая попадает в область прямоугольника.

<Image Source="sunset.jpg" Height="200">
    <Image.Clip>
        <RectangleGeometry Rect="25,25,100,150" />
    </Image.Clip>
</Image>

Обрезанное изображение на черном фоне.

Объект Image, обрезанный с помощью RectangleGeometry.

Применение непрозрачности

Вы можете применить к изображению свойство Opacity, что позволяет отрисовать его полупрозрачным. Значения непрозрачности варьируют от 0,0 до 1,0, где 1,0 — полная непрозрачность, а 0,0 — полная прозрачность. В этом примере показано, как можно применить непрозрачность 0,5 к объекту Image.

<Image Height="200" Source="sunset.jpg" Opacity="0.5" />

Ниже показано отрисованное изображение с непрозрачностью 0,5 и черным фоном, видимым сквозь частичную прозрачность.

Объект Image с непрозрачностью 0,5.

Форматы файлов изображений

Image и ImageBrush могут отображать следующие форматы файлов изображений:

  • JPEG
  • PNG
  • BMP
  • GIF
  • TIFF
  • JPEG XR
  • значки (ICO)

Интерфейсы API для Image, BitmapImage и BitmapSource не включают в себя специальные методы для кодирования и декодирования форматов мультимедиа. Все операции кодирования и декодирования — встроенные, и только некоторые аспекты кодирования и декодирования могут быть включены в данные для событий загрузки. Если приложение выполняет преобразования изображений или манипуляции с ними, вам следует использовать API, доступные в пространстве имен Windows.Graphics.Imaging, при выполнении каких-либо действий по кодированию или декодированию изображений. Кроме того, эти API поддерживаются компонентом обработки изображений Windows (WIC) в Windows.

Дополнительные сведения о ресурсах приложения и о том, как упаковать источники изображений в приложение, см. в статье Загрузка изображений и ресурсов, предназначенных для масштабирования, темы, высокой контрастности и т. д.

WriteableBitmap

WriteableBitmap предоставляет BitmapSource, который может быть изменен и который не использует основное декодирование файлов компонента WIC. Можно динамически изменять изображения и заново обрабатывать обновленные изображения. Для определения содержимого буфера WriteableBitmap используйте свойство PixelBuffer, чтобы получить доступ к буферу, и потоковый буфер или буфер для используемого языка, чтоб его наполнить. Пример кода приведен в разделе WriteableBitmap.

RenderTargetBitmap

Класс RenderTargetBitmap позволяет записать дерево пользовательского интерфейса XAML в работающем приложении, а затем представляет источник точечного рисунка. После захвата источник изображения можно применить к другим частям приложения, сохранить в качестве ресурса или данных приложения или использовать для других сценариев. Один из особенно полезных сценариев — создание эскиза страницы XAML во время выполнения для схемы навигации. В RenderTargetBitmap существуют некоторые ограничения в отношении содержимого, которое появляется в захваченном изображении. Дополнительные сведения см. в справочнике по API для RenderTargetBitmap.

Исходные изображения и масштабирование

Создайте исходные изображения в нескольких рекомендуемых размерах, чтобы ваше приложение хорошо выглядело при масштабировании операционной системой Windows. Указывая Source для Image, вы можете использовать соглашение об именовании, которое будет автоматически ссылаться на правильный ресурс для текущего масштабирования. Особенности контекста именования и дополнительные сведения описываются в разделе Краткое руководство: использование файловых и графических ресурсов.

Дополнительные сведения о проектировании масштабирования см. в документе Руководство по взаимодействию с пользователями — макеты и масштабирование.

Image и ImageBrush в коде

Обычно для определения элементов Image и ImageBrush используется XAML, а не код. Это происходит потому, что данные элементы часто являются выходными элементами средств разработки в рамках определения пользовательского интерфейса XAML.

При определении Image или ImageBrush с помощью кода используйте конструкторы по умолчанию, а затем задайте соответствующее свойство источника (Image.Source или ImageBrush.ImageSource). При задании свойства источника с помощью кода потребуется BitmapImage (а не универсальный код ресурса (URI)). Если источником является поток, для инициализации значения используйте метод SetSourceAsync. Если источником является универсальный код ресурса (URI), который включает в себя содержимое в вашем приложение, использующее схемы ms-appx или ms-resource, используйте конструктор BitmapImage, который применяет универсальный код ресурса (URI). Также можно рассмотреть вариант обработки события ImageOpened, если существуют некоторые временные проблемы с получением или декодированием источника изображения, при которых может понадобиться отображать альтернативное содержимое до тех пор, пока источник изображения не станет доступным. Пример кода см. в примере коллекции WinUI.

Примечание

Если вы установили изображения с помощью кода, вы можете использовать автоматическую обработку для получения доступа к неквалифицированным ресурсам с текущими квалификаторами масштаба и языка либо вы можете использовать ResourceManager и ResourceMap с квалификаторами масштаба и языка для непосредственного получения ресурсов. Подробнее см. в разделе Система управления ресурсами.

Получение примера кода