Using Images in XAML

The advantage of XAML is the ability to combine pictures and photos on one web page.

Images can be placed on a web page, just corny, thanks to channels and XAML tags, but, more original and interesting, you can, like with the help of advanced drawing software, use them to fill geometric shapes.
In addition, in this tutorial we will see that XAML has the capabilities of a graphical language such as POV (Persistence Of Vision).
The recognized image formats are JPEG and PNG.

Add an image

The Image tag is used to insert an image into a page whose source is simply assigned to the Source attribute.

<Image Source="kauai.jpg" />

In the following figure:

Image attributes

Height: Height.
Width: width.
Canvas.Top: vertical position.
Canvas.Left: horizontal position.
Stretch: Adapts the image to a container (canvas or other object).

No: No, the dimensions are saved.
File: the image fills the channel, the dimensions change.
Uniform: Ratio preserved, not size.
UniformToFill: The ratio is saved and the image is cut if it is too large.

Place frame around image

This is equivalent to placing the image in a rectangular object of the same size. Or use as a rectangle texture.
To do this, use the ImageBrush tag, which translates into an "image brush."
The source frame is defined by the ImageSource property (not the Source).

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

Use as texture

The image can be used as a texture of a figure, such as an ellipse (this will not work with polygons).

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

Obtaining source codes