如何在WPF Canvas上繪制網格線？

Question

我需要在WPF中在畫布上構建一個繪制網格線的函數：

void DrawGridLine(double startX, double startY, double stepX, double stepY, 
                  double slop, double width, double height)
{
    // How to implement draw gridline here?
}

我該怎么做？

Answer 1

你不需要用WPF“畫”任何東西。 如果要繪制線條，請使用適當的幾何圖形繪制線條。

在你的情況下，它可能很簡單。 您只是繪制一個網格，因此您可以創建一個DrawingBrush來繪制單個網格方塊並將其平鋪以填充其余部分。 要繪制瓷磚，您可以將其視為繪制X的。 所以要有一個20x10圖塊（對應於stepX和stepY ）：

（PS，斜率slop是多余的，因為你已經有水平和垂直步長）

<DrawingBrush x:Key="GridTile" Stretch="None" TileMode="Tile"
              Viewport="0,0 20,10" ViewportUnits="Absolute">
                  <!-- ^^^^^^^^^^^ set the size of the tile-->
    <DrawingBrush.Drawing>
        <GeometryDrawing>
            <GeometryDrawing.Geometry>
                <!-- draw a single X -->
                <GeometryGroup>
                    <!-- top-left to bottom-right -->
                    <LineGeometry StartPoint="0,0" EndPoint="20,10" />

                    <!-- bottom-left to top-right -->
                    <LineGeometry StartPoint="0,10" EndPoint="20,0" />
                </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Pen>
                <!-- set color and thickness of lines -->
                <Pen Thickness="1" Brush="Black" />
            </GeometryDrawing.Pen>
        </GeometryDrawing>
    </DrawingBrush.Drawing>
</DrawingBrush>

這需要畫線。 現在，為了能夠在網格中從邊緣繪制偏移量，您需要使用另一個畫筆繪制一個具有所需尺寸的矩形，並填充您的瓷磚。 所以要有一個起始位置(30, 45) （對應於startX和startY ）的width和height ， 130x120 ：

<DrawingBrush x:Key="OffsetGrid" Stretch="None" AlignmentX="Left" AlignmentY="Top">
    <DrawingBrush.Transform>
        <!-- set the left and top offsets -->
        <TranslateTransform X="30" Y="45" />
    </DrawingBrush.Transform>
    <DrawingBrush.Drawing>
        <GeometryDrawing Brush="{StaticResource GridTile}" >
            <GeometryDrawing.Geometry>
                <!-- set the width and height filled with the tile from the origin -->
                <RectangleGeometry Rect="0,0 130,120" />
            </GeometryDrawing.Geometry>
        </GeometryDrawing>
    </DrawingBrush.Drawing>
</DrawingBrush>

然后最后使用它，只需將其設置為網格（或其他面板）的背景：

<Grid Background="{StaticResource OffsetGrid}">
    <!-- ... -->
</Grid>

以下是它最終的結果：

---

如果要動態生成畫筆，這是基於上述XAML的等效函數：

 static Brush CreateGridBrush(Rect bounds, Size tileSize) { var gridColor = Brushes.Black; var gridThickness = 1.0; var tileRect = new Rect(tileSize); var gridTile = new DrawingBrush { Stretch = Stretch.None, TileMode = TileMode.Tile, Viewport = tileRect, ViewportUnits = BrushMappingMode.Absolute, Drawing = new GeometryDrawing { Pen = new Pen(gridColor, gridThickness), Geometry = new GeometryGroup { Children = new GeometryCollection { new LineGeometry(tileRect.TopLeft, tileRect.BottomRight), new LineGeometry(tileRect.BottomLeft, tileRect.TopRight) } } } }; var offsetGrid = new DrawingBrush { Stretch = Stretch.None, AlignmentX = AlignmentX.Left, AlignmentY = AlignmentY.Top, Transform = new TranslateTransform(bounds.Left, bounds.Top), Drawing = new GeometryDrawing { Geometry = new RectangleGeometry(new Rect(bounds.Size)), Brush = gridTile } }; return offsetGrid; }