Question

I would like to create panels with detailed information regarding an item (including a thumbnail image on the left hand side) and then add these to a scrollable list. Much like how iTunes on the iPhone displays the lists of applications available.

I have done some searching but have thus far been unable to find any assistance.

Does anyone have any ideas or links to samples they would like to share with me.

Thanks in advance,
Rob

Answer 1

In sum, the following creates a series of panels within a container that scroll in and out of view using a vertical scroll bar.

You did not list ASP.NET in your tags, so I assume this is Windows form-based, not web based. I’ll get you started:

1. Create a panel called GrandChildPanel. Inside it, put an image box on the left side and labels with the information you want to display next to the image. This panel will be duplicated for every item (i.e., iTunes song).
2. Put that panel inside another, equal-width, equal-height panel called ChildPanel.
3. Create another panel called ParentPanel and set its width to the size of the other panels plus enough room for a vertical scroll bar. Set the height equal to however tall you want the scrollable area to be.
4. Put ChildPanel in the top-right corner of ParentPanel and add a vertical scroll bar to the far right edge of ParentPanel. Set the scroll bar’s height to takeup the entire height of ParentPanel.
5. You probably want to add a border to ParentPanel to show its boundaries.
6. You also probably want to add a 1 or 2 pixel line across the bottom of your GrandChildPanel to show where the panel ends.

That’s the setup. Here are the requirements for your code: Each time you ‘add an item to the list’ (e.g., every song in your iTunes list), you do the following:

1. Clone the GrandChildPanel.
2. Assign the clone to be a child of the ChildPanel.
3. Set the clone’s Top to be equal to the previous clone’s Top plus its Height.
4. Set ChildPanel‘s Height equal to any given GrandChildPanel‘s height multiplied by the number of clones.
5. Set the scroll bar’s maximum value to equal ChildPanel‘s height.

Now, all you have to do to make this scrollable is perform the following on the scrolling or changing events of the vertical scroll bar: Set ChildPanel‘s Top to be equal to the verticle scroll bar’s value (“position”) multiplied by -1.