Dynamically Generated Grid of Images

Question

I'm writing a Winform application that processes a grid of products printed on a sheet. To more effectively communicate with my end user I've been tasked with creating a visual representation of the grid (as opposed to just giving them "Row x Col y in text" ) to depict which items on the sheet could not be processed.

My first thought was to use a grid of images (green check mark/red X) aligned in a grid to match the sheet that the app will actually process. The problem with that approach is that eventually we'll have different jobs that use different sheet alignments. One might be a 3x10 grid, another might be a 1x8 etc.

Is there something I can use to define an area of my form as reserved for images, and also a way to insert copies of my image file that have been resized to fit in that area?

Something like:

container.add(
    new Image("myFileLocation", imgHeight, imgWidth), 
    (container.height / numRows), 
    (container.width/numCols)
    );

?

Sorry if this is a stupid question. I'm comfortable in c# but have approximately zero experience designing GUIs for these things.

Answer 1

@ASh that's exactly what I wanted, thanks.

In case it helps anyone else out there here are some references that I found useful to learn how to use TableLayoutPanels:

Generate rows/columns at runtime. TableLayoutPanel rows & columns at runtime

Add image file to picturebox Set image source to picturebox which is added dynamically to Table Layout Panel

Resize image inside picturebox (stretch to fill) Fit Image into PictureBox

Center images inside cells https://learn.microsoft.com/en-us/dotnet/framework/winforms/controls/how-to-align-and-stretch-a-control-in-a-tablelayoutpanel-control

My code:

int rows = 7; //Will come from database
int cols = 3; //Will come from database
int colWidth;
int rowHeight;
PictureBox pbox;
Random rnd = new Random();

colWidth = 100 / cols;
if (100 % cols != 0)
    colWidth--;

rowHeight = 100 / rows;
if (100 % rows != 0)
    rowHeight--;


tabLP.Controls.Clear();
tabLP.ColumnStyles.Clear();
tabLP.RowStyles.Clear();

tabLP.ColumnCount = cols;

for (int i = 0; i < rows; i++)
{
    tabLP.RowStyles.Add(new RowStyle(SizeType.Percent, rowHeight));                
    for (int j = 0; j < cols; j++)
    {
        tabLP.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, colWidth));

        if (rnd.NextDouble() > 0.5 )
        {
            pbox = new PictureBox() { Image = Properties.Resources.red_X};
        }
        else
        {
            pbox = new PictureBox() { Image = Properties.Resources.checkbox_green };
        }

        pbox.Dock = DockStyle.Fill;
        pbox.SizeMode = PictureBoxSizeMode.StretchImage;
        tabLP.Controls.Add(pbox, j, i);
    }

}