WPF Drawing Brush

Drawing Brush

The Drawing object in WPF represents a 2-D drawing that include shapes, text, video, image and other drawings. A Drawing Brush represented by the DrawingBrush object paints a surface with a drawing. The DrawingGroup, GeometryDrawing, GlyphRunDrawing, ImageDrawing, and VideoDrawing classes are inherited from the Drawing class. That means we can create any of these objects to be painted by a DrawingBrush.

Creating a Drawing Brush

The DrawingBrush element in XAML creates a drawing brush.

The following code snippet creates a drawing brush and sets the Drawing property. The Drawing property can be an element inherited from the Drawing such as a GeometryDrawing.

<DrawingBrush >

<DrawingBrush.Drawing />

</DrawingBrush>

We can fill a shape with a drawing brush by setting a shape's Fill property to the image brush. The code snippet in Listing 23 creates a rectangle shape sets the Fill property to a DrawingBrush.

<Grid Name="LayoutRoot">

    <Rectangle Width="200" Height="200" Stroke="Black" StrokeThickness="0">

        <Rectangle.Fill>

            <DrawingBrush >

                <DrawingBrush.Drawing>

                    <GeometryDrawing Brush="Yellow">

                        <GeometryDrawing.Geometry>

                            <GeometryGroup>

                                <RectangleGeometry Rect="50,25,25,25" />

                                <RectangleGeometry Rect="25,50,25,25" />

                            </GeometryGroup>

                        </GeometryDrawing.Geometry>

                        <GeometryDrawing.Pen>

                            <Pen Thickness="5">

                                <Pen.Brush>

                                    <LinearGradientBrush>

                                        <GradientStop Offset="0.0" Color="Blue" />

                                        <GradientStop Offset="1.0" Color="Black" />

                                    </LinearGradientBrush>

                                </Pen.Brush>

                            </Pen>

                        </GeometryDrawing.Pen>

                    </GeometryDrawing>

                </DrawingBrush.Drawing>

            </DrawingBrush>

        </Rectangle.Fill>

    </Rectangle>

</Grid>

Listing 23

The output looks like Figure 27.

Figure 27. A shape filled with a Drawing brush

The Viewport property determines the size and position of the base tile when the TileMode of a DrawingBrush is not set to None, and the ViewportUnits property determines whether the Viewport is specified using absolute or relative coordinates. If the coordinates are relative, they are relative to the size of the output area. The point (0,0) represents the top left corner of the output area, and (1,1) represents the bottom right corner of the output area. To specify that the Viewport property uses absolute coordinates, set the ViewportUnits property to Absolute.

The TileMode property of DrawingBrush represents the tile mode that is a type if a TileMode enumeration. The TileMode enumeration has Tile, FlipX, FlipY, FlipXY, and None values.

The following code snippet sets the Viewport and TileMode properties of a DrawingBrush.

<DrawingBrush Viewport="0,0,0.25, 0.25" TileMode="Tile">

Figure 28, 29, and 30 show the tile modes values Tile, FilpXY, and FlipX.

 

Figure 28. A shape filled with a Drawing brush in Tile mode

 

Figure 29. A shape filled with a Drawing brush with TileMode as FlipXY

 

Figure 30. A shape filled with a Drawing brush with TileMode as FlipX

One of the key examples of tile mode is create a chess board like image that has a repeating rectangle with black and white background colors. The CreateARectangleWithDrawingBrush method listed in Listing 24 draws a chess board like rectangle with a drawing brush dynamically.

private void CreateARectangleWithDrawingBrush()

{

    // Create a background recntangle

    Rectangle chessBoard = new Rectangle();

    chessBoard.Width = 300;

    chessBoard.Height = 300;

 

    // Create a DrawingBrush

    DrawingBrush blackBrush = new DrawingBrush();

    // Create a Geometry with white background

    GeometryDrawing backgroundSquare =

        new GeometryDrawing(

            Brushes.White,

            null,

            new RectangleGeometry(new Rect(0, 0, 400, 400)));

    // Create a GeometryGroup that will be added to Geometry

    GeometryGroup gGroup = new GeometryGroup();

    gGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 200, 200)));

    gGroup.Children.Add(new RectangleGeometry(new Rect(200, 200, 200, 200)));

    // Create a GeomertyDrawing

    GeometryDrawing checkers = new GeometryDrawing(new SolidColorBrush(Colors.Black), null, gGroup);

   

    DrawingGroup checkersDrawingGroup = new DrawingGroup();

    checkersDrawingGroup.Children.Add(backgroundSquare);

    checkersDrawingGroup.Children.Add(checkers);

 

    blackBrush.Drawing = checkersDrawingGroup;

 

    // Set Viewport and TimeMode

    blackBrush.Viewport = new Rect(0, 0, 0.25, 0.25);

    blackBrush.TileMode = TileMode.Tile;

 

    // Fill rectangle with a DrawingBrush

    chessBoard.Fill = blackBrush;

 

    LayoutRoot.Children.Add(chessBoard);

}

Listing 24

The output of Listing 24 looks like Figure 31.

Figure 31. A chess board