Using images in XAML and making textures

Images can be placed on a Web page, this is banal, thanks to Canvas and XAML tags, but, more original and interesting, it is possible to build them by filling geometrical shapes.
We will see all during this tutorial that XAML has features of a graphic language such as the one in POV (Persistence Of Vision).
The recognized formats of image are JPEG and PNG.

Adding an image

The Image tag is used to insert an image into the page, and one gives simply its location by assigning it to the Source attribute.

<Image Source= "kauai.jpg"/>

See the image below:

Attributes of Image

• Height: the height of the display.
• Width: the width of the display.
• Canvas.Top: vertical position.
• Canvas.Left: horizontal position.
• Stretch: Adaptation of the image to the container (the canvas or another object). Possible values are:
• None: dimensions are preserved.
• Fill: the image fills the Canvas, dimensions are modified.
• Uniform: the ratio is preserved, not the size.
• UniformToFill: the ratio is preserved and the image is clipped when it is too large.
  

Drawing a border around the image

This is the same as placing the image in a rectangle of the same dimension.
For that, ImageBrush tag is used.
The image file is assigend with the ImageSource property (and not the Source property in this case).

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

Using as texture

The image can be used like texture of a shape, for an ellipse for example (that will not work with Polygons).

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

Getting the source code

• XAML code of the image with border.
• XAML code of texture.
• A simple HTML page using this code.