The Image control

A WPF Image vezérlő segítségével könnyedén jeleníthetünk meg képeket a programunkban. Ez egy nagyon sokoldalú vezérlő, számos hasznos lehetőséggel és módszerrel, amit megtanulhatsz ebből a cikkből. De először nézzünk egy egyszerű példát egy kép ablakban történő megjelenítésére.

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

Az eredmény a következő lesz:

A Source tulajdonság amit a példában használtunk mutatja meg, a kép forrását, ami talán a legfontosabb az összes tulajdonság közül. Nos, nézzük meg a dolgokat közelebbről.

A 'Source' tulajdonság

Amint azt a példából láttuk, a Source tulajdonsággal könnyedén megadhatjuk, hogy melyik kép jelenjen meg az 'Image' vezérlőn - ami jelen esetben egy külső elérésű kép volt. Az 'Image' vezérlő automatikusan lehívja és megjeleníti amint arra készen áll. Ez egy nagyon jó példa arra, hogy milyen sokoldalú is ez a vezérlő, de a legtöbb esetben ( és erősen ajánlott is :) érdemes a képeket egybecsomagolni az alkalmazással, ahelyett, hogy külső helyről töltenénk le. Ezt is roppant könnyen megtehetjük!

Amint azt ( remélhetőleg ) tudod, a projekthez lehet resource fájlokat is hozzáadni - amik részei lesznek az aktuális Visual Studio projektnek és meg is jelennek a Solution Explorerben, mint bármilyen más WPF által kezelt fájl ( Ablakok, felhasználói vezérlők, stb. ). A kép fájlok tipikus resource elemek, amit egyszerűen csak be kell másolni a projekt megfelelő könyvtárába. Ez esetben ezek bele lesznek fordítva az alkalmazásba ( kivéve, ha beállítjuk a VS-t, hogy ne tegyen így ) majd a megfelelő hivatkozással meg is tudjuk címezni, jeleníteni. Tehát, ha van egy képed amit "google.png"-nek neveztél el és az "Images" könyvtárban található, akkor a következő képen érheted el:

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

Ezeket az URI-kat ( Universal Resource Identifier / Univerzális Erőforrás Azonosító ) gyakran nevezik Pack URI's-nak, ami egy roppant részletes és bonyolult téma, amiből egyenlőre elég ha megjegyezzük, hogy két részből állnak:

• Az első rész (/WpfTutorialSamples;component), ahol az assembly neve (WpfTutorialSamples a példa programunkban) a "component" névvel van kombinálva.
• A második rész ahol a resource relatív elérhetősége van megadva: /Images/google.png

Ezzel a formátummal könnyedén hivatkozhatunk resource elemekre az alkalmazásban. De le is egyszerűsíthetjük, A WPF keretrendszer elfogadja az egyszerűsített, relatív címzést - ami meg is felel a legtöbb esetben, mindaddig amik bonyolult, komplex dolgokat nem kezdünk el csinálni a resource adatainkkal. Itt pedig egy példa az egyszerűsített címzésre:

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

Képek dinamikus betöltése ( c# forrásból )

A képforrás megadása közvetlenül XAML-ben a legtöbb esetben elegendő, de néha szükség van dinamikus elérésre, például felhasználói kiválasztás esetén. Ez megoldható a c# forráskódból. Erre mutatunk egy példát amiben a felhasználó választhat ki a saját számítógépén egy képet:

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);
    }
}

Figyeljük meg, hogy létrehoztunk egy BitmapImage példányt, aminek átadtunk egy URI objektumot, amit a kiválasztott elérési út és fájlnév alapján hoztunk létre. Fontos megjegyezni, hogy pontosan ezt a technikát kell követni akkor is ha az alkalmazás resourceből kívánunk betölteni egy képet:

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

Ugyanazt az relatív elérési utat használjuk amit az egyik régebbi példánkban - de legyünk biztosak, hogy átadjuk a UriKind.Relative értéket amikor létrehozzuk a URI példányt. Ugyanis ebből fogja tudni a fordító, hogy nem abszolút címet adtunk át. Itt pedig az XAML forrás és egy képernyőkép a c# példánkból.

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

A 'Stretch' ( nyújtás ) tulajdonság

A 'Source' tulajdonság mellett, ami érthető okokból a legfontosabb, egy másik fontos tulajdonság amit az 'Image' vezérlőn be tudunk állítani a Stretch, vagyis a nyújtás. Ez határozza meg, hogy mi történjen ha a betöltött kép méretei nem egyeznek meg az Image vezérlő méreteivel. Ez szinte minden esetben előfordul, amikor az alkalmazás ablakát a felhasználó szabadon átméretezheti és az 'Image' vezérlő mérete is dinamikusan változik.

Amint a következő példából is jól látszik, a 'Stretch' tulajdonság nagy mértékben felelős a kép megjelenítéséért:

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

Nehezen mondható meg, de ugyanazt a képet jelenítettük meg, csak eltérő értékeket állítottunk be a 'Stretch' tulajdonságnak. A lehetséges értékek a következőképp működnek:

• Uniform Ez az alapértelmezett. A kép automatikusan skálázódik, hogy beférjen a rendelkezésre álló helyre. Méretarány viszont kötött, a kép nem torzul.
• UniformToFill: a képet úgy skálázza, hogy az teljesen kitöltse a rendelkezésre álló helyet. A méretarány továbbra is kötött, a kép nem torzul ( viszont kilóghatnak részei ).
• Fill: A kép úgy lesz méretezve, hogy teljesen kitöltse a rendelkezésre álló területet. A méretarány NEM kötött, mivel a kép szélessége és magassága egymástól függetlenül változik, a kép torzul.
• None: Ha a kép kisebb, mint a rendelkezésre álló terület, semmi sem történik. Ha a kép nagyobb, akkor a kilógó terület le lesz vágva, a kép bizonyos részei egyszerűen nem fognak látszani.

Összesítés

A WPF Image vezérlő segítségével könnyedén jeleníthetünk meg képeket akár távoli forrásból, beágyazva az alkalmazásba, vagy a számítógépről, amint azt a példákban bemutattuk.