how to show label image on click event

Question

I need to make a simple matching game. With this matching game I need to show an image when I click on it. Before the click event there's only a color shown. I already have a method which assigns images to the labels like so:

    private void imgToLbl()
    {
        foreach (Control ctrl in tableLayoutPanel1.Controls)
        {
            Label imgLbl = ctrl as Label;
            if (imgLbl != null)
            {
                int rndNum = rndImage.Next(0, files.Count);
                imgLbl.Image = files[rndNum];
                lbls.Add(imgLbl);
                imags.Add(imgLbl.Image);
                ints.Add(rndNum);
                files.RemoveAt(rndNum);
            }
        }
    }

I also thought that I had to make 2 other lists for the final assigned images and labels. So I can assign them again in the click event using the ints list as index indicators. I already have a part of my click event:

    private void label_click(object sender, EventArgs e)
    {
        Label clickLbl = sender as Label;

        if (clickLbl != null)
        {

        }
    }

My thoughts are that I, somehow, have to check te index of clickLbl in the label list. But I don't know how. I can be completely wrong here but I would like to hear a good method for this. Can someone please help me out? I`m really clueless at the moment.

these are the steps it should go through:

1. When the application starts the labels shouldn't have images

2. When the user clicks the label will show it's image which was assigned in the imgToLbl() method

3. The image is now visible

NOTE:

I can not use pictureboxes instead of the labels. We HAVE to use labels. otherwise I wouldn't be asking this question

Answer 1

You seem to have a lot of irrelevant code, and omitted some relevant code. So we'll have to reverse engineer what you're actually asking.

It seems like you have a collection of N image files, and on your form you have a panel containing N Label controls. You want to randomly assign images to the labels, but only show the image on the label when the label is clicked.

First of all, I would strongly encourage to follow the General Naming Conventions and not use Hungarian notation nor use abbreviations.

That being said, your problem could be solved using the Control.Tag property, where you can store information about a control.

So your "imgToLbl" method becomes this:

private List<Image> _files = { /* however this works */ };

private void RandomizeImages()
{
    // Randomize the file list. 
    // See http://stackoverflow.com/questions/273313/randomize-a-listt
    Shuffle(_files);

    int imageIndex = 0;

    // Loop over all labels to assign an image index.
    foreach (Control control in tableLayoutPanel1.Controls)
    {
        var imageLabel = control as Label;
        if (imageLabel == null)
        {
            continue;
        }

        imageLabel.Tag = imageIndex;
        imageIndex++;
    }
}

This method stores the index of the List<Image> in the Label.Tag property, so that when clicking a label, you can inspect the tag's value and use that to index into the image collection:

private void Label_Click(object sender, EventArgs e)
{
    Label clickedLabel = sender as Label;

    if (clickedLabel != null)
    {
        var imageIndex = (int)clickedLabel.Tag;
        clickedLabel.Image = _files[imageIndex];
    }
}

Answer 2

You could use tableLayoutPanel1.Controls.GetChildIndex(clickLbl) to get the index of the control; this is in line with how you currently initialize the labels.

Alternatively you could simply keep a reference to the controls in a List<Label> yourself, and add them to the parent control programmatically - This saves you (well, would have saved you :P) alot of work in the designer, and you would rely less on how WinForms controls its Controls.

It also gives you full control of the indices, so you can match them with a List<Image> of images, for instance.