.NET 4.0+

WPF Brushes - Tiled Drawings

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

The one hundred and fortieth part of the Windows Presentation Foundation Fundamentals tutorial looks at the last of the three tile brushes. The DrawingBrush class tiles any drawing object and uses the result to fill shapes or areas of controls.

Tile Brushes

In the previous two articles we've seen the ImageBrush and VisualBrush classes. These allow you to create complex fill effects using bitmap images or rendered visuals. They can be tiled and used to fill elements of controls or shapes. In this article we'll look at the third tile brush, DrawingBrush. This allows you to fill elements using a tiled drawing.

We have not looked at drawings in depth in the WPF tutorial but we have seen shapes and paths. We'll use a path geometry within a drawing for the examples in this article. You can also use text, images or video clips in a drawing and, therefore, in a drawing brush.

To demonstrate, create a new WPF application in Visual Studio. Name the project, "DrawingBrushDemo". Once the solution is prepared, replace the XAML of the main window with the code below:

<Window x:Class="DrawingBrushDemo.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>
                <DrawingBrush TileMode="Tile" Viewport="0,0 0.25,0.25">
                    <DrawingBrush.Drawing>
                        <GeometryDrawing Brush="Red">
                            <GeometryDrawing.Geometry>
                                <PathGeometry>
                                    <PathGeometry.Figures>
                                        <PathFigure StartPoint="20,80" IsClosed="True">
                                            <PolyLineSegment
                                                Points="60,60 90,75 75,45 95,5 115,45 100,75
                                                        130,60 170,80 130,100 100,85 115,115
                                                        95,155 75,115 90,85 60,100"/>
                                        </PathFigure>
                                    </PathGeometry.Figures>
                                </PathGeometry>
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
</Window>

You can see that the window includes an Ellipse, which is filled using a DrawingBrush. The drawing to tile is set in the brush's Drawing property. In the code, we've used a GeometryDrawing. The content can be set to any geometry, in this case a path containing a PolyLineSegment that we have seen in an earlier article. The GeometryDrawing class includes a Brush property, which sets the fill brush for the drawing.

The resultant window appears as shown below. NB: You could create a similar effect using an ImageBrush with a bitmap image. However, the drawing uses lines that can be scaled to be much larger, without the pixellation associated with bitmaps.

Pens

When we created shapes and paths in earlier articles, we applied outlines to the shapes using properties such as Stroke, StrokeThickness and DashStyle. When using a drawing, and with many other WPF classes, these values are combined in a Pen. With a pen, you can create all of the line effects that we've already seen.

To apply a Pen to a drawing, you need to set the Pen property using property element syntax. To demonstrate, let's add a thin black border to the shape that we've used for tiling. Modify the XAML for the GeometryDrawing element, as follows:

<GeometryDrawing Brush="Red">
<GeometryDrawing.Pen>
    <Pen Brush="Black" Thickness="4"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
    <PathGeometry>
        <PathGeometry.Figures>
            <PathFigure StartPoint="20,80" IsClosed="True">
                <PolyLineSegment
                    Points="60,60 90,75 75,45 95,5 115,45 100,75
                            130,60 170,80 130,100 100,85 115,115
                            95,155 75,115 90,85 60,100"/>
            </PathFigure>
        </PathGeometry.Figures>
    </PathGeometry>
</GeometryDrawing.Geometry>

Note the addition of the Pen, which specifies a black brush with a thickness of four device-independent units. This thickness will be scaled according to the tile size, so appears much thinner in the end result, shown below: