C#WPF绘图网格 [英] C# WPF drawing grid

问题描述

我想制作一个这样的绘图网格:

I wanna make a drawing grid like this:

有人可以帮我吗?我现在有这个:

Can anyone help me please? I have this right now:

        <Canvas>
            <Canvas.Background>
                <DrawingBrush TileMode="Tile" Viewport="0 0 40 40" ViewportUnits="Absolute" Opacity="0.5">
                    <DrawingBrush.Drawing>
                        <GeometryDrawing>
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0,0,50,50"/>
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Pen>
                                <Pen Brush="#FF323232" Thickness="0.25"/>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Canvas.Background>
        </Canvas>

推荐答案

我找到了一种使用两个 Canvas es的方法.但是我已经将 RectangleGeometry 替换为 PathGeometry ，以使线条更清晰.

I found a way to do it with two Canvases. But I've replaced the RectangleGeometry with PathGeometry to make the lines sharper.

<Grid Background="#102035">
    <Grid.Resources>
        <Pen x:Key="GrayPenKey" Brush="Gray"/>
        <GeometryDrawing x:Key="SmallGridDrawing" Pen="{StaticResource GrayPenKey}" Geometry="M 0 0 L 40 0 L 40 40"/>
        <GeometryDrawing x:Key="LargeGridDrawing" Pen="{StaticResource GrayPenKey}" Geometry="M 0 0 L 200 0 L 200 200"/>
        <DrawingBrush x:Key="SmallGridBrush" TileMode="Tile" Viewport="0 0 40 40" ViewportUnits="Absolute" Opacity="0.5" Drawing="{StaticResource SmallGridDrawing}" />
        <DrawingBrush x:Key="LargeGridBrush" TileMode="Tile" Viewport="40 40 200 200" ViewportUnits="Absolute" Drawing="{StaticResource LargeGridDrawing}"/>
    </Grid.Resources>
    <Canvas Background="{StaticResource SmallGridBrush}"/>
    <Canvas Background="{StaticResource LargeGridBrush}">
        <Line X1="40" Y1="0" X2="40" Y2="440" Stroke="Green"/>
        <Line X1="40" Y1="440" X2="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Canvas}}" Y2="440" Stroke="Red"/>
    </Canvas>
</Grid>

这篇关于C#WPF绘图网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！