.NET 4.0+

WPF Brushes - Tiled Images

by Richard Carr, published at http://www.blackwasp.co.uk/ImageBrush.aspx

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.

Viewbox

The TileBrush class's Viewbox property allows you to determine which part of the image will be used within a tile. You do not have to use the entire image. The property is set to a rectangle that defines an offset and a size. In XAML, four numeric values determine offsets that define the left and top of the image section to tile, and the width and height of the section.

Again, the co-ordinate system can be relative to a bounding box or defined using DIUs. If you use the default option of relative to bounding box, remember that this is the bounding box of the image, not of the item being filled. You can switch modes with the ViewboxUnits property.

Update the ImageBrush XAML to set a Viewbox. In this case we are using offsets of one quarter of the tile size and a width and height of half a tile. This means that the central part of the image will be used as the tile.

<ImageBrush ImageSource="Horse.png" TileMode="Tile"
            Viewport="0.1,0.2 0.25,0.25"
            Viewbox="0.25,0.25 0.5,0.5"/>

The results are shown below. Note that each tile shows a part of the body of the horse image.

Stretch Modes

As with a basic Image control, you can change the stretch mode for tiled images. This does not affect the tile sizes. It changes the way that the image is resized within each tile. Four stretch options are available, each defined in the Stretch enumeration.

• None. The image size for each tile matches that of the original file and is never resized. This can cause empty areas or cropping of the image.
• Uniform. The image is resized proportionally to retain the aspect ratio. It will fill the tile either horizontally or vertically, with empty areas if necessary.
• UniformToFill. This option is similar to Uniform. The height and width are increased or decreased by the same proportion to fill the tiles. With this setting, the entire tile is filled with no empty areas. If necessary, the image is cropped.
• Fill. The Fill option stretches the image to fill each tile completely without any cropping. The aspect ratio of the image is not preserved, so the image can appear stretched. This is the default option.

Run the program again and resize the window. You will see that the images in the tiles stretch without maintaining the aspect ratio of the underlying bitmap. Stop the program and change the ImageBrush to use Uniform mode:

<ImageBrush ImageSource="Horse.png" TileMode="Tile"
            Viewport="0.1,0.2 0.25,0.25"
            Viewbox="0.25,0.25 0.5,0.5"
            Stretch="Uniform"/>

Run the program and resize the window again. This time the tiles will retain the correct aspect ratio but sometimes there will be unfilled areas to the sides of, or above and below, the image.

Alignment

If the Viewbox and Viewport are different sizes and the Stretch property is set to None, or when using one of the uniform stretch options when the Viewbox and Viewport have different aspect ratios, you can add extra configuration options to control the alignment of the image within the tiles. This is achieved with two properties.

AlignmentX controls the horizontal alignment of the image within the tiles. You can set it to Left, Right or Center. AlignmentY allows similar control of the vertical positioning. The options are Top, Bottom or Center.

To demonstrate the final two properties, let's change the ImageBrush again. The following XAML sets the Stretch so that the image will not be resized. It also specifies that the bitmap is aligned to the top-left of each tile.

<ImageBrush ImageSource="Horse.png" TileMode="Tile"
            Viewport="0,0 0.25,0.25"
            Stretch="None" AlignmentX="Left" AlignmentY="Top"/>

The resultant fill shows the top-left of the image in each tile.

Try changing the alignment to Bottom and Right, as follows:

<ImageBrush ImageSource="Horse.png" TileMode="Tile"
            Viewport="0,0 0.25,0.25"
            Stretch="None" AlignmentX="Right" AlignmentY="Bottom"/>

Now the image is aligned to the bottom-right of every tile.