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>

You could use VisualBrush.Transform:

<VisualBrush x:Key="HatchBrushnew" 
  TileMode="Tile"
  Viewport="0,0,30,30" 
  ViewportUnits="Absolute" 
  Viewbox="0,0,30,30"    
  ViewboxUnits="Absolute">
    <VisualBrush.Transform>
      <RotateTransform Angle="135" CenterX=".5" CenterY=".5" />
    </VisualBrush.Transform>
    <VisualBrush.Visual>
      <Canvas>
        <Path  Stroke="Gray" StrokeThickness="0.1cm" >
          <Path.Data>
            <LineGeometry StartPoint="15,0" EndPoint="15,30" />
          </Path.Data>
        </Path>
      </Canvas>
    </VisualBrush.Visual>
  </VisualBrush>

And the result is:

enter image description here

This appears a bit more sparse, you could play around with the values of VisualBrush.Viewport to fix that. Since we are rotating 135 degrees, the spacing is in fact sqrt(2) times larger than the original one, you could use it as a hint.

Tags:

C#

Wpf