代码之家 › 专栏 › 技术社区 › Nathan user12821433

平铺几何图形中的网格线

xaml wpf c#

Nathan user12821433 · 技术社区 · 6 年前

尝试将网格线添加到我拥有的图案中。到目前为止,我能想到的是如下内容。

我用于此的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>

不过,我想在此处添加网格线,使其看起来类似以下内容:

这里,瓷砖内有网格线,瓷砖边缘稍厚。

我没有使用所需的模式来平铺某些图像,以避免占用系统资源。

任何帮助或指点都非常感谢。

1 回复 | 直到 6 年前

Mark Feldman 6 年前

你需要在画笔中使用一个画笔,而外部的画笔需要是一个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>