Le contrôle Image

Le contrôle WPF Image vous permettra d'afficher des images dans votre application. C'est un contrôle très polyvalent, avec de nombreuses options et méthodes, comme vous l'apprendrez dans cet article. Mais d'abord, voyons un exemple on ne peut plus simple qui consiste à inclure une image dans une fenêtre :

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

Le résultat ressemblera à:

La propriété Source que l'on a utilisé dans cet exemple pour spécifier l'image à afficher, est probablement la propriété la plus importante de ce contrôle, nous allons donc plonger en premier dans ce sujet.

La propriété Source

Comme vous pouvez le voir dans notre premier exemple, la propriété Source facilite la spécification de l'image à afficher dans la commande Image - dans cet exemple spécifique, nous avons utilisé une image distante, que la commande Image récupère et affiche automatiquement dès qu'elle devient visible. C'est un bel exemple de la polyvalence de la commande Image, mais dans beaucoup de situations, vous voudrez probablement regrouper les images avec votre application, au lieu de les charger depuis une source distante. Cela peut se faire tout aussi facilement !

Comme vous le savez probablement, vous pouvez ajouter des fichiers de ressources à votre projet - ils peuvent exister dans votre projet Visual Studio actuel et être vus dans l'explorateur de solutions comme n'importe quel autre fichier lié à WPF (Windows, Contrôles utilisateur, etc.). Un exemple pertinent de fichier ressource est une image, que vous pouvez simplement copier dans un dossier pertinent de votre projet, pour l'inclure. Il sera ensuite compilé dans votre application (sauf si vous demandez spécifiquement à VS de ne pas le faire) et vous pourrez ensuite y accéder en utilisant le format URL des ressources. Ainsi, si vous avez une image appelée "google.png" dans un dossier appelé "Images", la syntaxe pourrait ressembler à ceci :

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

Ces URI, souvent désignées comme "paquets URI", constituent un grand sujet avec davantage de détails, mais pour l'instant, notez simplement qu'elles se composent principalement de deux parties :

• La première partie (/WpfTutorialSamples;component), où le nom de l'assembly (WpfTutorialSamples dans mon application) est associée au mot "component"
• La seconde partie, où le chemin relatif de la ressource est spécifié : /Images/google.png

Par cette syntaxe, vous pouvez facilement référencer des ressources incluses dans votre application. Pour simplifier les choses, le framework WPF acceptera aussi une URL relative simple - ceci suffira dans la plupart des cas, à moins que vous ne fassiez quelque chose de plus compliqué en lien avec vos ressources. En utilisant une URL relative simple, ceci donnerait :

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

Charger dynamiquement les images (Code-behind)

Spécifier la source de l'image directement dans votre XAML se fera dans beaucoup de situations, mais vous avez parfois besoin de charger une image dynamiquement, par exemple basé sur un choix utilisateur. Ceci est réalisable depuis le Code-behind. Voici comment vous pouvez charger une image trouvée dans l'ordinateur, issu de leur sélection dans une boîte d'ouverture de fichier (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);
    }
}

Notez la façon dont je crée une instance de BitmapImage, dans laquelle je fournis un objet Uri, basé sur le chemin sélectionné dans la fenêtre de dialogue. On peut utiliser la même technique pour charger une image incluse comme une ressource de l'application :

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

Nous utilisons le même chemin relatif que celui que nous avons utilisé dans l'un des exemples précédents - assurez-vous simplement de passer dans la valeur UriKind.Relative lorsque vous créez l'instance Uri, afin qu'il sache que le chemin fourni n'est pas un chemin absolu. Voici le code XAML, ainsi qu'une capture d'écran, de notre échantillon 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>

La propriété Stretch

Après la propriété Source, qui est importante pour des raisons évidentes, je pense que la seconde propriété la plus intéressante du contrôle Image est la propriété Stretch. Il contrôle ce qui arrive lorsque les dimensions de l'image chargée ne coïncident pas avec les dimensions du contrôle Image. Ceci arrivera tout le temps ; puisque la taille de votre fenêtre peut être contrôlée par l'utilisateur et à moins que votre page soit très statique, ceci implique que la taille du contrôle Image changera également.

Comme vous le voyez dans l'exemple ci-dessous, la propriété Stretch peut avoir un impact sur la manière d'afficher une image :

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

Cela peut être un peu dur à expliquer, mais les quatre contrôles Image affichent la même image mais avec des valeurs différentes pour la propriété Stretch. Voici comment fonctionnent les divers modes :

• Uniform : c'est le mode par défaut. L'image sera automatiquement mise à l'échelle pour qu'elle rentre dans la zone Image. Le Aspect ratio de l'image sera préservé.
• UniformToFill : l'image sera mise à l'échelle pour qu'elle remplisse complètement la zone Image. Le ratio Aspect de l'image sera préservé.
• Fill : l'image sera mise à l'échelle pour coïncider avec la zone du contrôle Image. Le ratio Aspect a peu de chances d'être préservé, car la hauteur et la largeur de l'image sont mises à l'échelle indépendamment.
• None : si l'image est plus petite que le contrôle Image, rien n'est fait. Si elle est plus grande, l'image sera simplement découpée pour qu'elle rentre dans le contrôle Image, ce qui n'en affichera qu'une partie.

Résumé

Le contrôle WPF Image vous facilite l'affichage d'une image dans une application, qu'elle vienne d'une source distante, une ressource embarquée ou de l'ordinateur local, comme illustré dans l'article.