WPF Canvas - Single Pixel Grid

Question

I have a custom WPF Canvas, upon which I would like to show a grid. I do so by overriding the OnRender method on Canvas, and using the DrawingContext drawing functions. IsGridVisible, GridWidth, GridHeight are the number of pixels between each grid line horizontally and vertically respectively.

I also use a ScaleTransform on the Canvas.LayoutTransform property to zoom the Canvas items and as one expects, the grid line thicknesses are multiplied by the ScaleTransform scaling factors as shown in the below image. Is there any way to draw single pixel lines, irrespective of the current Canvas RenderTransform?

    protected override void OnRender(System.Windows.Media.DrawingContext dc)
    {
        base.OnRender(dc);

        if (IsGridVisible)
        {
            // Draw GridLines
            Pen pen = new Pen(new SolidColorBrush(GridColour), 1);
            pen.DashStyle = DashStyles.Dash;

            for (double x = 0; x < this.ActualWidth; x += this.GridWidth)
            {
                dc.DrawLine(pen, new Point(x, 0), new Point(x, this.ActualHeight));
            }

            for (double y = 0; y < this.ActualHeight; y += this.GridHeight)
            {
                dc.DrawLine(pen, new Point(0, y), new Point(this.ActualWidth, y));
            }
        }
    }

alt text http://www.freeimagehosting.net/uploads/f05ad1f602.png

Thanks for the above code. I have been searching for this type of examples from past 2 days. I have implement a custom canvas and drawing the grids as shown. The problem is that it is very slow. When I maximize or resize the window, the performance is really very slow. It hang a bit. Is there any solution to that? — Vinod Maurya

LiamV LiamV · Accepted Answer · 2010-07-17T09:19:50

As the comments to the original post state. The Pen thickness should be set to 1.0/zoom.

WPF Canvas - Single Pixel Grid

1 Answers