CODEWITHSUNDEEP
c#wpfxamlcanvas
cantdoanything33
cantdoanything33

Reputation: 179

Drawing Grid pattern on Canvas with straight lines instead of rectangles

Right now I draw my grid with this brush:

<VisualBrush x:Key="GridBrush" TileMode="Tile"
        Viewport="0,0,60,60" ViewportUnits="Absolute"
        Viewbox="0,0,60,60" ViewboxUnits="Absolute" >
    <VisualBrush.Visual>
        <Rectangle Stroke="Darkgray" StrokeThickness="1" Height="60" Width="60"
            StrokeDashArray="5 3"/>
    </VisualBrush.Visual>
</VisualBrush>

And I get this effect:

overalapping

The rectangles here are overlapping.

The thing I have to achieve is:

wanted result

Upvotes: 3

Views: 839

Answers (1)

Clemens
Clemens

Reputation: 128013

Instead of a VisualBrush, better use this DrawingBrush:

<DrawingBrush TileMode="Tile"
              Viewport="0,0,60,60" ViewportUnits="Absolute"
              Viewbox="0,0,60,60" ViewboxUnits="Absolute">
    <DrawingBrush.Drawing>
        <GeometryDrawing Geometry="M0,0 L60,0 M0,0 L0,60">
            <GeometryDrawing.Pen>
                <Pen Brush="DarkGray" Thickness="1" DashCap="Flat">
                    <Pen.DashStyle>
                        <DashStyle Dashes="5,3"/>
                    </Pen.DashStyle>
                </Pen>
            </GeometryDrawing.Pen>
        </GeometryDrawing>
    </DrawingBrush.Drawing>
</DrawingBrush>

You may also explicitly declare the Geometry as a group of two lines:

<DrawingBrush TileMode="Tile"
        Viewport="0,0,60,60" ViewportUnits="Absolute"
        Viewbox="0,0,60,60" ViewboxUnits="Absolute">
    <DrawingBrush.Drawing>
        <GeometryDrawing>
            <GeometryDrawing.Geometry>
                <GeometryGroup>
                    <LineGeometry EndPoint="0,60"/>
                    <LineGeometry EndPoint="60,0"/>
                </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Pen>
                <Pen Brush="DarkGray" Thickness="1" DashCap="Flat">
                    <Pen.DashStyle>
                        <DashStyle Dashes="5,3"/>
                    </Pen.DashStyle>
                </Pen>
            </GeometryDrawing.Pen>
        </GeometryDrawing>
    </DrawingBrush.Drawing>
</DrawingBrush>

Upvotes: 4

Related Questions