3

Есть стэк, который биндится к списку изображений.

<StackPanel x:Name="ScreenshotList">
    <ItemsControl ItemsSource="{Binding Torrent.Screenshots, Mode=TwoWay}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"></StackPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <Image Height="122" Source="{Binding IsAsync=True}" Width="217" Margin="-15,0,0,0"/>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

Как мне асинхронно подгружать в него изображения (Большой объем), чтобы ui не останавливался? Пробовал в коллекцию через асинхронный метод добавлять, но поток все равно останавливается. Во view добавлял объекту IsAsync, тоже не помогает.

private async void GenerateTop()
{
    Screenshots = new ObservableCollection<string>();
    await Task.Run(() =>
    {
        LastAdded.Add(...)...
    }
}

2 ответа 2

3

Вы должны разделить модель и представление.

Функции загрузки модели должны бежать в неосновном потоке, и там пусть загружают что угодно как угодно медленно. Представление (в случае, если вы используете MVVM, это ваша VM) получает от модели любым способом извещение о том, что данные загрузка произошла и есть новые данные для показа, и (в главном потоке!) обновляет VM-список изображений.

Таким образом ваш UI не будет подвисать, ваш код будет будет асинхронным, а волосы — мягкими и шелковистыми.


Если подвисает загрузка картинки, попробуйте и правда использовать IsAsync в привязке. Единственная тонкость — у вас сейчас IsAsync грузит асинхронно строку, а конверсия в картинку выполняется в UI-потоке. Попробуйте указать конвертер:

class ImageSourceLoadingConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object p, CultureInfo ci) =>
        new BitmapImage(new Uri((string)value));

    public object ConvertBack(object value, Type targetType, object p, CultureInfo ci) =>
        throw new NotSupportedException();
}

в этом случае, кажется, конверсия будет производиться асинхронно.

8
  • Когда модель загрузит большую коллекцию объектов, ее нужно передать например целиком во VM, тогда UI начнет подвисать не так ли? Я думаю автор имел ввиду именно об этом)
    – Gardes
    26 апр 2017 в 17:19
  • @Gardes: Ну, вот пусть автор и подскажет, в чём проблема. Например, картинки слишком долго конвертируются в ImageSource, View может сделать это тоже в фоновом потоке. Пусть автор расскажет о том, что происходит не так.
    – VladD
    26 апр 2017 в 17:26
  • @Gardes да, вы правы. Основная проблема в том, что картинок много выского разрешение и в момент когда идет присвоение Source, подвисает UI, добавление IsAsync во вью не помогает 26 апр 2017 в 21:25
  • @IlyaShumikhin: А какого размера у вас список? И покажите код, который создаёт ImageSource, попробуем его ускорить.
    – VladD
    26 апр 2017 в 22:21
  • @IlyaShumikhin: А, у вас Torrent.Screenshots — это список строк? Понятно, то есть у вас картинки реально загружаются в UI-потоке, судя по всему.
    – VladD
    26 апр 2017 в 22:23
1

Сделайте обычный метод(не асинхронный). Заполните в нем всю коллекцию и попробуйте так:

<ItemsControl ItemsSource="{Binding Torrent.Screenshots, Mode=TwoWay, IsAsync=True}">

</ItemsControl>

далее:

private void GenerateTop()
{
    Screenshots = new ObservableCollection<string>();            
    LastAdded.Add(...)...           
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.