Il controllo Immagine

Il controllo WPF Image ti permette di mostrare delle immagini nelle tue applicazioni. Si tratta di un controllo molto versatile, con molte opzioni e metodi utili come imparerai in questo articolo. Ma prima di tutto, vediamo l'esempio più semplice su come aggiungere un'immagine in una Finestra.

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

Il risultato sarà qualcosa a simile a questo:

La proprietà Source che abbiamo usato in questo esempio per specificare l'immagine che deve essere visualizzata, è probabilmente la proprietà più importante di questo controllo, quindi cominciamo ad approfondire questo argomento partendo da qui.

La proprietà Source

Come puoi vedere dal nostro primo esempio, la proprietà Source rende facile specificare quale immagine debba essere visualizzata all'interno del controllo Image - in questo esempio specifico, abbiamo usato un'immagine remota, che il controllo Image prenderà e mostrerà appena diventerà visibile. Questo è un buon esempio di quanto versatile sia il controllo Image, ma in molte situazioni, vorrai probabilmente distribuire le immagini con la tua applicazione, invece di farle caricare da una sorgente remota. Questo può essere fatto altrettanto facilmente!

Come probabilmente saprai, puoi aggiungere dei file risorsa al tuo progetto - essi possono esistere all'interno del tuo progetto Visual Studio attuale e appaiono all'interno di Esplora soluzioni esattamente come ogni altro file WPF (Finestre, Controlli Utente ecc). Un esempio importante di file risorsa è un'immagine, che puoi semplicemente copiare all'interno di una cartella predisposta del tuo progetto per averla direttamente inclusa. Essa sarà poi compilata all'interno della tua applicazione (a meno che tu non richieda esplicitamente a VS di non farlo) e può poi essere referenziata attraverso un'URL di tipo formato-risorsa. Quindi, se hai un'immagine chiamata "google.png" dentro la cartella "Images", la sintassi sarà qualcosa del genere:

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

Queste URI, spesso chiamate "Pack URI's", sono un argomento pesante con molti dettagli, ma per il momento, nota soltanto che sono essenzialmente composte di due parti:

• La prima parte (/WpfTutorialSamples;component), dove il nome dell'assembly (WpfTutorialSamples nella mia applicazione) viene combinato con la parola "component"
• La seconda parte, dove viene specificato il percorso relativo della risorsa: /Images/google.png

Usando questa sintassi, puoi aggiungere facilmente delle risorse nella tua applicazione. Per semplificare le cose, il il framework WPF accetterà anche una semplice URL relativa - questo basterà nella maggior parte dei casi, a meno che tu non stia facendo qualcosa di più complicato con la tua applicazione, in merito alle risorse. L'uso di una semplice URL relativa, apparirà qualcosa di simile:

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

Caricare immagini dinamicamente (Code-behind)

Specificare la sorgente dell'immagine direttamente all'interno del tuo XAML funzionerà in molti casi, ma qualche volta avrai bisogno di caricare un'immagine dinamicamente, per esempio sulla base della scelta dell'utente. Questo è possibile all'interno del Codice-Dietro (Code-Behind). Ecco qui come puoi caricare un'immagine che si trova sul computer dell'utente, sulla base della scelta in un 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);
    }
}

Nota come abbia creato una istanza di BitmapImage, a cui passo un oggetto di tipo Uri, sulla base del percorso selezionato nel dialogo. Possiamo usare esattamente la stessa tecnica per caricare un immagine inclusa come risorsa nell'applicazione:

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

Usiamo la stesso percorso relativo che abbiamo usato in uno dei nostri esempi precedenti - solo per essere sicuri passa il parametro UriKind.Relative quando crei l'istanza Uri, così che sappia che il percorso è relativo e non assoluto. Ecco qui il codice XAML, oltre che una schermata, del nostro campione di Codice-dietro:

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

La proprietà Stretch

Dopo la proprietà Source che è importante per ovvie ragioni, penso che la seconda proprietà più importante del controllo Image possa essere la proprietà Stretch. Essa controlla quello che succede quando le dimensioni dell'immagine caricata non corrispondono esattamente alle dimensioni del controllo Image. Questo succederà molto spesso, poiché le dimensioni del tuo Windows può essere controllata dall'utente e a meno che non il tuo layout non sia molto statico, questo significa che anche la dimensione del controllo Image cambierà .

Come puoi vedere nell'esempio sottostante, la proprietà Stretch può fare molta differenza sulla visualizzazione di un'immagine:

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

Può essere difficile da riconoscere, ma tutti e quattro i controlli immagine mostrano la stessa immagine, ma con diversi valori per la proprietà Stretch. Come come funzionano le varie modalità:

• Uniform: Questa è la modalità predefinita. L'immagine verrà automaticamente scalata in modo tale da riempire lo spazio del controllo Image. Il rapporto di forma Aspect ratio dell'immagine verrà mantenuto.
• UniformToFill: L'immagine verrà scalata in modo tale che essa riempa completamente l'area del controllo Image. Il rapporto di forma non verrà preservato.
• Fill: L'immagine verrà scalata in modo da adattarsi allo spazio del controllo Image. Il Rapporto di forma non verrà mantenuto, poiché l'altezza e l'ampiezza dell'immagine verranno scalate indipendentemente.
• None: Se l'immagine è più piccola del controllo Image, non verrà scalata. Se è più grande del controllo Image, allora l'immagine verrà semplicemente tagliata in modo tale da riempire il controllo Image, il che significa che solo parti dell'immagine saranno visibili.

Sommario

IL controllo WPF Image rende facile per te mostrare un'immagine all'interno della tua applicazione, indipendentemente che si tratti di un'immagine remota, una risorsa incorporata o un file del computer, come dimostrato in questo articolo.