Guide pratique pour utiliser l’élément Image

Cet exemple montre comment inclure des images dans une application à l’aide de l’élément Image .

Définir une image

L’exemple suivant montre comment afficher une image de 200 pixels de large. Dans cet exemple XAML (Extensible Application Markup Language), la syntaxe d’attribut et la syntaxe de balise de propriété sont utilisées pour définir l’image. Pour plus d’informations sur la syntaxe des attributs et la syntaxe des propriétés, consultez Vue d’ensemble des propriétés de dépendance. Un BitmapImage est utilisé pour définir les données sources de l’image et est explicitement défini pour l’exemple de syntaxe de balise de propriété. En outre, la largeur du DecodePixelWidth du BitmapImage est définie sur la même largeur que celle de Width du Image. Cela permet de s’assurer que la quantité minimale de mémoire est utilisée pour afficher l’image.

Remarque

En général, si vous souhaitez spécifier la taille d'une image rendue, spécifiez uniquement le Width ou le Height, mais pas les deux. Si vous ne spécifiez qu’une seule valeur, le rapport d’aspect de l’image est conservé. Dans le cas contraire, l’image peut apparaître de manière inattendue étirée ou warpée. Pour contrôler le comportement d'étirement de l'image, utilisez les propriétés Stretch et StretchDirection.

Remarque

Lorsque vous spécifiez la taille d'une image avec l'une des balises Width ou Height, vous devez également définir DecodePixelWidth ou DecodePixelHeight à la même taille respective.

La Stretch propriété détermine la façon dont la source d’image est étirée pour remplir l’élément image. Pour plus d’informations, consultez l’énumération Stretch .

<!-- Simple image rendering. However, rendering an image this way may not
     result in the best use of application memory. See markup below which
     creates the same end result but using less memory. -->
<Image Width="200" 
Source="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg"/>

<Image Width="200">
  <Image.Source>
    <!-- To save significant application memory, set the DecodePixelWidth or  
     DecodePixelHeight of the BitmapImage value of the image source to the desired 
     height and width of the rendered image. If you don't do this, the application will 
     cache the image as though it were rendered as its normal size rather than just 
     the size that is displayed. -->
    <!-- Note: In order to preserve aspect ratio, only set either DecodePixelWidth
         or DecodePixelHeight but not both. -->
    <BitmapImage DecodePixelWidth="200"  
     UriSource="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg" />
  </Image.Source>
</Image>

Afficher une image

L’exemple suivant montre comment afficher une image de 200 pixels à l’aide du code.

Remarque

La définition des propriétés BitmapImage doit être effectuée au sein d’un bloc BeginInit et EndInit.

// Create Image Element
Image myImage = new Image();
myImage.Width = 200;

// Create source
BitmapImage myBitmapImage = new BitmapImage();

// BitmapImage.UriSource must be in a BeginInit/EndInit block
myBitmapImage.BeginInit();
myBitmapImage.UriSource = new Uri(@"C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg");

// To save significant application memory, set the DecodePixelWidth or
// DecodePixelHeight of the BitmapImage value of the image source to the desired
// height or width of the rendered image. If you don't do this, the application will
// cache the image as though it were rendered as its normal size rather than just
// the size that is displayed.
// Note: In order to preserve aspect ratio, set DecodePixelWidth
// or DecodePixelHeight but not both.
myBitmapImage.DecodePixelWidth = 200;
myBitmapImage.EndInit();
//set image source
myImage.Source = myBitmapImage;

' Create Image Element
Dim myImage As New Image()
myImage.Width = 200

' Create source
Dim myBitmapImage As New BitmapImage()

' BitmapImage.UriSource must be in a BeginInit/EndInit block
myBitmapImage.BeginInit()
myBitmapImage.UriSource = New Uri("C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg")

' To save significant application memory, set the DecodePixelWidth or  
' DecodePixelHeight of the BitmapImage value of the image source to the desired 
' height or width of the rendered image. If you don't do this, the application will 
' cache the image as though it were rendered as its normal size rather than just 
' the size that is displayed.
' Note: In order to preserve aspect ratio, set DecodePixelWidth
' or DecodePixelHeight but not both.
myBitmapImage.DecodePixelWidth = 200
myBitmapImage.EndInit()
'set image source
myImage.Source = myBitmapImage

Voir aussi

• Vue d’ensemble de l’imagerie