Creating Diagonal Pattern in WPF

A DrawingBrush would be much simpler than a VisualBrush.

In addition to the central diagonal line, this one draws two additional lines (which may of course be shorter) to cover the top right and bottom left corners of the Brush tile:

<DrawingBrush x:Key="HatchBrush" TileMode="Tile"
              Viewport="0,0,30,30" ViewportUnits="Absolute"
              Viewbox="0,0,30,30" ViewboxUnits="Absolute">
    <DrawingBrush.Drawing>
        <GeometryDrawing>
            <GeometryDrawing.Pen>
                <Pen Brush="Black" Thickness="5"/>
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
                <Geometry>M0,0 L30,30 M15,-15 L45,15 M-15,15 L15,45</Geometry>
            </GeometryDrawing.Geometry>
        </GeometryDrawing>
    </DrawingBrush.Drawing>
</DrawingBrush>

As shown in the answer given by Balázs, you may also set the Brush’s Transform property, and use e.g. a single vertical LineGeometry:

<DrawingBrush x:Key="HatchBrush" TileMode="Tile"
              Viewport="0,0,30,30" ViewportUnits="Absolute"
              Viewbox="0,0,30,30" ViewboxUnits="Absolute">
    <DrawingBrush.Transform>
        <RotateTransform Angle="45"/>
    </DrawingBrush.Transform>
    <DrawingBrush.Drawing>
        <GeometryDrawing>
            <GeometryDrawing.Pen>
                <Pen Brush="Black" Thickness="5"/>
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
                <LineGeometry StartPoint="0,15" EndPoint="30,15"/>
            </GeometryDrawing.Geometry>
        </GeometryDrawing>
    </DrawingBrush.Drawing>
</DrawingBrush>

Leave a Comment