Ovládací prvek Image

Ovládací prvek WPF Image umožňuje v aplikacích zobrazovat obrázky. Jak se dozvíte v tomto článku, jedná se o velmi univerzální ovládací prvek s mnoha užitečnými volbami a metodami. Napřed se však podívejme na nejjednodušší příklad, jak do okna (Window) vložit obrázek:

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

A tady je výsledek:

Vlastnost Source, kterou jsme v tomto příkladu použili pro určení obrázku, který se má zobrazit, je asi nejdůležitější vlastností tohoto ovládacího prvku. Tak začněme právě s ní.

Vlastnost Source (Zdroj)

Z našeho prvního příkladu je vidět, že s vlastností Source lze snadno určit, který obrázek se má zobrazit uvnitř ovládacího prvku Image. V tomto konkrétním příkladu jsme použili obrázek na vzdáleném serveru (remote image) – jakmile je ovládací prvek Image viditelný, automaticky zařídí, že se obrázek stáhne a zobrazí se. To dobře ilustruje všestrannost ovládacího prvku Image, avšak v mnoha případech dáte raději přednost přibalení obrázku k aplikaci, než abyste ho stahovali z nějakého vzdáleného zdroje. A tohle jde udělat tak jednoduše!

Jak možná víte, ke svému projektu můžete přidat tzv. resource soubory (soubory prostředků/zdrojů) – mohou se nacházet ve vašem aktuálním projektu ve Visual Studiu a můžete si je prohlížet v Průzkumníku řešení (Solution Explorer) jako kterýkoliv jiný soubor patřící k WPF (okna, uživatelské ovládací prvky atd.). Typickým příkladem resource souboru je obrázek, který prostě nakopírujete do příslušného adresáře vašeho projektu, a tím ho označíte jako "inkludovaný" (included). Bude pak přilinkován k vaší aplikaci (pokud neurčíte explicitně jinak) a lze se k němu dostat pomocí URL ve formátu pro resource soubory. Tedy, pokud máte obrázek s názvem "google.png" ve složce "Images", syntaxe bude následující:

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

Tato URI, často označovaná jako "Pack URI's" (URI v balíčku), představují rozsáhlé téma se spoustou dalších podtémat, ale my se nyní spokojíme s pozorováním, že se v zásadě skládají ze dvou částí:

• V první části (/WpfTutorialSamples;component) je název assembly (v mé aplikaci WpfTutorialSamples) propojen se slovem "component".
• Ve druhé části specifikujeme relativní cestu k resource souboru: /Images/google.png

Pomocí této syntaxe se lze jednoduše odkazovat na resource soubory začleněné do vaší aplikace. A aby nám to ještě ulehčil, akceptuje framework WPF i jednoduché, relativní URL – to bude v mnoha případech dostačující, pokud ve své aplikaci zrovna neděláte v souvislosti s resource soubory něco opravdu složitého. Použití jednoduchého relativního URL bude vypadat takto:

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

Dynamické načítání obrázků (Code-behind)

V mnoha případech vám bude stačit specifikovat vlastnost Source ovládacího prvku Image přímo v kódu XAML. Někdy je však potřeba nahrát obrázek dynamicky, tj. podle toho, pro co se rozhodne uživatel. Pro toto se hodí Code-behind. Následuje ukázka, jak nahrát obrázek, který se nachází na počítači uživatele a který si uživatel vybere pomocí 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);
    }
}

Všimněte si postupu, pomocí něhož se vytváří instance třídy BitmapImage, které předávám objekt Uri, a to na základě cesty zadané v dialogovém okně. Tutéž techniku lze využít k načtení obrázku, který je jako resource soubor obsažen v aplikaci.

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

Používáme stejnou relativní cestu, jakou jsme již použili v jednom z předchozích příkladů – jen si dejte pozor na to, abyste při vytváření instance třídy Uri uvedli hodnotu UriKind.Relative a dali tak najevo, že předávaná cesta není absolutní. Zde je zdrojový kód v XAMLu i kopie obrazovky našeho příkladu s Code-behind.

<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>

Vlastnost Stretch (Protažení)

Vedle vlastnosti Source, která je důležitá ze zřejmých důvodů, je podle mne druhou nejzajímavější vlastností ovládacího prvku Image vlastnost Stretch. Rozhoduje o tom, co se má stát v případě, že rozměry načteného obrázku neodpovídají přesně rozměrům ovládacího prvku Image. K tomu dochází pořád, neboť uživatel může velikost vašich oken (Window) změnit, a pakliže rozvržení (layout) vaší aplikace není jen statické, znamená to, že se změní i velikost ovládacího prvku (ovládacích prvků) Image.

Následující příklad demonstruje, že vlastnost Stretch má na způsob zobrazení obrázku poměrně značný vliv:

<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>

Možná je trochu obtížné to rozpoznat, ale všechny čtyři ovládací prvky Image zobrazují tentýž obrázek, jen s různými hodnotami vlastnosti Stretch. Zde je popis chování jednotlivých módů:

• Uniform: Toto je výchozí mód. Rozměry obrázku budou automaticky upraveny tak, aby se obrázek vešel do oblasti ovládacího prvku Image. Aspect ratio (poměry stran) obrázku zůstanou zachovány.
• UniformToFill: Rozměry obrázku budou upraveny tak, aby obrázek zcela zaplnil oblast ovládacího prvku Image. Aspect ratio (poměry stran) obrázku zůstanou zachovány.
• Fill: Rozměry obrázku budou upraveny tak, aby se obrázek vešel do oblasti ovládacího prvku Image. Aspect ratio (poměry stran) NEMUSÍ zůstat zachovány, neboť výška a šířka obrázku se upraví nezávisle na sobě.
• None: Pokud je obrázek menší než ovládací prvek Image, neděje se nic. Je-li větší než ovládací prvek Image, obrázek se jednoduše ořízne tak, aby se do ovládacího prvku Image vešel, což znamená, že bude vidět pouze jeho část.

Shrnutí

Jak jste se mohli v tomto článku přesvědčit, ovládací prvek WPF Image vám usnadňuje zobrazení obrázku v aplikaci, ať už se bere ze vzdáleného zdroje, ze začleněného resource souboru nebo z lokálního počítače.