Как рисовать сетку на WPF Canvas?

Мне нужно построить функцию gridline линии на холсте в WPF:

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

Как я могу это сделать?

Ответ 1

Вам действительно не нужно "рисовать" что-либо с WPF. Если вы хотите нарисовать линии, используйте соответствующие геометрии, чтобы нарисовать их.

В вашем случае это может быть просто на самом деле. Вы просто рисуете сетку, чтобы просто создать DrawingBrush, чтобы нарисовать один квадрат сетки и начертить его, чтобы заполнить остальные. Чтобы нарисовать свою плитку, вы можете подумать об этом как о рисовании X. Итак, чтобы иметь 20x10 плитка (что соответствует stepX и stepY):

(p.s., наклон 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;
}