Das Image Kontrollobjekt

Das WPF Image Control ermöglicht es Ihnen, Bilder innerhalb Ihrer Anwendungen anzuzeigen. Es ist ein sehr vielseitiges Objekt, mit vielen nützlichen Optionen und Methoden, wie Sie in diesem Artikel erfahren werden. Aber zuerst sehen wir uns das einfachste Beispiel an, wie man ein Bild in ein Fenster einfügt:

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

Das Ergebnis sieht so aus:

Die Source-Eigenschaft, mit der wir in diesem Beispiel das anzuzeigende Bild angegeben haben, ist wahrscheinlich die wichtigste Eigenschaft dieses Steuerelements, also lassen Sie uns zunächst in das Thema einsteigen.

Die Source Eigenschaft

Wie Sie an unserem ersten Beispiel sehen können, macht es die Source-Eigenschaft einfach, festzulegen, welches Bild innerhalb des Image-Controls angezeigt werden soll - in diesem speziellen Beispiel haben wir ein externes Bild verwendet, das das Image-Control automatisch holt und anzeigt, sobald es sichtbar wird. Das ist ein gutes Beispiel dafür, wie vielseitig die Bildsteuerung ist, aber in vielen Situationen möchten Sie die Bilder wahrscheinlich mit Ihrer Anwendung ausliefern, anstatt sie von einer entfernten Quelle zu laden. Dies ist genauso einfach zu bewerkstelligen!

Wie Sie wahrscheinlich wissen, können Sie Ressourcendateien zu Ihrem Projekt hinzufügen - sie können in Ihrem aktuellen Visual Studio-Projekt vorhanden sein und sie werden im Projektmappen-Explorer wie jede andere WPF-bezogene Datei (Windows, Benutzerkontrollen usw.) angezeigt. Ein Beispiel für eine Ressourcendatei ist ein Bild, das Sie einfach in einen entsprechenden Ordner Ihres Projekts kopieren können, um es aufzunehmen. Es wird dann in Ihre Anwendung kompiliert (es sei denn, Sie bitten VS ausdrücklich, dies nicht zu tun) und kann dann über das URL-Format für Ressourcen aufgerufen werden. Wenn Sie also ein Bild namens "google.png" in einem Ordner namens "Images" haben, könnte die Syntax so aussehen:

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

Diese URI's, die oft als "Pack URI's" bezeichnet werden, sind ein komplexes Thema mit vielen weiteren Details, aber im Moment reicht es zu wissen, dass sie im Wesentlichen aus zwei Teilen bestehen:

• Der erste Teil (/WpfTutorialSamples;component), wo der Assembly-Name (WpfTutorialSamples in meiner Anwendung) mit dem Wort "component" kombiniert wird.
• Der zweite Teil, in dem der relative Pfad der Ressource angegeben ist: /Images/google.png

Mit dieser Syntax können Sie auf einfache Weise auf Ressourcen verweisen, die in Ihrer Anwendung enthalten sind. Um die Sache zu vereinfachen, akzeptiert das WPF-Framework auch eine einfache, relative URL - das genügt in den meisten Fällen, es sei denn, Sie machen in Ihrer Anwendung etwas komplizierteres in Bezug auf Ressourcen. Mit einer einfachen relativen URL würde es so aussehen:

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

Dynamisches Laden von Bildern

Die Angabe der Bildquelle direkt in Ihrem XAML wird in vielen Fällen funktionieren, aber manchmal müssen Sie ein Bild dynamisch laden, z.B. basierend auf einer Benutzerauswahl. Dies ist möglich von Code-behind aus. So können Sie ein Bild laden, das sich auf dem Computer des Benutzers befindet, basierend auf dessen Auswahl aus einem 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);
    }
}

Beachten Sie, wie ich eine BitmapImage-Instanz erstelle, an die ich ein Uri-Objekt übergebe, entsprechend dem ausgewählten Pfad aus dem Dialog. Wir können genau die gleiche Technik verwenden, um ein Bild zu laden, das in der Anwendung als Ressource enthalten ist:

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

Wir verwenden den gleichen relativen Pfad wie in einem der vorherigen Beispiele - übergeben Sie einfach den Wert UriKind.Relative, wenn Sie die Uri-Instanz erstellen, damit sie weiß, dass der angegebene Pfad kein absoluter Pfad ist. Hier ist die XAML-Quelle sowie ein Screenshot von unserem Code-behind-Beispiel.

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

Die Eigenschaft "Stretch"

Nach der Source-Eigenschaft, die aus offensichtlichen Gründen wichtig ist, denke ich, dass die zweitinteressanteste Eigenschaft des Image-Controls die Stretch-Eigenschaft ist. Sie steuert, was passiert, wenn die Abmessungen des geladenen Bildes nicht mit den Abmessungen des Image-Controls übereinstimmen. Dies wird ständig passieren, da die Größe Ihrer Programmfenster vom Benutzer verändert werden kann, und wenn Ihr Layout nicht sehr statisch ist, bedeutet dies, dass sich auch die Größe der Image Controls ändert.

Wie Sie in diesem nächsten Beispiel sehen können, kann die Stretch-Eigenschaft einen großen Unterschied in der Darstellung eines Bildes machen:

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

Es ist nicht gleich zu erkennen, aber alle vier Image-Controls zeigen das gleiche Bild an, aber mit unterschiedlichen Werten für die Stretch-Eigenschaft. So funktionieren die verschiedenen Modi:

• Uniform: Dies ist der Standardmodus. Das Bild wird automatisch so skaliert, dass es in den Bildbereich passt. Das Seitenverhältnis des Bildes bleibt erhalten.
• UniformToFill: Das Bild wird so skaliert, dass es den Bildbereich vollständig ausfüllt. Das Seitenverhältnis des Bildes bleibt erhalten.
• Fill: Das Bild wird so skaliert, dass es dem Bereich des Image-Controls entspricht. Das Seitenverhältnis bleibt möglicherweise NICHT erhalten, da Höhe und Breite des Bildes unabhängig voneinander skaliert werden.
• None: Wenn das Bild kleiner als das Image-Control ist, wird nichts getan. Wenn es größer als das Image-Control ist, wird das Bild einfach zugeschnitten, um in das Image-Control zu passen, so dass nur ein Teil davon sichtbar ist.

Zusammenfassung

Das WPF Image Control macht es Ihnen leicht, ein Bild in Ihrer Anwendung anzuzeigen, sei es von einer externen Quelle, einer eingebetteten Ressource oder vom lokalen Computer, wie in diesem Artikel gezeigt.