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>

平铺几何体中的网格线

1 个答案: