how to create checker board pattern?

You'd get the following from the XAML below:

alt text . . alt text

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.


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>

Tags:

Wpf

Xaml