Блог

Я хочу создать сетку рисования, подобную этой:

Кто-нибудь может мне помочь, пожалуйста? У меня есть это прямо сейчас:

         <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 элементов. Но я заменил RectangleGeometry на PathGeometry , чтобы сделать линии более четкими.

 <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>
  

Это то, что вам нужно?

XAML:

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

C#:
Инициализировать компонент();

 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);
}