Display hundreds images dynamically

Question

I have to create a form capable of displaying a cinema-hall (don't know the exact word) schema. Essentially I have to display a large number (given by another source) of independent chair-like images which can change color (status) on click.

I surf the web searching for a solution but I really don't have a clue how to manage this. Can someone help me?

Answer 1

I'd say that the easiest way would be to create and own "chair-control" which handles it's click event etc. This would be nothing more than a simple User-Defined Control which has the chair image as background (and swaps with other pictures, if necessary).

After that, you could easily create a big punch of these controls by code (Pseudo-Code):

for(int row = 0; row < rowMax; row++) {
    for(int column = 0; column < columnMax; column++) {
        this.Controls.Add(New ChairControl(row, column));
    }
}

The constructor takes the row and column number and automatically adjusts it's position, f.e..

Answer 2

I would add to Bobby's answer that the control should really pre-render the images to a single bitmap and use that to refresh the screen. Update the bitmap to reflect user changes.

Answer 3

There are hundreds of solutions too :D. You could, for example, arrange them into a grid of booleans with a custom paint for the cells for painting the chairs and an event for the cell click that changes the state of the list/dataset bound to the grid.

Answer 4

If you need to draw that many images your best bet is to use a panel control and handle the drawing yourself by either handling the OnPaint event or even better: creating a custom control that inherits from the Panel control and which overrides the Paint method. Look online for examples of how to create custom-painted controls in .NET.

Do not try to create hundreds of images using Image controls or other such controls because it adds to much overhead.

In the Paint method, you can use the DrawImage function to draw the chairs based on the different states (i.e. selected or not-selected). You can store the states of the chairs in a one- or two-dimensional array in memory and then loop through it in the Paint method to draw each chair, computing the position of the chair on-screen based on its' index:

for(int chairIndex = 0; chairIndex < chairsCount; chairIndex++)
{
  // compute the on-screen position of each chair
  chairX = (chairIndex % chairsPerLine) * chairWidh;
  chairY = (chairIndex / chairsPerLine) * chairHeight;

  // and read the current state from the array
  chairState = chairsArray[chairIndex];

  // then draw the chair image in the graphics context
  switch(chairState)
  {
     case /* SELECTED */
       .. DrawImage(selectedImage, new Point(chairX, chairY));
     case /* NOT-SELECTED */
       .. DrawImage(nonSelectedImage, new Point(chairX, chairY));
  }
}

You will also have to handle mouse events to "hit-test" when a user clicks a chair to toggle it's state in memory.

// compute chairIndex based on mouse position (for hit-test)
chairIndex = mouseX / chairWidth + (mouseY / chairHeight) * chairsPerLine;
// then toggle state accordingly

The code snippets above assume you have previously defined some of the variables, that you've loaded the different chair images into two or more variables, and that you're using a one-dimensional array for storing the chair states.