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

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