简体   繁体   中英

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>

This is what you need?

XAML:

<Canvas x:Name="GridCanvas" Width="400" Height="400"/>

C#: InitializeComponent();

GridCanvas.Background = Brushes.DarkBlue;

int w = 400;
int h = 400;

for (int c = 0; c < w; c += 10)
{
    Line line = new Line
    {
        X1 = c,
        X2 = c,
        Y1 = 0,
        Y2 = h,
        StrokeThickness = 1
    };

    if (c % 100 == 0)
        line.Stroke = new SolidColorBrush(Color.FromRgb(255, 255, 255));
    else
        line.Stroke = new SolidColorBrush(Color.FromArgb(160, 255, 255, 255));

    GridCanvas.Children.Add(line);
}


for (int r = 0; r < h; r += 10)
{
    Line line = new Line
    {
        X1 = 0,
        X2 = w,
        Y1 = r,
        Y2 = r,
        StrokeThickness = 1
    };

    if (r % 100 == 0)
        line.Stroke = new SolidColorBrush(Color.FromRgb(255, 255, 255));
    else
        line.Stroke = new SolidColorBrush(Color.FromArgb(160, 255, 255, 255));

    GridCanvas.Children.Add(line);
}

在此处输入图像描述

I found a way to do it with two Canvas es. 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>

在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM