Image – wyświetlanie obrazów

Czym jest Image?

Image to kontrolka WPF, która wyświetla obraz – zdjęcie, logo, ikonę, miniaturkę. Obraz może pochodzić z pliku dodanego do projektu, z dysku użytkownika, albo z internetu.

<Image Source="/Images/logo.png"
       Width="150"
       Height="150" />

Source – skąd brać obraz

Właściwość Source może wskazywać na obraz z trzech różnych źródeł. Każde ma swoje zastosowanie.

Plik dodany do projektu (zasób)

Najczęstszy sposób – dodajesz plik graficzny do folderu projektu (np. Images) i ustawiasz jego właściwość „Build Action” na „Resource” w Visual Studio (kliknięcie prawym przyciskiem na plik → Właściwości). Taki obraz jest wbudowany w aplikację – nie trzeba dystrybuować osobnych plików graficznych.

<!-- Ścieżka zaczyna się od / – folder Images musi istnieć w projekcie -->
<Image Source="/Images/logo.png"
       Width="100" />

<!-- Jeśli plik jest w podfolderze -->
<Image Source="/Images/Icons/save.png"
       Width="24" />

Plik z dysku (ścieżka absolutna)

Gdy obraz nie jest częścią projektu, ale leży gdzieś na dysku użytkownika (np. wybrany przez OpenFileDialog), używasz pełnej ścieżki.

<!-- W XAML rzadko używane na sztywno – ścieżka różni się komputer od komputera -->
<Image Source="C:\Users\Uczen\Pictures\zdjecie.jpg" />

<!-- W praktyce ścieżkę z dysku ustawia się dynamicznie z C# (sekcja 4) -->

Obraz z internetu (URL)

Image może też wczytać obraz prosto z adresu internetowego – WPF samodzielnie go pobierze.

<Image Source="https://school-it.pl/images/logo.png"
       Width="150" />
<!-- Wymaga połączenia z internetem podczas uruchomienia aplikacji -->

Stretch – skalowanie obrazu

Gdy rozmiar kontrolki Image różni się od rozmiaru oryginalnego obrazu, właściwość Stretch decyduje jak obraz wypełni dostępne miejsce.

<!-- Fill (domyślne) – może zniekształcić obraz jeśli proporcje się nie zgadzają -->
<Image Source="/Images/zdjecie.jpg"
       Width="300" Height="150"
       Stretch="Fill" />

<!-- Uniform – cały obraz widoczny, zachowane proporcje, może być "okno" wolnego miejsca -->
<Image Source="/Images/zdjecie.jpg"
       Width="300" Height="150"
       Stretch="Uniform" />

<!-- UniformToFill – cały obszar wypełniony, fragmenty obrazu przycięte -->
<Image Source="/Images/zdjecie.jpg"
       Width="300" Height="150"
       Stretch="UniformToFill" />

BitmapImage w C#

Gdy ustawiasz obraz z kodu C# (a nie z XAML), nie podajesz po prostu ścieżki tekstem – tworzysz obiekt BitmapImage, który WPF używa jako źródło dla kontrolki Image.

Wczytywanie z pliku

// XAML: <Image x:Name="imgZdjecie" Width="200" Height="200" />

private void WczytajObraz(string sciezka)
{
    BitmapImage bitmap = new BitmapImage();
    bitmap.BeginInit();
    bitmap.UriSource = new Uri(sciezka, UriKind.RelativeOrAbsolute);
    bitmap.EndInit();

    imgZdjecie.Source = bitmap;
}

// Użycie:
WczytajObraz(@"C:\Users\Uczen\Pictures\zdjecie.jpg");
WczytajObraz("/Images/logo.png");  // zasób projektu

Wczytywanie z URL (internet)

private void WczytajZInternetu(string url)
{
    BitmapImage bitmap = new BitmapImage();
    bitmap.BeginInit();
    bitmap.UriSource = new Uri(url, UriKind.Absolute);
    bitmap.CacheOption = BitmapCacheOption.OnLoad;  // wczytaj całość do pamięci
    bitmap.EndInit();

    imgZdjecie.Source = bitmap;
}

WczytajZInternetu("https://school-it.pl/images/logo.png");

Obsługa błędu ładowania

Co się stanie, jeśli plik nie istnieje, jest uszkodzony, albo adres URL nie odpowiada? Trzeba to obsłużyć, żeby aplikacja nie „wyłożyła się” na nieoczekiwanym wyjątku.

private bool WczytajObrazBezpiecznie(string sciezka)
{
    try
    {
        BitmapImage bitmap = new BitmapImage();
        bitmap.BeginInit();
        bitmap.UriSource = new Uri(sciezka, UriKind.RelativeOrAbsolute);
        bitmap.CacheOption = BitmapCacheOption.OnLoad;
        bitmap.EndInit();

        imgZdjecie.Source = bitmap;
        return true;
    }
    catch (Exception ex)
    {
        // Plik nie istnieje, uszkodzony, brak internetu, złe uprawnienia...
        MessageBox.Show($"Nie udało się wczytać obrazu: {ex.Message}",
                        "Błąd", MessageBoxButton.OK, MessageBoxImage.Warning);

        // Pokazujemy obraz zastępczy ("placeholder")
        imgZdjecie.Source = new BitmapImage(new Uri("/Images/brak-zdjecia.png", UriKind.Relative));
        return false;
    }
}

Zmiana obrazu kliknięciem

Galeria – przyciski Następny / Poprzedni

<StackPanel>
    <Image x:Name="imgGaleria"
           Width="300"
           Height="200"
           Stretch="Uniform" />

    <StackPanel Orientation="Horizontal"
                HorizontalAlignment="Center"
                Margin="0,10,0,0">
        <Button Content="⬅ Poprzedni" Click="btnPoprzedni_Click" Margin="0,0,8,0" />
        <Button Content="Następny ➡" Click="btnNastepny_Click" />
    </StackPanel>

    <TextBlock x:Name="lblNumer"
               Text="1 / 5"
               HorizontalAlignment="Center"
               Margin="0,8,0,0" />
</StackPanel>

string[] _zdjecia = {
    "/Images/zdjecie1.jpg",
    "/Images/zdjecie2.jpg",
    "/Images/zdjecie3.jpg",
    "/Images/zdjecie4.jpg",
    "/Images/zdjecie5.jpg"
};
int _aktualnyIndeks = 0;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    PokazAktualneZdjecie();
}

private void PokazAktualneZdjecie()
{
    imgGaleria.Source = new BitmapImage(
        new Uri(_zdjecia[_aktualnyIndeks], UriKind.RelativeOrAbsolute));

    lblNumer.Text = $"{_aktualnyIndeks + 1} / {_zdjecia.Length}";
}

private void btnNastepny_Click(object sender, RoutedEventArgs e)
{
    // Operator % (modulo) zawija indeks z powrotem do 0 po ostatnim zdjęciu
    _aktualnyIndeks = (_aktualnyIndeks + 1) % _zdjecia.Length;
    PokazAktualneZdjecie();
}

private void btnPoprzedni_Click(object sender, RoutedEventArgs e)
{
    // Dodajemy Length przed modulo, żeby uniknąć ujemnego indeksu
    _aktualnyIndeks = (_aktualnyIndeks - 1 + _zdjecia.Length) % _zdjecia.Length;
    PokazAktualneZdjecie();
}

Wybór pliku przez OpenFileDialog

private void btnWybierzZdjecie_Click(object sender, RoutedEventArgs e)
{
    Microsoft.Win32.OpenFileDialog dialog = new Microsoft.Win32.OpenFileDialog();
    dialog.Filter = "Obrazy (*.jpg;*.png;*.bmp)|*.jpg;*.png;*.bmp|Wszystkie pliki (*.*)|*.*";
    dialog.Title = "Wybierz zdjęcie profilowe";

    if (dialog.ShowDialog() == true)
    {
        imgZdjecie.Source = new BitmapImage(new Uri(dialog.FileName));
    }
}

Image jako przycisk – obsługa kliknięcia

Image nie ma wbudowanego zdarzenia Click (w przeciwieństwie do Button). Żeby zareagować na kliknięcie obrazu, używasz zdarzenia myszy MouseLeftButtonDown.

<Image x:Name="imgAwatar"
       Source="/Images/avatar-default.png"
       Width="80"
       Height="80"
       Cursor="Hand"
       MouseLeftButtonDown="imgAwatar_Click" />

private void imgAwatar_Click(object sender, MouseButtonEventArgs e)
{
    MessageBox.Show("Kliknięto avatar – otwieram wybór zdjęcia");
    // Tu np. wywołanie OpenFileDialog z sekcji 6b
}

Praktyczny przykład – karta profilu ze zdjęciem

<Border Background="#252535"
        CornerRadius="10"
        Padding="20"
        Width="250">
    <StackPanel HorizontalAlignment="Center">

        <Border CornerRadius="60"
                Width="120" Height="120"
                ClipToBounds="True">
            <Image x:Name="imgAvatar"
                   Source="/Images/avatar-default.png"
                   Stretch="UniformToFill"
                   Cursor="Hand"
                   MouseLeftButtonDown="imgAvatar_Click" />
        </Border>

        <TextBlock Text="Kliknij, aby zmienić zdjęcie"
                   FontSize="11"
                   Foreground="#888"
                   HorizontalAlignment="Center"
                   Margin="0,8,0,16" />

        <TextBlock Text="Jan Kowalski"
                   FontSize="18"
                   FontWeight="Bold"
                   Foreground="White"
                   HorizontalAlignment="Center" />

    </StackPanel>
</Border>

private void imgAvatar_Click(object sender, MouseButtonEventArgs e)
{
    Microsoft.Win32.OpenFileDialog dialog = new Microsoft.Win32.OpenFileDialog();
    dialog.Filter = "Obrazy (*.jpg;*.jpeg;*.png)|*.jpg;*.jpeg;*.png";
    dialog.Title = "Wybierz zdjęcie profilowe";

    if (dialog.ShowDialog() != true) return;   // użytkownik kliknął Anuluj

    try
    {
        BitmapImage bitmap = new BitmapImage();
        bitmap.BeginInit();
        bitmap.UriSource = new Uri(dialog.FileName);
        bitmap.CacheOption = BitmapCacheOption.OnLoad;
        bitmap.EndInit();

        imgAvatar.Source = bitmap;
    }
    catch (Exception ex)
    {
        MessageBox.Show($"Nie udało się wczytać obrazu: {ex.Message}");
    }
}

Częste błędy

❌ Błąd 1: Zapomniany Build Action = Resource

<Image Source="/Images/logo.png" />
<!-- Plik dodany do folderu,
     ale Build Action = "None"
     (domyślne) – nie zostanie
     wbudowany w aplikację! -->

❌ Błąd 2: Brak try-catch przy wczytywaniu z dysku

imgZdjecie.Source = new BitmapImage(
    new Uri(dialog.FileName));
// Jeśli plik jest uszkodzony
// lub usunięty po wybraniu –
// nieobsłużony wyjątek!

try
{
    imgZdjecie.Source = new BitmapImage(
        new Uri(dialog.FileName));
}
catch (Exception ex)
{
    MessageBox.Show("Błąd: " + ex.Message);
}

❌ Błąd 3: Stretch=Fill zniekształca zdjęcia

<Image Source="/Images/zdjecie.jpg"
       Width="300" Height="100" />
<!-- Stretch="Fill" domyślne –
     kwadratowe zdjęcie staje się
     prostokątem, ludzie wyglądają
     "ściśnięci" -->

<Image Source="/Images/zdjecie.jpg"
       Width="300" Height="100"
       Stretch="Uniform" />

❌ Błąd 4: Próba użycia Click na Image

<Image Source="/Images/icon.png"
       Click="img_Click" />
<!-- Błąd kompilacji!
     Image nie ma Click,
     tylko Button -->

<Image Source="/Images/icon.png"
       MouseLeftButtonDown="img_Click" />

Zadania do wykonania