Utiliser des images dans XAML

L'avantage de XAML est la possibilité de combiner des dessins et des photos dans une page web.

Des images peuvent être placées sur une page Web, rien que de banal, grâce au canevas et aux balises XAML, mais, plus original et intéressant, il est possible comme avec un logiciel de dessin évolué, de les utiliser pour remplir des figures géométriques.
On verra d'ailleurs tout au cours de ce tutoriel que XAML à les possibilités d'un langage graphique tel que POV (Persistence Of Vision).
Les formats d'image reconnus sont JPEG et PNG.

Ajouter une image

La balise Image sert à insérer une image dans la page, dont on donne simplement la source en l'assignant à l'attribut Source.

<Image Source="kauai.jpg" />

L'image ci-dessous:

Les attributs d'Image

Height: hauteur.
Width: largeur.
Canvas.Top: position verticale.
Canvas.Left: position horizontale.
Stretch: Adaptation de l'image au conteneur (le canevas ou un autre objet).

None: aucune, les dimensions sont conservées.
Fill: l'image remplit le canevas, les dimensions sont modifiées.
Uniform: le ratio est préservé, pas la taille.
UniformToFill: le ratio est préservé et l'image est coupée si elle est trop grande.

Mettre un cadre autour de l'image

Cela revient à placer l'image dans un objet rectangle de même dimension. Ou à l'utiliser comme texture du rectangle.
Pour cela on utilise la balise ImageBrush, ce que l'on traduira en "brosser avec une image".
On définit l'image source avec la propriété ImageSource (et non plus Source).

<Rectangle Width="160" Height="120"
	Stroke="Black"
	StrokeThicknexx="1"
  <Rectangle.Fill>
    <ImageBrush ImageSource="kauai.jpg" />
  </Rectangle.Fill>
</Rectangle> 

Utilisation comme texture

L'image peut s'utiliser comme texture d'une figure, d'une ellipse par exemple (cela ne fonctionnera pas avec les Polygones).

<Ellipse 
  Width="320" 
  Height="120" 
  Stroke="Black"      
  StrokeThicknexx="1" 
  <Ellipse.Fill> 
    <ImageBrush ImageSource="kauai.jpg" />
  </Ellipse.Fill> 
</Ellipse> 

Obtenir les code sources

• Le code XAML du cadre d'image.
• Le code XAML de texture.
• Une page HTML simple utilisant ce code.