WPF pixel gridlines

Question

I'm trying to draw a grid on my canvas in which:

The lines are always one pixel thick
The size of the square tile are expressed in pixel or in other words the distance between each horizontal and vertical lines is in pixels and maybe binded to the code behind so that I can change it at run time.

This is my first attempt, but maybe I'm using the wrong controls.

<Canvas  Panel.ZIndex="0"  x:Name="TileCanvas">
    <Grid Panel.ZIndex="5">
        <Rectangle Width="{Binding ElementName=TileCanvas, Path=ActualWidth}" Height="{Binding ElementName=TileCanvas, Path=ActualHeight}" 
            Stroke="Black" StrokeThickness="0"> 

            <Rectangle.Fill>
                <DrawingBrush ViewportUnits="Absolute" TileMode="Tile">
                    <DrawingBrush.Viewport>
                        <MultiBinding Converter="{StaticResource RectConverter}">
                            <...>
                        </MultiBinding>
                    </DrawingBrush.Viewport>
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Green" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
                            <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="Green" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                    <DrawingBrush.Transform>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                    </DrawingBrush.Transform>
                </DrawingBrush>

            </Rectangle.Fill>

        </Rectangle>
    </Grid>

This solution allows me to vary the size of each tile, but:

I didn't find the way to fix the line thickness to one pixel
When I change the DrawingBrush.Viewport with the converter I do enlarge the tile (Great!) but the thickness of the lines increase (boo).

When you need to transform a shape, but keep its stroke thickness, don't use a Brush Transform or a UIElement RenderTransform. Set the Transform property of a Geometry instead. — Clemens, May 19 '18 at 11:01
There is not much to elaborate on. While a Brush Transform or a RenderTransform transforms the whole drawing, transforming a Geometry changes only the shape without changing the stroke of a drawing that uses the Geometry. Try putting a Geometry in the Data property of a Path element, then assign a Transform to the Geometry's Transform property. There is comprehensive online documentation. — Clemens, May 19 '18 at 17:36

score 1 · Accepted Answer · answered Jun 15 '18 at 11:41

I had a very similar problem. You can use a single geometry and if you want to avoid thickness increase\decrease you have to express the thickness in terms of the tile width by a ratio like thickness = 1/tileWidth. If you change that size of your tile with a WPF control you can use a converter to update the thickness accordingly.

<GeometryDrawing Geometry="M10,0 L10,10 0,10 10,10 10,0Z"  Brush="Green" RenderOptions.BitmapScalingMode="NearestNeighbor"/>
    <GeometryDrawing.Pen>
        <Pen Thickness="{Binding ElementName=[TILE SIZE CONTROL VAL], Converter={StaticResource RatioConverter}}"/>
    </GeometryDrawing.Pen>
</GeometryDrawing>

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
    return (1 / (double)value);
}

WPF pixel gridlines

1 Answers1