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

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

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

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

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

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

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

Изображение

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

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

Вот объект отрисованного изображения.

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

ImageBrush;

С помощью объекта ImageBrush можно использовать изображение для рисования области, которая принимает объект Brush . Например, можно использовать ImageBrush для значения свойства Fill объекта Эллипс или для свойства Background объекта Canvas.

В следующем примере показано, как использовать ImageBrush для рисования эллипса.

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

Эллипс, окрашенный с помощью ImageBrush, выглядит так.

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

Если значения ширины или высотыизображения не заданы, он отображается с измерениями изображения, указанного источником. Установка ширины и высоты создает прямоугольную область, в которой отображается изображение. Вы можете указать, как изображение заполняет эту область, используя свойство Stretch . Свойство Stretch принимает эти значения, которые определяет перечисление Stretch :

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

Кадрирование изображения

Свойство 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>

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

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

К изображению можно применить значение непрозрачности , чтобы изображение отображалось полупрозрачным. Значения непрозрачности от 0,0 до 1.0, где 1.0 полностью непрозрачны, а 0.0 полностью прозрачны. В этом примере показано, как применить непрозрачность 0,5 к изображению.

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

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

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

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

• Совместная группа экспертов по фотографии (JPEG)
• Переносимая сетевая графика (PNG)
• точечный рисунок (BMP)
• Формат обмена графикой (GIF)
• Формат файла изображений с тегами (TIFF)
• JPEG XR
• значки (ICO)

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

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

Изменяемая карта битов

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

РендерТаргетБитмап

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

Источники изображений и масштабирование

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

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

Image и ImageBrush в коде

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

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

UWP и WinUI 2

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

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

Начиная с Windows 10 версии 1607 элемент Image поддерживает анимированные ИЗОБРАЖЕНИЯ GIF. При использовании BitmapImage в качестве источника изображения можно получить доступ к API BitmapImage для управления воспроизведением анимированного GIF-изображения. Дополнительные сведения см. на странице класса BitmapImage .

Связанные статьи

• Аудио, видео и камера
• Класс Image
• Класс ImageBrush