Dynamically generating listbox data from website, windows phone 7

Question

I am about to begin a major step in my app by taking images I post on my website and having the phone retrieve these images and dynamically add them to a listbox. That listbox will contain a thumbnail of the image, as well as the time it was posted. If a user clicks on the image, they will be taken to another page where they can either download it to the phone or share it to someone.

However, as with any absolute beginner, I am seeking tutorials on how to do this.

I have found two:

http://weblogs.asp.net/scottgu/archive/2010/03/18/building-a-windows-phone-7-twitter-application-using-silverlight.aspx

Windows Phone 7: Making ListBox items change dynamically

I'll make some mock code up in an effort to help understand my approach on this:

1. Have a listbox (name: photosfromsite)

2. Aim is to have ListBoxItems as individual photos from the site. How to populate these dynamically is yet to be done. How?

3. Be able to pass ListBoxItem name/identifier/etc to pass the image on new page when clicked (use query during page transition?)

4. Have website set with photos.

5. Do an asynch call upon application launch to retrieve these images.Calling maybe 10 at a time?

Page1 XAML:

<Grid x:Name="layoutgrid">
  <StackPanel x:Name="panelforlistbox">
     <ListBox x:Name="photosfromsite">
         <ListBox.ItemTemplate>

             <ListBoxItem>
             <Image Source="http://www.thewebsite.com/Image1.jpg>
             </ListBoxItem>

             <ListBoxItem>
             <Image Source="http://www.thewebsite.com/Image2.jpg>
             </ListBoxItem>

             ......
             ......

          </ListBox.ItemTemplate>
     </ListBox>
  </StackPanel>
</Grid>

Page1 C#:

//Some event handler to requisition the website for the images placed

//Some code to grab {get, set} the date and time

//Some code to generate a new listbox item in light of this.

//Some event handler for getting the updated list, if not already updated.

//Some event handler to signify when a user clicked on a listboxitem and to 
//pull that info to a new page.

I realize I am missing a large portion of this code, but I think I have a somewhat passable framework in mind of what I need to do?

Any help is always appreciated. I've picked up C# for the first time a couple months ago, and slowly I've been learning a lot about it. This seems to be the only major thing in my way before my app is done, and I just want to make sure I get it right!

And to make sure no ambiguity exists in the claim about what my question is -- Are these suitable tutorials or is there somewhere with a step-by-step instruction (preferably video) of how to accomplish exactly what I am trying to do. If not, can example code be written or pasted?

Answer 1

Have you considered how the website will maintain a list of its images? Or are you going to scrape the HTML for them?

Are they going to be FTP'd to the site or will there be some form of DB that contains a list of them?

A webservice could then be added to the site that returns a list of all images that would then be the datasource of the list box. A convertor could be used to modify the image file name to include the full path to where the image is? I'm guessing the webservice could even be used to create the thumbnails and send them to the phone, or the phone could retrieve them and create the thumbnail.

It would be worth considering the bandwidth requirements of moving large images images about.