Bulk Data with images in LongListSelector

Question

Following is one screen of my app that loads around 100 items on each search call to server (WCF).

I have two following questions.

One: currently i am assigning all the resultant items to itemssource of longlist selector but i want to load initially 10 items and when user swipes down to almost end it load 10 more. have seen this behavior in many applications (foursquare) but couldn't figure out because i am new for silverlight.

Two: If the item has image then PicturePath is set to the server image path otherwise local no-image path is set. Problem is when image is being downloaded the image area is shown blank until it fully downloads and then starts showing images, i need it be be something like foursquare shows until image is completely loaded. My binding code is given below along with my requirement.

Thanks.

Answer 1

Makes no sense to answer both questions with a bunch of code.

Regarding the first question, you need a way to detect when the user has scrolled to the bottom of the ListBox / LongListSelector. You need to use ObservableCollection instead of a simple List, because ObservableCollection notifies the UI when the new items are added to it.

This question has been asked dozens of times before, for example see here.

Regarding the second question, the simplest solution would be to use two images, one on top of the other inside the ItemTemplate. That way the static, local image will be shown while the dynamic is empty, and when the dynamic one is downloaded it will cover the static one. It's rendered on top of the static image so it's as if the static image was not there.

<Grid>
    <Image Source="Assets/StaticImageFromLocalCache.jpg" Width="400" Height="400" />
    <Image Source="Assets/DynamicImageFetchedFromInternet.jpg" Width="400" Height="400" />
</Grid>