WPF - How can I make a brush that paints graph-paper-like squares?

Question

How might I create a brush that paints a regular, repeated grid of 1-unit thick lines spaced evenly in both the horizontal and vertical axes? Imagine graph paper, if you will.

Ideally the solution would allow control over the brushes used for the lines and the background (the regions within the squares). In this way the background could be transparent, so that the grid could serve as an overlay.

EDIT Here is an image that shows the result of Tom's answer below:

For this example a grid was used to composite three layers to show that the grid is truly transparent.

score 27 · Accepted Answer · edited Apr 30 '09 at 21:15

27

from http://msdn.microsoft.com/en-us/library/aa480159.aspx

<DrawingBrush Viewport="0,0,10,10" 
              ViewportUnits="Absolute"
              TileMode="Tile">
  <DrawingBrush.Drawing>
    <DrawingGroup>
      <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Green" />
      <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="Green" />
    </DrawingGroup>
  </DrawingBrush.Drawing>
</DrawingBrush>

edited Apr 30 '09 at 21:15

Drew Noakes

300,895
165
679
742

answered Apr 30 '09 at 17:56

Thomas

3,348
4
35
49

Thank you for your answer -- the only one to actually produce a graph-paper-like grid, as asked for. – Drew Noakes Apr 30 '09 at 21:14

score 2 · Answer 2 · answered Apr 30 '09 at 15:45

Use a DrawingBrush. A Drawing can contain shapes, images, text, and media.

The following example uses a DrawingBrush to paint the Fill of a Rectangle.

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a DrawingBrush and use it to
// paint the rectangle.
DrawingBrush myBrush = new DrawingBrush();

GeometryDrawing backgroundSquare =
    new GeometryDrawing(
        Brushes.White,
        null,
        new RectangleGeometry(new Rect(0, 0, 100, 100)));

GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));

LinearGradientBrush checkerBrush = new LinearGradientBrush();
checkerBrush.GradientStops.Add(new GradientStop(Colors.Black, 0.0));
checkerBrush.GradientStops.Add(new GradientStop(Colors.Gray, 1.0));

GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);

DrawingGroup checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(backgroundSquare);
checkersDrawingGroup.Children.Add(checkers);

myBrush.Drawing = checkersDrawingGroup;
myBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
myBrush.TileMode = TileMode.Tile;

exampleRectangle.Fill = myBrush;

Source: MSDN: WPF Brushes Overview

Actually this creates a checker board (btw I didn't down-vote you). — Drew Noakes, Apr 30 '09 at 16:02

score 2 · Answer 3 · answered Apr 30 '09 at 15:47

2

You can do this in XAML using a VisualBrush. As a sample to give you a starting point, here is a blog post that uses VisualBrush to create a hatched brush. It's very close to a grid - and would be fairly easy to convert across.

answered Apr 30 '09 at 15:47

Reed Copsey

554,122
78
1,158
1,373

score 1 · Answer 4 · edited Feb 14 '10 at 05:28

1

I used a 16x16 bitmap with the left and bottom edges black. Then in my window, I set the background to use that, tiled. Here's the XAML (Slightly altered to show up).

<Window.Background>
  <ImageBrush ImageSource="/GraphPaper;component/Background.bmp"
              Stretch="None" TileMode="Tile"
              Viewport="0,0,16,16" ViewportUnits="Absolute" />
</Window.Background>

edited Feb 14 '10 at 05:28

Drew Noakes

300,895
165
679
742

answered Feb 12 '10 at 20:51

Interesting approach. I don't believe that .bmp files can have alpha channels, so the transparency demonstrated in the question is not possible. Also I am not certain, but I think the performance of using an ImageBrush would be worse than drawing geometry as it creates intermediate render targets that involve a lot of memory copying. Thanks for the answer, and (judging by your rep) welcome to Stack Overflow :) – Drew Noakes Feb 14 '10 at 06:32

WPF - How can I make a brush that paints graph-paper-like squares?

4 Answers4

Linked