The Image control

Элемент WPF Image позволит выводить изображения в вашем приложении. Как вы убедитесь из данной главы, это очень гибкий элемент, со множеством опций и методов. Но сперва давайте рассмотрим наиболее общий пример встраивания изображения в окно WPF приложения.

<Image Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />

Результат будет выглядеть следующим образом:

Свойство Source, которое мы использовали в примере для указания изображения для вывода, вероятно одно из самых важных свойств данного элемента. Так что для начала давайте углубимся в эту тему.

Свойство Source

Как вы можете видеть из нашего примера, свойство Source позволяет легко указать какое именно изображение будет отображаться внутри элемента Image - в данном конкретном примере мы использовали изображение из удаленного источника, которое элемент Image автоматически подгрузит и отобразит сразу, как только оно станет доступным. Это отличный пример того, насколько гибким является элемент Image, но в большинстве случаев вы захотите иметь изображение в одном месте с вашим приложение, нежели загружать его из удаленного источника. Что, впрочем, может быть выполнено также легко!

Как вам возможно известно, вы можете добавлять ресурсы в ваш проект - они могут существовать в рамках вашего проекта в Visual Studio и быть видны в Solution Explorer наряду с другими файлами, относящимися к WPF (окна, пользовательские элементы управление и др.). Примером одного из таких фалов ресурсов и есть изображение, которое вы можете скопировать в соответствующую папку вашего проекта, чтобы добавить его. Впоследствии этот файл скомпилируется в ваше приложение (только если вы не укажете VS не делать этого) и может быть доступным по URL в формате для ресурсов.

<Image Source="/WpfTutorialSamples;component/Images/google.png" />

Такой URI, часто называемый "Pack URI's", большая тема со множеством нюансов, но пока лишь обратим внимание, что в сущности он (URI) состоит из двух частей:

• Первой (/WpfTutorialSamples;component), где за именем сборки (WpfTutorialSamples в моём приложении) следует слово "component"
• И второй, где указан относительный путь к файлу ресурса: /Images/google.png

Используя такой синтаксис, вы можете легко ссылаться на ресурсы, добавленные в ваше приложение. Для упрощения, WPF фрэймворк прочитает и простой, относительный URL - этого будет достаточно в большинстве случаев, до тех пор, пока вы не станете делать с ресурсами вашего приложения нечто усложненное. Вот как может выглядеть тот же код с использованием относительного URL:

<Image Source="/Images/google.png" />

Динамическая загрузка изображений (Code-behind)

Указание ресурса изображения прямо в XAML коде сработает во множестве случаев, но иногда вам понадобится загрузить картинку динамически, в зависимости от выбора пользователя. Это возможно сделать из застраничного кода (Code-behind). Вот пример того, как вы можете загрузить изображение находящееся на компьютере пользователя, основываясь на его выборе файла в диалоге OpenFileDialog:

private void BtnLoadFromFile_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog openFileDialog = new OpenFileDialog();
    if(openFileDialog.ShowDialog() == true)
    {
    Uri fileUri = new Uri(openFileDialog.FileName);
    imgDynamic.Source = new BitmapImage(fileUri);
    }
}

Заметьте как я создал объект класса BitmapImage, в который передал объект Uri, основанный на выбранном в диалоге пути файла. Мы можем использовать точно такой же прием, чтобы загрузить изображение, добавленное в приложение как ресурс:

private void BtnLoadFromResource_Click(object sender, RoutedEventArgs e)
{
    Uri resourceUri = new Uri("/Images/white_bengal_tiger.jpg", UriKind.Relative);
    imgDynamic.Source = new BitmapImage(resourceUri);        
}

Мы используем точно такой же относительный путь, который использовали в одном из предыдущих примеров, - просто убедитесь, что передали значение UriKind.Relative, когда создавали объект класса Uri, чтобы этот объект знал, что путь не абсолютный. Вот пример XAML кода и скриншот застраничного кода:

<Window x:Class="WpfTutorialSamples.Basic_controls.ImageControlCodeBehindSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Basic_controls"
    mc:Ignorable="d"
    Title="ImageControlCodeBehindSample" Height="300" Width="400">
    <StackPanel>
    <WrapPanel Margin="10" HorizontalAlignment="Center">
        <Button Name="btnLoadFromFile" Margin="0,0,20,0" Click="BtnLoadFromFile_Click">Load from File...</Button>
        <Button Name="btnLoadFromResource" Click="BtnLoadFromResource_Click">Load from Resource</Button>
    </WrapPanel>
    <Image Name="imgDynamic" Margin="10"  />
    </StackPanel>
</Window>

Свойство Stretch

После свойства Source, которое является очевидно важным, думаю вторым наиболее интересным свойством элемента Image является свойство Stretch. Оно констролирует то, как ведет себя загруженное изображение, когда его размеры не совпадают с размерами элемента Image. Такое будет случатся постоянно, ведь размеры вашего окна могут меняться пользователем, только если его компоновка не статичная, что значит и размеры элемента(ов) Image будут также изменяться.

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

<Window x:Class="WpfTutorialSamples.Basic_controls.ImageControlStretchSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Basic_controls"
    mc:Ignorable="d"
    Title="ImageControlStretchSample" Height="450" Width="600">
    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Grid.Column="0" HorizontalAlignment="Center" FontWeight="Bold">Uniform</Label>
    <Label Grid.Column="1" HorizontalAlignment="Center" FontWeight="Bold">UniformToFill</Label>
    <Label Grid.Column="2" HorizontalAlignment="Center" FontWeight="Bold">Fill</Label>
    <Label Grid.Column="3" HorizontalAlignment="Center" FontWeight="Bold">None</Label>
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="Uniform" Grid.Column="0" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="UniformToFill" Grid.Column="1" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="Fill" Grid.Column="2" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="None" Grid.Column="3" Grid.Row="1" Margin="5" />
    </Grid>
</Window>

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

• Uniform: Это режим по умолчанию. Изображение будет автоматически отмасштабировано так, чтобы оно целиком умещалось в элементе Image. Соотношение сторон изображения не изменится.
• UniformToFill: Изображение будет отмасштабировано так, чтобы полностью заполнять элемент Image. Соотношение сторон также будет сохранено.
• Fill: Изображение будет отмасштабировано так, чтобы заполнить весь элемент Image. Соотношение сторон может НЕ сохраниться потому, что высота и ширина изображения масштабируются независимо.
• None: Если изоражение меньше элемента Image - никаких изменений не происходит. Если же оно больше - изображение будет подрезано так, чтобы умещаться в элементе Image, будет видна лишь часть изображения.

Заключение

Как показано в главе, элемент WPF Image позволяет вам легко отобразить картинку в вашем приложении будь-то из удаленного источника, встроенного ресурса или из локального расположения на компьютере.