Question

I need to draw a grid on my screen and with every click of the user draw an image on that specific area.

I don’t know how to draw that grid. The squares will have fixed sizes (32×32 pixels) but their number will be variable. I could have a NxN cells grid. Also, this grid needs to be in a scrollpane as its size is variable.
Does anyone know how to draw that grid and get the square clicked?

I’m using WPF.

Thanks.

Answer 1

Use ScrollViewer to enable scrolling capability

<ScrollViewer x:Name="layoutRoot" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"/>

then generate a Grid object:

private Grid GenerateGrid(int rows, int columns, int cellWidth, int cellHeight)
{
    Grid grid = new Grid();
    grid.Width = columns * cellWidth;
    grid.Height = rows * cellHeight;

    for (int i = 0; i < rows; i++)
    {
        grid.RowDefinitions.Add(new RowDefinition());
    }

    for (int i = 0; i < columns; i++)
    {
        grid.ColumnDefinitions.Add(new ColumnDefinition());
    }

    for (int i = 0; i < rows; i++)
    {
        for (int j = 0; j < columns; j++)
        {
            var cell = new Border();
            cell.MouseDown += Cell_MouseDown;
            Grid.SetRow(cell, i);
            Grid.SetColumn(cell, j);
            cell.Background = Brushes.Transparent;

               cell.BorderBrush = Brushes.Gray;
               cell.BorderThickness = new Thickness(1);
            grid.Children.Add(cell);
        }
    }

    return grid;
}

private void Cell_MouseDown(object sender, MouseButtonEventArgs e)
{
    var cell = sender as Border; //You can use this object
}