Trying to create a grid of pictureboxes in an array for a board in c#

Question

I'm trying to make a board for a Naughts and crosses (tic tac toe) game using pictureboxes in an array and what I've come up with is this. This starts when I press a button.

for (int i = 0; i <= 3; i++)
        {
            for (int j = 0; j <= 3; j++)
            {
                PictureBox[,] pb = new PictureBox[i, j];
                pb[i, j].Location = new Point(i * 150 + 100, j * 150 + 100);
                pb[i, j].Width = 150;
                pb[i, j].Height = 150;
                pb[i, j].Visible = true;
                pb[i, j].BorderStyle = BorderStyle.FixedSingle;
                pb[i, j].BringToFront();
                this.Controls.Add(pb[i, j]);
            }
        }

this throws me a "System.IndexOutOfRangeException" on the line

pb[i, j].Location = new Point(i * 150 + 100, j * 150 + 100);

Whats wrong here?

Answer 1

You're not far off - you need to declare the array outside of the loop, and create a picture with each iteration - this works (tested):

            PictureBox[,] pb = new PictureBox[3, 3];
            for (int i = 0; i < 3; i++)
            {
                for (int j = 0; j < 3; j++)
                {
                    pb[i,j] = new PictureBox();
                    pb[i, j].Location = new Point(i * 150 + 100, j * 150 + 100);
                    pb[i, j].Width = 150;
                    pb[i, j].Height = 150;
                    pb[i, j].Visible = true;
                    pb[i, j].BorderStyle = BorderStyle.FixedSingle;
                    pb[i, j].BringToFront();
                    this.Controls.Add(pb[i, j]);
                }
            }

(Note the logic in the loop was wrong too, it should be < 3 not <= 3 as you're starting at 0)

Answer 2

You have declared and instantiated your multidimennsional array within your for loops. Try the following:

PictureBox[,] pb = new PictureBox[3, 3];    
for (int i = 0; i <= 3; i++)
{                
    for (int j = 0; j <= 3; j++)
    {
        pb[i, j] = new PictureBox();
        pb[i, j].Location = new Point(i * 150 + 100, j * 150 + 100);
        pb[i, j].Width = 150;
        pb[i, j].Height = 150;
        pb[i, j].Visible = true;
        pb[i, j].BorderStyle = BorderStyle.FixedSingle;
        pb[i, j].BringToFront();
        this.Controls.Add(pb[i, j]);                    
    }
}

Answer 3

Well i would say your approach of creating picture box array to create the Ticktack Toe game is wrong.Plus your code is inefficient

In your code you are repeatedly creating redundant arrays

PictureBox[,] pb = new PictureBox[i, j];

You are wasting Runtime memory here.

What i would recommend is creating a new Picturebox Class Inherited from the PictureBox class. Divide this rectangular area into 3X3 Matrix(in terms of dimension) Then you need to Capture the click event and get the point

  private void pictureBox1_Click(object sender, EventArgs e)
    {
        MouseEventArgs eM = (MouseEventArgs)e;

    //eM.X  -X Coordinate  eM.Y  -Y Coordinate 

    }

Using this Coordinate identify the matrix location,where the user clicked.Then redraw the whole picture-box to reflect the input made by user. This will separate the need for maintaining a picturebox array you can concentrate just to maintain a 3X3 Integer or Boolean array(0 or 1).When a win condition occurs you just need to draw a line across the matching array entries.

Use the Graphics.DrawLine method to do this