Question

If this is a dumb question, forgive me. I have a small amount of experience with C#, but not to this degree yet.

I have a series of images that I want to put into a grid with space around each image, also text beneath them and I want them to be clickable, so when they’re clicked they hilite, and double click runs an event. The best example I have for this is the user interface of the program ACDSee. I’ve googled this for hours, and haven’t come up with anything applicable. Is this difficult or simple? Can anyone give me an example, or point me in the right direction?

Cheers.

Answer 1

It doesn’t seem to be very difficult. I would suggest the following steps:

1. Add a new “User Control” to your project for image thumbnails. It can contain a docked PictureBox and a Label or LinkLabel at its bottom.
2. For the space around each thumbnail simply play with the Padding property of the user control.
3. For the so called grid that is going to hold the thumbnails, use a FlowLayoutPanel, and simply add instances of the above mentioned user-control to this panel.
4. For visual representation of being selected, change the background color of the user-control instance to blue (for example), and back to control-face when deselected. It is recommended to implement an IsSelected property for the user-control as well.
5. To emulate thumbnail selection, handle the Click event of the user-control and assign the events for all thumbnail instances to a single event-handler method. Store a global reference to the already selected thumbnail, name it e.g., SelectedThumbnail initialized with null. In the event-handler body compare the sender with the global SelectedThumbnail, and update it if required. If the user-control associated with the sender is not selected (i.e., its background is not blue, or IsSelected is false) make it selected, or change its background. Otherwise change the background to its default color (e.g., control-face).

The Click event handler body looks something like this:

MyThumbnailControl ctrl = sender as MyThumbnailControl;
if(ctrl == null) return;
if(ctrl == SelectedThumbnail) return; // selected again
if(ctrl != SelectedThumbnail)
{
    ctrl.IsSelected = true;
    ctrl.BackColor = Color.Blue; 
    // it's better to set the back-color in the IsSelected property setter, not here
    SelectedThumbnail.IsSelected = false;
    SelectedThumbnail.BackColor = Color.Control;
    SelectedThumbnail = ctrl; // important part
}

It’s also recommended that all thumbnail instances that are going to be added to the so-called grid, be referenced in a separate array too. Therefore changing selection with arrow-keys would be possible with simple index calculations.

---

Further Notes: I assumed that the user-control that is to be created is named MyThumbnailControl, just a random name to refer to that control. When you create a new user-control, the wizard generates a class for you with your desired name (e.g., MyThumbnailControl), you can define a property inside it named IsSelected and implement its getter and setter. See this for a tutorial. After defining the user-control you can instantiate instances from its corresponding class. Also by global reference, I meant a variable at the form (or any parent control) level. To keep it simple we can add a reference of the selected thumbnail in the form that is going to hold the grid and thumbnails: MyThumbnailControl selectedThumb = null; or something like this in the body of the form.