BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Brushes - Tiled Images

The one hundred and thirty-eighth part of the Windows Presentation Foundation Fundamentals tutorial looks at the first of several tile brushes. These fill an area of a control or shape with a repeating pattern. The first such brush fills an area with a bitmap image.

Tile Brushes

WPF includes three styles of brush that allow you to fill an area with a repeating, tiled pattern. The tile images are repeated horizontally and vertically, with the option to flip the design from one tile to the next. In this article we'll look at the first such brush, which is provided by the ImageBrush class.

When you use an ImageBrush, the repeating tile is a bitmap image. The picture is referenced using an ImageSource object in the ImageSource property, in a similar manner to the Image control's Source property. When using XAML, this is often provided as a path to the bitmap file.

To demonstrate, create a new WPF application in Visual Studio. Name the project, "ImageBrushDemo". Once the solution is ready, save the image below and add the file, "Horse.png", to the root of the WPF project, at the same level as the main window.

Tile Image

Once the image is in the project, replace the XAML of the main window with the code below:

<Window x:Class="ImageBrushDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Brush Demo" Height="200" Width="200">
    <Grid>
        <Ellipse>
            <Ellipse.Fill>
                <ImageBrush ImageSource="Horse.png"/>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
</Window>

The above XAML creates a window that contains an Ellipse. The ellipse is filled using an ImageBrush and the Horse.png image. When you run the program, the window should appear as shown below:

ImageBrush demo window

You can see that when only a source image is specified, no tiling occurs. Instead, the bitmap is stretched to fill the affected area. If you resize the window you will see that the tile is resized and that the aspect ratio changes so that the image matches the size of the ellipse's bounding box.

TileBrush Class

The base class for ImageBrush, and for the other tile brushes that we'll see in later articles in this series, is TileBrush. This class contains the properties that allow you to decide how the image should be tiled. In the remainder of this article we'll see the key properties of TileBrush. We won't repeat these descriptions in the later articles, as the properties work in the same way for the other tiled brushes.

Tiling

To tile the image throughout the filled area, rather than simply stretching the bitmap to fit, you must use two properties. The first of these is TileMode. It is set to a value from the TileMode enumeration and determines how the tiles will be arranged if the image in the brush is smaller than the area to which it will be applied. Five options are available:

  • None. This is the default option. It disables tiling and only displays the image once.
  • Tile. When set to Tile, the image is repeated across and down the filled area. Each tile is identical.
  • FlipX. FlipX spaces the tiled images in the same manner as when using the Tile option. However, every other column of tiles is flipped horizontally.
  • FlipY. Setting the tile mode to FlipY causes alternating rows of tiles to be flipped vertically.
  • FlipXY. This option combines the flipping of FlipX and FlipY. Each alternate row and column is mirrored when compared to its neighbours.

Changing the TileMode by itself does not cause tiling of the image. In addition, you must configure the Viewport property. This defines the starting position for the tiles and the size of each image. The values are defined in a Rectangle but when using XAML you can provide four numbers in a string. The first two numbers set the top-left offset of the first tile. The third and fourth numbers specify the width and height of each tile.

As we've seen with gradient brushes, tile brushes use a co-ordinate system based upon the bounding box of the item being filled. (0,0) is the top-left corner of the bounding box and (1,1) is the bottom-right. You can change the ViewportUnits property to BrushMappingMode.Absolute if you want to use device-independent units (DIU) instead.

Update the ImageBrush XAML as shown below:

<ImageBrush ImageSource="Horse.png" TileMode="Tile" Viewport="0,0 0.25,0.25"/>

In this example the tile mode is set to tile, causing the image to be repeated in a grid without any flipping. The Viewport values mean that the first tile will be positioned at (0,0), which is the top-right of the ellipse's bounding box. The width and height of the tiles are 0.25, meaning that each will be one quarter of the size of the filled bounding box.

Try running the program to see the results. The updated window appears as shown below. Try resizing the window to see the tiles resize.

ImageBrush in tile mode

To demonstrate the flipping options, change the TileMode to FlipXY.

<ImageBrush ImageSource="Horse.png" TileMode="FlipXY" Viewport="0,0 0.25,0.25"/>

The tiles now flip horizontally and vertically from column to column and row to row.

ImageBrush in FlipXY mode

24 February 2015