Question

for some hours im trying to create a graphpaper background for a ListView. For a better understanding I’ll describe what I mean. I want to realise it with XAML.
Until now I finished the little rectangles with 10px margin, but I need another grid, with bigger lines which have a margin of 100px and I don’t really understand the Path Markup Language.

Here is my code:

    <DrawingBrush x:Key="ListBackgroundBrush" Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
    <DrawingBrush.Drawing>
        <DrawingGroup>
            <!--  Linien alle 10 Pixel -->
            <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="#EAEAEA" /><!-- Wagerecht-->
            <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="#EFEFEF" /><!--  Senkrecht -->

            <!-- Linien alle 100 Pixel Senkrecht  -->
            <GeometryDrawing Geometry="M0,0 L1,0 1,0.2, 0,0.2Z" Brush="Red" />
            <!-- Linien alle 100 Pixel Wagerecht -->
            <GeometryDrawing Geometry="M0,0 L1,0 1,0.2, 0,0.2Z" Brush="Green" />
        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>    
<ControlTemplate TargetType="ListView">
                <Border CornerRadius="2" Background="{StaticResource ListBackgroundBrush}" BorderThickness="1,1,1,1" BorderBrush="#E1E1E1"  SnapsToDevicePixels="True">
</ControlTemplate>

Thats what I did until now, but I dont know how to modify the Geometry Parameters to make the margin between the lines bigger.

I’ll be happy about every answer!

Answer 1

GeometryDrawing.Brush is the fill, or background color. GeometryDrawing.Pen is the line color. It appears you’re intending to color the lines of your Graph paper but you’re using the wrong property. When I fixed that, I noticed your 10px grid lines don’t repeat under the 100px grid lines they way you wanted, so here’s the solution I came up with.

<DrawingBrush x:Key="ListBackgroundBrush" Viewport="0,0,100,100" ViewportUnits="Absolute" TileMode="Tile">
    <DrawingBrush.Drawing>
        <DrawingGroup>

            <!-- Geometry for the 10px squares -->
            <GeometryDrawing Brush="White">
                <GeometryDrawing.Geometry>
                    <GeometryGroup>
                        <PathGeometry  Figures="
                          M10,0 L10,100 
                          M20,0 L20,100
                          M30,0 L30,100 
                          M40,0 L40,100
                          M50,0 L50,100 
                          M60,0 L60,100
                          M70,0 L70,100 
                          M80,0 L80,100
                          M90,0 L90,100

                          M0,10 L100,10 
                          M0,20 L100,20
                          M0,30 L100,30 
                          M0,40 L100,40
                          M0,50 L100,50 
                          M0,60 L100,60
                          M0,70 L100,70 
                          M0,80 L100,80
                          M0,90 L100,90"  />
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
                <GeometryDrawing.Pen>
                    <Pen Thickness="1" Brush="Green" />
                </GeometryDrawing.Pen>
            </GeometryDrawing>

            <!-- Geometry for the 100px squares -->
            <GeometryDrawing Brush="Transparent">
                <GeometryDrawing.Geometry>
                    <GeometryGroup>
                        <PathGeometry  Figures="M0,0 L100,0 L100,100" />
                    </GeometryGroup>
                </GeometryDrawing.Geometry>
                <GeometryDrawing.Pen>            
                    <Pen Thickness="3" Brush="Green" />
                </GeometryDrawing.Pen>
            </GeometryDrawing>

        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush> 

<Grid Background="{StaticResource ListBackgroundBrush}" />