Search code examples
wpfxamldrawingbrush

Graph paper with elongated grid sections?


I am trying to make some Graph Paper using WPF using the DrawingBrush.

I found the following example on MSDN which is pretty close to what I want but not exactly. I want to do this is pure XAML. I am fairly new to WPF.

 <DrawingBrush x:Key="GridTile" 
                  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="Blue" />
                <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="Red" />
            </DrawingGroup>
        </DrawingBrush.Drawing>
    </DrawingBrush>

Currently this generates

enter image description here

I want to generate

with a width of 3cm and each row being 4mm

enter image description here

I will use this tile my background or rather the DrawingBrush TileMode takes care of that for me.


Solution

  • Change the size of the Brush so the Viewport has more height than width, and change the Geometry accordingly so the lines still appear 1px thick.

    <Window x:Class="WPFTest.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="WPF" SizeToContent="WidthAndHeight">
    
        <Window.Resources>
            <DrawingBrush x:Key="GridTile" Viewport="0,0,4,16" 
                          ViewportUnits="Absolute" TileMode="Tile">
                <DrawingBrush.Drawing>
                    <DrawingGroup>
                        <GeometryDrawing Geometry="M0,0 L1,0 1,0.05 0,0.05Z" Brush="Black"/>
                        <GeometryDrawing Geometry="M0,0 L0,1 0.1,1 0.1,0Z" Brush="Black"/>
                    </DrawingGroup>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Window.Resources>
    
        <Rectangle Height="512" Width="512" Stroke="Black" StrokeThickness="0"
                   Fill="{StaticResource GridTile}"/>
    </Window>
    

    enter image description here