how to create checker board pattern?

Question

probably a trivial question: i need to fill a rectangle with a checker board pattern where each cell is 1x1 pixel in size. how to create a vector geometry for this pattern in XAML? i am not using Blend I am doing my vector graphics by hand.

thanks konstantin

Answer 1

You'd get the following from the XAML below:

. .

Here's the long version of the XAML, spelling out what geometry is being created. The Rect attribute of the RectangleGeometry element takes a left,top,width,height sequence.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="250">
    <Canvas>
        <Rectangle Width="100" Height="100" Canvas.Left="10" Canvas.Top="10">
            <Rectangle.Fill>
                <DrawingBrush Stretch="None" TileMode="Tile" Viewport="0,0,2,2" ViewportUnits="Absolute">

                    <!-- a drawing of 4 checkerboard tiles -->
                    <DrawingBrush.Drawing>
                        <DrawingGroup>

                            <!-- checkerboard background -->
                            <GeometryDrawing Brush="White">
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0,0,2,2" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>

                            <!-- two checkerboard foreground tiles -->
                            <GeometryDrawing Brush="Black">
                                <GeometryDrawing.Geometry>
                                    <GeometryGroup>
                                        <RectangleGeometry Rect="0,0,1,1" />
                                        <RectangleGeometry Rect="1,1,1,1" />
                                    </GeometryGroup>
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>

                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Canvas>
</Window>

The following shorter version renders the exact same image, but uses a shorthand notation for the geometry. The checkerboard tiles are rendered as a path.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="250">
    <Canvas>
        <Rectangle Width="100" Height="100" Canvas.Left="10" Canvas.Top="10">
            <Rectangle.Fill>
                <DrawingBrush Stretch="None" TileMode="Tile" Viewport="0,0,2,2" ViewportUnits="Absolute">
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <GeometryDrawing Geometry="M0,0 L2,0 2,2, 0,2Z" Brush="White"/>
                            <GeometryDrawing Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z" Brush="Black"/>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Canvas>
</Window>

Caveat: this works well when the rectangle is positioned on integer coordinates. Should it be positioned on a fractional coordinates (e.g. Canvas.Left="10.5" instead of "10"), the brush will be anti aliased and will lose the sharp pattern. SnapToDevicePixels will not help. As long as the rectangle's position is known, you could set the DrawingBrush's RelativeTransform to offset the fractional component, in order to avoid anti-aliasing.

Answer 2

Building on top of Oren's answer, here is a compact version that draws nice checkered gray background you see in the color pickers and elsewhere:

<DrawingBrush TileMode="Tile" Viewport="0,0,32,32" ViewportUnits="Absolute">
  <DrawingBrush.Drawing>
    <GeometryDrawing Geometry="M0,0 H1 V1 H2 V2 H1 V1 H0Z" Brush="LightGray"/>
  </DrawingBrush.Drawing>
</DrawingBrush>