remove items from longlist selector if image dont load

Question

Hello in my WP8 app I get data from a web API and then set the Itemsource of my longlistselector to the instance of the Class.

The problem is that the API sometimes sends out image links before the Images are actually created, so when look at the longlist selectors Picture that is bound to a url in the Class it will turn out black and not load...

Now my question is, is there some way to filter those posts out so they don't show, the Images are not loaded in code behind but only in the XAML when the app runs..

EDIT:

Will add some code and better explain:

I use a webclient to download a Json file from the server and then use Json.net to deserialize it into my class like this:

string jsonstring = e.Result.ToString();
Latest lastdownloaded = JsonConvert.DeserializeObject<Latest>(jsonstring);

my class looks something like this:

public class Latest

        {
            public string ThumbLink{ get; set; }
            public int Id { get; set; }
            public string Title { get; set;
        }

I then set the the item source of my longlist selector to the instance

latestlonglist.ItemsSource = lastdownloaded;

And then my xaml simply looks like this:

<phone:LongListSelector x:Name="latestlonglist" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="latestlonglist_SelectionChanged">
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,0,0,17">
                                <Grid Height="160">
                                    <TextBlock x:Name="titleBlock" Text="{Binding Title}" TextWrapping="Wrap" Margin="145,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="26" Height="105" VerticalAlignment="Top"/>
                                    <Image x:Name="latestListImage" Source="{Binding ThumbLink}" VerticalAlignment="Top" HorizontalAlignment="Left" Width="140" />
                               </Grid>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>

the json containas 40 image links

Thanks

Answer 1

OK, there is no code so I can only guess. I guess that you have ObservableCollection<> of objects which contains picture objects which is in ViewModel.

You should make and async method for downloading pictures and storing it in BitmapImage. In ViewModel you make a method to load data where you for looping through you image links and launch download with await and add them to your ObservableCollection<>. That way items to your ObservableCollection<> will be added only after downloading them and you solve problem with black squares.

Here is your class:

class Latest
{
    public string ThumbLink { get; set; }
    public BitmapImage Thumb { get; set; }
    public int Id { get; set; }
    public string Title { get; set; }

    public async Task<bool> LoadThumbAsync()
    {
        WebClient client = new WebClient();
        client.OpenReadAsync(new Uri(this.ThumbLink));
        client.OpenReadCompleted += (s, e) => //Wait for completion
        {

            var tempBitmap = new BitmapImage(); //Create temp bitmap container
            tempBitmap.SetSource(e.Result); //Copy stream to bitmap container
            this.Thumb = tempBitmap;
            e.Result.Close();
            return;
        };
        return true; // return bool only to be able to await this method.
    }

}

class ViewModel
{

    ObservableCollection<Latest> lastdownloaded = new ObservableCollection<Latest>();

    ObservableCollection<Latest> allItems = new ObservableCollection<Latest>();

    public async void LoadData()
    {

        //Here you load all your thumbs in list allItems. This is only temporary container.

        for (var i = 0; i < allItems.Count; i++) // Now here for every item in that container you load thumb and add it to lastdownloaded list which you bind to Long List Selector.
        {
            await allItems[i].LoadThumbAsync();
            lastdownloaded.Add(allItems[i]);
        }
    }
}

Maybe this not the best code but should give you idea.