Как создать шаблон шахматной доски?

Question

вероятно, тривиальный вопрос: мне нужно заполнить прямоугольник шаблоном шахматной доски, где каждая ячейка имеет размер 1x1 пикселей.Как создать векторную геометрию для этого шаблона в XAML?я не использую Blend, я делаю свою векторную графику вручную.

спасибо konstantin

Answer 1

Вы можете получить следующее из XAML ниже:

.,

Вот длинная версия XAML, описывающая, какая геометрия создается.Атрибут Rect элемента RectangleGeometry принимает последовательность 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>

В следующей более короткой версии отображаетсяточно такое же изображение, но использует сокращенную запись для геометрии.Фишки шахматной доски отображаются в виде пути.

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

Предостережение : это хорошо работает, когда прямоугольник расположен на целочисленных координатах.Если он будет расположен на дробных координатах (например, Canvas.Left = "10,5" вместо "10"), кисть будет иметь сглаживание и потеряет четкий рисунок. SnapToDevicePixels не поможет.Пока позиция прямоугольника известна, вы можете установить RelativeTransform DrawingBrush для смещения дробного компонента, чтобы избежать сглаживания.

Answer 2

Основываясь на ответе Орена, вот компактная версия, которая рисует красивый клетчатый серый фон, который вы видите в палитрах цветов и в других местах:

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