удалить элементы из селектора длинного списка, если изображение не загружается

Привет, в моем приложении WP8 я получаю данные из веб-API, а затем устанавливаю Itemsource моего селектора длинного списка в экземпляр класса.

Проблема в том, что API иногда отправляет ссылки на изображения до того, как изображения будут фактически созданы, поэтому при просмотре селекторов длинного списка Изображение, привязанное к URL-адресу в классе, станет черным и не загрузится...

Теперь мой вопрос: есть ли способ отфильтровать эти сообщения, чтобы они не отображались, изображения не загружаются в код позади, а только в XAML при запуске приложения.

РЕДАКТИРОВАТЬ:

Добавлю немного кода и лучше объясню:

Я использую веб-клиент для загрузки файла Json с сервера, а затем использую Json.net для его десериализации в свой класс следующим образом:

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

мой класс выглядит примерно так:

public class Latest

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

Затем я устанавливаю источник элемента моего селектора длинного списка в экземпляр

latestlonglist.ItemsSource = lastdownloaded;

И тогда мой xaml выглядит просто так:

<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>

json содержит 40 ссылок на изображения

Спасибо


person Kasper S Mathiesen    schedule 17.03.2014    source источник


Ответы (1)


Хорошо, кода нет, поэтому я могу только догадываться. Я предполагаю, что у вас есть ObservableCollection<> объектов, содержащих объекты изображения, которые находятся в ViewModel.

Вы должны сделать и асинхронный метод для загрузки изображений и сохранения их в BitmapImage. В ViewModel вы создаете метод для загрузки данных, в котором вы for перебираете ссылки на изображения и запускаете загрузку с помощью await и добавляете их в свой ObservableCollection<>. Таким образом, предметы в ваш ObservableCollection<> будут добавлены только после их загрузки, и вы решите проблему с черными квадратами.

Вот ваш класс:

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]);
        }
    }
}

Возможно, это не лучший код, но он должен дать вам представление.

person Rovshan Mamedov    schedule 17.03.2014