XAML ImageBrush

An image brush uses an image as fill color to fill graphics objects such as a recntagle, ellipse, and path. The <ImageBrush/> represents the image brush in XAML.  The BitmapSource property represents the image used to fill the brush.

The following code creates a brush with sunset.jpg. Once a brush is created, you can use it to fill graphics objects.

<ImageBrush BitmapSource="C:\sunset.jpg" />

For example, the following code fills a rectangle with an ImageBrush.

<Window xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
  xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">

  <Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="3"> 
      <Rectangle.Fill>
         <ImageBrush BitmapSource="C:\sunset.jpg" />
      </Rectangle.Fill>
  </Rectangle>

</Window>

The output looks like Figure 1.

Image 1. Rectangle filled with image brush.

The Stretch Enumeration

The Stretch enumeration specifies the stretch of the image. The Stretch attribute of ImageBrush is used to set the stretch of the brush. It has four values - None, Fill, Uniform, and UniformToFill.

None does not stretch image. The following code uses None stretch.

<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="3"> 
 <Rectangle.Fill>
         <ImageBrush Stretch="None" BitmapSource="C:\ButterFly.jpg" />
 </Rectangle.Fill>
</Rectangle>

The output is a rectangle filled with original image size.

Fill fill image in the whole brush. The following code uses Fill stretch.

<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="3"> 
 <Rectangle.Fill>
         <ImageBrush Stretch="Fill" BitmapSource="C:\ButterFly.jpg" />
 </Rectangle.Fill>
</Rectangle>

The output is a rectangle fully filled with the image.

Uniform fills brush with the native aspect ration. The following code uses Uniform stretch.

<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="3"> 
 <Rectangle.Fill>
         <ImageBrush Stretch="Uniform" BitmapSource="C:\ButterFly.jpg" />
 </Rectangle.Fill>
</Rectangle>

The output is a rectangle filled with image but kept the original aspect ratio.

UniformToFill fills brush with the native aspect ration. The following code uses UniformToStretch stretch.

<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="3"> 
 <Rectangle.Fill>
         <ImageBrush Stretch="UniformToFill" BitmapSource="C:\ButterFly.jpg" />
 </Rectangle.Fill>
</Rectangle>

The output is a rectangle filled with but also kept the original aspect ratio.