Как нарисовать линию сетки на холсте WPF? - PullRequest
Новая
       0

Как нарисовать линию сетки на холсте WPF?

12 голосов
/ 22 июня 2011

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

example gridline

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

Как мне это сделать?

1 Ответ

30 голосов
/ 22 июня 2011

Вам не нужно ничего «рисовать» с помощью 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>

Вот как это выглядит в итоге:

final look

Если вы хотите создать кисть динамически, вот эквивалентная функция, основанная на приведенном выше 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;
}
...