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