Элементы управления в WPF. Image и InkCanvas — работа с изображениями

Содержание

Свойства класса Image
Класс InkCanvas
Итого

Для загрузки изображений в приложениях WPF используется элемент Image. Сегодня мы рассмотрим работу с этим элементом управления, а также, дополнительно, рассмотрим работу с ещё одним элементом управления, который может использоваться для создания изображений — InkCanvas.

Свойства класса Image

Класс Image в WPF поддерживает следующие форматы изображений: .bmp, .gif, .ico, .jpg, .png, .wdp и .tiff. При этом, если в Image загружается gif, то будет отображаться только первый кадр, так как элемент Image не поддерживает проигрывание анимацией. Для работы, Image предоставляет нам следующий свойства:

Свойство	Тип	Описание
`Source`	`ImageSource`	Источник изображения. По умолчанию — `null`
`Stretch`	`Stretch`	Значение, определяющее то, как следует растягивать изображение, чтобы заполнить прямоугольную область `Image`. Может принимать следующие значения: `None` — изображение сохраняет свой исходный размер. `Fill` — размер изображения изменяется для заполнения размеров объекта `Image`. Соотношение сторон не сохраняется. `Uniform` — размер изображения изменяется для заполнения размеров объекта `Image`, при этом сохраняется соотношение сторон. `UniformToFill` — размер изображения изменяется для заполнения размеров `Image`, при этом сохраняется соотношение сторон. Если соотношение сторон прямоугольника `Image` отличается от изображения, то исходное изображения обрезается для заполнения `Image`.
`StretchDirection`	`StretchDirection`	значение, показывающее, как масштабировано изображение. Может принимать одно из следующих значений: `Both` — содержимое увеличивается до размеров родительского объекта в соответствии с требованиями режима Stretch. `DownOnly` — содержимое масштабируется вниз только в том случае, если оно больше родительского содержимого. Если содержимое меньше, выполняется масштабирование вверх. `UpOnly` — содержимое масштабируется вверх только в том случае, если оно меньше родительского содержимого. Если содержимое больше, выполняется масштабирование вниз.

В качестве примера, можно продемонстрировать загрузку изображения в Image из файла. В примере ниже файл расположен по пути c:\pictures\pick.jpg

<Grid>
    <Image Source="C:\pictures\pick.jpg" 
           Stretch="UniformToFill" 
           StretchDirection="DownOnly" />
</Grid>

В результате мы увидим изображение, растянутое по размерам всего окна (т.к. объект Image при таком расположении также будет занимать всё доступное пространство):Помимо обычно загрузки изображения, используя Image, мы можем также осуществлять простейшие операции над изображениями — поворачивать, обрезать, преобразовывать в оттенки серого и так далее. Например, развернем наше изображение на 90 градусов:

<Image Stretch="UniformToFill" 
       StretchDirection="Both">
    <Image.Source>
        <BitmapImage UriSource="C:\pictures\pick.jpg" Rotation="Rotate90" />
    </Image.Source>
</Image>

Класс InkCanvas

Элемент управления InkCanvas представляет собой контейнер на котором можно рисовать. То есть, мы можем подгружать в InkCanvas, например, изображение и рисовать на нем. Изначально InkCanvas предполагалось использовать для стилуса, но сейчас имеется возможность использовать для рисования мышь. Например, напишем следующий код XAML:

<InkCanvas>
    <Image Source="C:\pictures\pick.jpg"></Image>
</InkCanvas>

Теперь можно запустить приложение и, зажав левую кнопку мыши, что-нибудь нарисовать на картинке:

Итого

Работа с изображениями в WPF, в основном, строится вокруг использования элемента управления Image, возможностей которого хватает, чтобы загрузить картинку из файла и произвести над ней, при необходимости простейшие манипуляции. Также, в WPF имеется элемент InkCanvas, который может использоваться для рисования с использованием курсора мыши.