Kontrolka Image

Kontrolka Image pozwala na wyświetlanie obrazów w twojej aplikacji. Jest ona bardzo wszechstronna, zawiera wiele użytecznych opcji oraz metod, których nauczysz się w tym artykule. Ale najpierw spójrzmy na najprostszy przykład dodawania obrazu:

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

W wyniku otrzymamy:

Właściwość Source, którą użyliśmy w tym przykładzie aby określić jaki obraz ma być wyświetlony, jest prawdopodobnie najważniejszą właściwością tej kontrolki, zagłębmy się w ten temat.

Właściwość Source

Jak mogliśmy zauważyć w pierwszym przykładzie, właściwość Source ułatwia nam określenie jaki obraz powinien zostać wyświetlony wewnątrz kontrolki Image - w tym konkretnym przykładzie, użyliśmy zewnętrznego obrazu, który kontrolka Image automatycznie pobrała i wyświetliła. To dobry przykład na to, jaka jest wszechstronna. W wielu sytuacjach może zaistnieć potrzeba powiązania obrazów z aplikacją zamiast pobierania ich z zewnętrznego źródła. Możemy to bardzo łatwo osiągnąć!

Jak prawdopodobnie wiesz, możesz dodać pliki zasobów do swojego projektu - mogą one znajdować się w twoim projekcie w Visual Studio i być przeglądane w Eksploratorze Plików jak każdy inny plik powiązany z WPF'em (Windows (Okna), User Controls (Kontrolki Użytkownika) itd.). Istotnym przykładem pliku zasobu jest obraz, który możesz po prostu skopiować do odpowiedniego folderu w swoim projekcie, aby został dołączony. Obraz ten, zostanie połączony z twoją aplikacją (jeśli tylko nie poprosisz Visual Studio żeby tego nie robiło) i będzie dostępny używając formatu URL do zasobów. Jeżeli posiadasz obraz "google.png" w folderze "Images", składnia będzie następująca:

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

Te URI, również nazywane "Pack URI's", to ciężki temat zawierający więcej szczegółów, na razie zwróćmy uwagę na to, że są one zbudowane z dwóch części:

• W pierwszej części (/WpfTutorialSamples;component) nazwa zestawu (w mojej aplikacji będzie to WpfTutorialSamples) jest łączona ze słowem "component"
• Natomiast w drugiej zostaje określona względna ścieżka /Images/google.png

Użycie tej składni pozwala odnieść się do zasobu aplikacji. Żeby nam to ułatwić, framework WPF'a zaakceptuje również prosty URL - w większości przypadków to wystarczy, dopóki nie będzie potrzeby zrobienia czegoś bardziej skomplikowanego w związku z zasobami. Użycie prostego URL będzie wyglądać następująco:

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

Dynamiczne ładowanie obrazów (Code-Behind)

Określenie źródła (Source) obrazu bezpośrednio w XAML'u zadziała w wielu przypadkach, ale czasem zajdzie potrzeba załadowania go dynamicznie, zależnie od wyboru użytkownika. Jest to możliwe przy użyciu Code-behind. Poniżej przykład jak załadować obraz z komputera użytkownika, który został wybrany przy użyciu 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);
    }
}

Zauważ, jak została stworzona instancja klasy BitmapImage do której przekazano obiekt klasy Uri na podstawie wybranej ścieżki. Możemy użyć tej samej techniki do załadowania obrazu z zasobów naszej aplikacji:

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

Używamy tej samej względnej ścieżki, która użyliśmy w jednym z poprzednich przykładów - pamiętajmy, aby podczas tworzenia instancji Uri przekazać wartość UriKind.Relative, tak aby obiekt tej klasy wiedział, że nie jest to dokładna ścieżka. Poniżej znajduje się kod źródłowy w XAML'u wraz ze zdjęciem naszego przykładu z użyciem 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>

Właściwość Stretch

Po właściwości Source, która z wiadomych przyczyn jest najważniejsza, przyszła pora na drugą najciekawszą właściwość kontrolki Image a mianowicie Stretch. Właściwość ta decyduje co ma się stać w momencie gdy wymiary załadowanego obrazu nie zgadzają się z wymiarami kontrolki Image. Będzie się to działo zawsze, ponieważ rozmiar okien może być zmieniany przez użytkownika i jeśli układ twoich okien nie jest statyczny,rozmiar obrazu również ulegnie zmianie.

W następnym przykładzie możesz zaobserwować jak odpowiednie wartości właściwości Stretch wpływają na wyświetlanie obrazu:

<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że się to wydawać dziwne, ale wszystkie cztery kontrolki Image wyświetlają takie samo zdjęcie, ale z różnymi wartościami właściwości Stretch. Poniżej znajduje się opis poszczególnych wartości:

• Uniform: domyślna wartość. Obraz zostanie automatycznie przeskalowany tak aby pasował do obszaru kontrolki Image. Format obrazu zostanie zachowany.
• UniformToFill: obraz zostanie przeskalowany tak aby całkowicie wypełniał obszar kontrolki Image. Format obrazu zostanie zachowany.
• Fill: obraz zostanie przeskalowany tak aby pasował do obszaru kontrolki Image. Format obrazu może ulec zmianie, ponieważ wysokość i szerokość zdjęcia są skalowane niezależnie
• None: jeżeli obraz jest mniejszy niż obszar kontrolki Image nic się nie zmieni. Jeżeli jest większy, obraz zostanie przycięty tak, tylko jego część będzie widoczna.

Podsumowanie

Kontrolka Image pozwala na wyświetlanie obrazu, niezależnie od tego czy pochodzi on z zewnętrznego źródła, zasobów projektu czy lokalnie z komputera.