c# - How to draw gridline on WPF Canvas?

Question

I need to build a function drawing gridline on the canvas in WPF:

void DrawGridLine(double startX, double startY, double stepX, double stepY, 
                  double slop, double width, double height)
{
    // How to implement draw gridline here?
}

How would I go about this?

Answer 1

You don't really have to "draw" anything with WPF. If you want to draw lines, use the appropriate geometries to draw them.

In your case it could be simple really. You're just drawing a grid so you could just create a DrawingBrush to draw a single grid square and tile it to fill in the rest. To draw your tile, you could think of it as drawing X's. So to have a 20x10 tile (which corresponds to stepX and stepY):

(p.s., the slope slop is redundant since you already have the horizontal and vertical step sizes)

<DrawingBrush x:Key="GridTile" Stretch="None" TileMode="Tile"
              Viewport="0,0 20,10" ViewportUnits="Absolute">
                  <!-- ^^^^^^^^^^^ set the size of the tile-->
    <DrawingBrush.Drawing>
        <GeometryDrawing>
            <GeometryDrawing.Geometry>
                <!-- draw a single X -->
                <GeometryGroup>
                    <!-- top-left to bottom-right -->
                    <LineGeometry StartPoint="0,0" EndPoint="20,10" />

                    <!-- bottom-left to top-right -->
                    <LineGeometry StartPoint="0,10" EndPoint="20,0" />
                </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Pen>
                <!-- set color and thickness of lines -->
                <Pen Thickness="1" Brush="Black" />
            </GeometryDrawing.Pen>
        </GeometryDrawing>
    </DrawingBrush.Drawing>
</DrawingBrush>

That takes care of drawing the lines. Now to be able to draw them offset in your grid from the edges, you need to have another brush where you draw a rectangle with the desired dimensions, filled with your tiles. So to have a starting position of (30, 45) (corresponding to startX and startY) with the width and height, 130x120:

<DrawingBrush x:Key="OffsetGrid" Stretch="None" AlignmentX="Left" AlignmentY="Top">
    <DrawingBrush.Transform>
        <!-- set the left and top offsets -->
        <TranslateTransform X="30" Y="45" />
    </DrawingBrush.Transform>
    <DrawingBrush.Drawing>
        <GeometryDrawing Brush="{StaticResource GridTile}" >
            <GeometryDrawing.Geometry>
                <!-- set the width and height filled with the tile from the origin -->
                <RectangleGeometry Rect="0,0 130,120" />
            </GeometryDrawing.Geometry>
        </GeometryDrawing>
    </DrawingBrush.Drawing>
</DrawingBrush>

Then finally to use it, just set it as the background of your grid (or other panel):

<Grid Background="{StaticResource OffsetGrid}">
    <!-- ... -->
</Grid>

Here's how it ends up looking like:

---

If you want to generate the brush dynamically, here's an equivalent function based on the above XAML:

static Brush CreateGridBrush(Rect bounds, Size tileSize)
{
    var gridColor = Brushes.Black;
    var gridThickness = 1.0;
    var tileRect = new Rect(tileSize);

    var gridTile = new DrawingBrush
    {
        Stretch = Stretch.None,
        TileMode = TileMode.Tile,
        Viewport = tileRect,
        ViewportUnits = BrushMappingMode.Absolute,
        Drawing = new GeometryDrawing
        {
            Pen = new Pen(gridColor, gridThickness),
            Geometry = new GeometryGroup
            {
                Children = new GeometryCollection
                {
                    new LineGeometry(tileRect.TopLeft, tileRect.BottomRight),
                    new LineGeometry(tileRect.BottomLeft, tileRect.TopRight)
                }
            }
        }
    };

    var offsetGrid = new DrawingBrush
    {
        Stretch = Stretch.None,
        AlignmentX = AlignmentX.Left,
        AlignmentY = AlignmentY.Top,
        Transform = new TranslateTransform(bounds.Left, bounds.Top),
        Drawing = new GeometryDrawing
        {
            Geometry = new RectangleGeometry(new Rect(bounds.Size)),
            Brush = gridTile
        }
    };

    return offsetGrid;
}