Линии сетки в плиточной геометрии

Question

Попытка добавить линии сетки в шаблон, который у меня есть. То, что я мог придумать, выглядит примерно так:

Код XAML, который я использовал для этого:

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

Однако я бы хотел добавить линии сетки здесь, чтобы они выглядели примерно так:

Здесь в плитках есть линии сетки, а края плитки немного толще.

Я не делаю мозаику на каком-либо изображении с требуемым шаблоном, чтобы не перегружать системный ресурс.

Любая помощь или указатели очень ценятся.

Answer 1

Вам понадобится использовать кисть внутри кисти, а внешняя кисть должна быть сеткой из прямоугольников 2x2 или чем-то вроде того, чтобы получить этот рисунок в шахматном порядке. Это должно сделать работу:

<Border Width="750" Height="750" HorizontalAlignment="Center" VerticalAlignment="Center" SnapsToDevicePixels="True">
    <Border.Resources>
        <Style x:Key="BaseRectangle"  TargetType="{x:Type Rectangle}">
            <Setter Property="Stroke" Value="#505050" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="Width" Value="151" />
            <Setter Property="Height" Value="151" />
        </Style>
        <Style x:Key="RectangleA"  TargetType="{x:Type Rectangle}" BasedOn="{StaticResource BaseRectangle}">
            <Setter Property="Fill">
                <Setter.Value>
                    <VisualBrush Viewport="0,0,30,30" ViewportUnits="Absolute" TileMode="Tile" Viewbox="0,0,30,30" ViewboxUnits="Absolute">
                        <VisualBrush.Visual>
                            <Rectangle Stroke="#343434" StrokeThickness="1" Fill="#101010" Width="31" Height="31" />
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="RectangleB"  TargetType="{x:Type Rectangle}" BasedOn="{StaticResource BaseRectangle}">
            <Setter Property="Fill">
                <Setter.Value>
                    <VisualBrush Viewport="0,0,30,30" ViewportUnits="Absolute" TileMode="Tile" Viewbox="0,0,30,30" ViewboxUnits="Absolute">
                        <VisualBrush.Visual>
                            <Rectangle Stroke="#343434" StrokeThickness="1" Fill="#202020" Width="31" Height="31" />
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Border.Resources>
    <Border.Background>
        <VisualBrush Viewport="0,0.5,300,300" ViewportUnits="Absolute" TileMode="Tile" Viewbox="0,0.5,300,300" ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Canvas>
                    <Rectangle Canvas.Top="0" Canvas.Left="0" Style="{StaticResource RectangleA}" />
                    <Rectangle Canvas.Top="0" Canvas.Left="150" Style="{StaticResource RectangleB}" />
                    <Rectangle Canvas.Top="150" Canvas.Left="0" Style="{StaticResource RectangleB}" />
                    <Rectangle Canvas.Top="150" Canvas.Left="150" Style="{StaticResource RectangleA}" />
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </Border.Background>
</Border>

Результат:

Более быстрый метод, если вы можете избежать неприятностей, состоит в том, чтобы визуализировать шахматную доску и линии сетки в виде отдельных слоев. Это позволяет вам рендерить все с геометриями, а не с формами:

<Border Width="750" Height="750" HorizontalAlignment="Center" VerticalAlignment="Center" SnapsToDevicePixels="True">
    <Border.Background>
        <VisualBrush Viewport="0,0.5,300,300" ViewportUnits="Absolute" TileMode="Tile" Viewbox="0,0.5,300,300" ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Canvas Width="300" Height="300">
                    <Canvas.Background>
                        <DrawingBrush Stretch="None" TileMode="Tile" Viewport="0,0,300,300" ViewportUnits="Absolute">
                            <DrawingBrush.Drawing>
                                <DrawingGroup>
                                    <GeometryDrawing Brush="#101010">
                                        <GeometryDrawing.Geometry>
                                            <RectangleGeometry Rect="0,0,300,300" />
                                        </GeometryDrawing.Geometry>
                                    </GeometryDrawing>
                                    <GeometryDrawing Brush="#202020">
                                        <GeometryDrawing.Geometry>
                                            <GeometryGroup>
                                                <RectangleGeometry Rect="0,0,150,150" />
                                                <RectangleGeometry Rect="150,150,150,150" />
                                            </GeometryGroup>
                                        </GeometryDrawing.Geometry>
                                    </GeometryDrawing>
                                </DrawingGroup>
                            </DrawingBrush.Drawing>
                        </DrawingBrush>
                    </Canvas.Background>
                    <Rectangle Stroke="#505050" StrokeThickness="2" Width="300" Height="300">
                        <Rectangle.Fill>
                            <VisualBrush Viewport="0,0.5,30,30" ViewportUnits="Absolute" TileMode="Tile" Viewbox="0,0.5,30,30" ViewboxUnits="Absolute">
                                <VisualBrush.Visual>
                                    <Path Stroke="#343434" StrokeThickness="1" Width="31" Height="31" Data="M 0,31 L 0,0 30,0" />
                                </VisualBrush.Visual>
                            </VisualBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </Border.Background>
</Border>