如何创建棋盘格局？

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.

可能是一个微不足道的问题:我需要填充一个带有棋盘图案的矩形,其中每个单元格的大小为1x1像素。如何在XAML中为此模式创建矢量几何?我没有使用Blend我正在手工制作矢量图形。

thanks konstantin

2 个解决方案

#1

You'd get the following from the XAML below:

您将从以下XAML获得以下内容:

. .

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.

这是XAML的长版本,拼写出正在创建的几何体。 RectangleGeometry元素的Rect属性采用left,top,width,height序列。

<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.

警告:当矩形位于整数坐标上时,这很有效。如果它位于小数坐标上(例如Canvas.Left =“10.5”而不是“10”),则刷子将具有抗锯齿并且将失去清晰图案。 SnapToDevicePixels无济于事。只要矩形的位置已知,您可以设置DrawingBrush的RelativeTransform来偏移小数分量,以避免消除锯齿。

#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:

建立在Oren的答案之上,这是一个紧凑的版本,可以在颜色选择器和其他地方看到漂亮的方格灰色背景:

<DrawingBrush TileMode="Tile" Viewport="0,0,32,32" ViewportUnits="Absolute">
  <DrawingBrush.Drawing>
    <GeometryDrawing Geometry="M0,0 H16 V16 H32 V32 H16 V16 H0Z" Brush="LightGray"/>
  </DrawingBrush.Drawing>
</DrawingBrush>