Hi, I now have the back end of a music library application and I am now working on the GUI side.

I would like to display all the albums (Album cover art, Title and Artist) in a scrollable area, and would like some advice on how to do this:

Firstly is it a good idea to create a user control for each album? I knocked one together which is basically made up of a picture box (for the album art) and two labels underneath (for the title and artist). The plan was to place them on a panel and allow the user to scroll along them (in a grid view style). I got this working with a mock up using a button on the panel and got code working so you could "flick" the button left and right, but as soon as I added a large number of buttons (100) it became pretty much unusably slow! (I was using the Button1.Left property to move each button)

  • Can someone suggest a better way of doing this?
  • Is my custom control a good idea?
  • Will I need to create a custom version of the Panel (or similar) to get a better "smooth" scroll?
  • I assume for optimization I will only want to load the album art just before it comes into view, and unload it once it leaves view? (I currently have about 400 albums)
  • Maybe I was just being unrealistic using 100 buttons as a test, as in the actual GUI I guess there will only ever be about 20-30 albums on the screen at once!
  • Should I use a separate thread for loading the album arts?

I'm pretty stuck on what to try/do next so any help/pointers would be greatly appreciated.

Cheers

Your custom control seems to be a good idea to me.
I made something similar for the table of Mendeleev(chemical elements).
>Will I need to create a custom version of the Panel (or similar) to get a better "smooth" scroll?
There is already a custom version in the form of a FlowLayout panel.
Watch this video : http://msdn.microsoft.com/nl-be/vcsharp/bb798028(en-us).aspx
Sorry, with your other points I don't have that much experience.

Cheers ddanbe, I'll check it out when I get home tonight. Much appreciated :)

Had a play with the FlowLayoutPanel last night and might do what I want. However I am having trouble getting it to scroll smoothly with the MouseMove event.

What I am doing is allowing the user to click/hold the panel then drag the mouse left/right to scroll along its contents. It also allows the user to Click/Hold/flick/release (if that makes sense) so that the contents is thrown and eventually slows down to a stop (iPhone style).

This same code worked well when I just had one button on a standard panel, but when I do it on this FlowLayoutPanel the dragging makes the contents very jittery!!! I have attached the test project for anyone wanting to see what I mean.

Also, I really want to remove the horizontal scrollbar, as the user will obviously be using the above method to scroll its contents.

Finally, I don't believe the problem is due to the number of controls I have added to the FlowLayoutPanel (400) as you can reduce this to a much smaller number (30) and the same problem happens.

Any ideas?

Hummm double buffering didn't fix it, it doesn't actually look like a buffer issue anyway as it looks more like its jumping back and forth! Not sure why the zip didn't work, i could extract it from my computer! I have attached a new .zip of the project which I did on a different PC. Thanks

Hello there did you find any solution to this ? I am also trying something similar to this...if yes kindly guide me .

This article has been dead for over six months. Start a new discussion instead.