This article has been localized into Ukrainian by the community.
Image
Елемент керування Image у WPF дозволяє показувати зображення всередині вашого застосунку. Це універсальний елемент керування, із багатьма корисними налаштуваннями та методами, які ви вивчите у цій статті. Але спочатку погляньмо на найпростіший приклад включення зображення у вікно
<Image Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />Результат виглядатиме так
Властивість Source, яку ми використали в прикладі, щоб вказати, яке зображення слід показати - це, мабуть, найважливіша властивість цього елементу керування. Тож для початку заглибмося в цю властивість.
Властивість Source
Як ви можете бачити в першому прикладі, властивість Source дає можливість легко вказати, яке зображення слід показати в елементі Image. У цьому прикладі ми використали віддалене зображення, яке Image автоматично отримає та покаже, як тільки воно стане видимим. Це чудовий приклад того, наскільки універсальним є цей елемент керування, але у багатьох випадках ви ймовірно захочите зв'язати зображення із вашим застосунком, а не завантажувати його із віддаленого джерела. Це зробити так само просто!
Як вам мабуть відомо, ви можете додати ресурсний файл до вашого проєкту. Вони можуть знаходитися всередині поточного проєкту Visual Studio та бути видимими в провіднику рішення (Solution Explorer), як і будь-які інші зв'язані з WPF файли (вікна, користувацькі елементи управління тощо). Відповідний приклад ресурсного файлу - це зображення, яке ви можете просто скопіювати у потрібну папку вашого проєкту, щоб його туди включити. Воно буде автоматично вбудоване у ваш застосунок (ящо ви не скажете VS цього не робити). Після цього до нього можна отримати доступ, використовуючи URL-формат для ресурсів. Тож, якшо у вас є зображення "google.png" всередині папки "Images", то синтакис виглядатиме десь, як тут.
<Image Source="/WpfTutorialSamples;component/Images/google.png" />Ці URL, які часто називають "URL-пакетами" - це важка тема із багатьма деталями, але поки що просто запам'ятайте, що вони по суті складаються із двох частин:
- Перша частина (/WpfTutorialSamples;component), де ім'я збірки (WpfTutorialSamples у моєму застосунку) поєднується зі словом "component".
- Друга частина, де вказується відносний шлях до ресурсу: /Images/google.png
Використовуючи цей синтаксис, ви можете легко посилатися на ресурси включені у ваш застосунок. Для спрощення WPF-фреймворк також дозволяє прості, відносні URl. Їх достатньо у більшості випадків, якщо ви не робите у вашому застосунку щось складніше, якщо судити по міркам використання ресурсів. Застосування простого, відносного URL виглядатиме якось так:
<Image Source="/Images/google.png" />Динамічне завантаження зображення (із C#-коду)
У багатьох випадках чудово працює визначення джерела для елементу Image безпосередньо у XAML-розмітці, однак інколи потрібно завантажити його динамічно, нариклад, коли зображення залежить від вибору користувача. Це можна зробити у C#-коді. Тут показано, як завантажити зображення, знайдене на комп'ютері користувача, відповідно до вибору із 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-розмітку та скріншот прикладу C#-коду.
<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, важливої з очевидних причини, на мою думку, є властивість 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, то нічого не зміниться. Якщо ж воно більше, то його обріжуть, щоб вмістити. Тобто видно буде лише його частину.
Підсумок
WPF-елемент керування Image дає можливість з легкістю показати зображення у вашому застосунку. Воно може бути із віддаленого джерела, вбудованого чи з комп'ютера користувача, як показано у цій статті.