Вложенный список с большим количеством изображений дрожит и работает медленно в WP7

Question

Я уже два дня бьюсь головой о том, чтобы заставить работать вложенный список, где у меня есть категории по вертикали, а затем по горизонтали. Количество изображений может быть легко 1000-2000. Вот мой код XAML для этого:

        <ListBox x:Name="CategoryList"  VirtualizingStackPanel.VirtualizationMode="Recycling">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Grid Height="100" Width="480">
                            <Image HorizontalAlignment="Left" Width="80" Height="80" Margin="0,20,0,0" Source="/Images/listicons14.png"/>
                            <Rectangle HorizontalAlignment="Right" Width="390" Height="80" VerticalAlignment="Bottom" Fill="#FF7BB800"/>
                            <TextBlock Text="{Binding Category}" Margin="121,45,0,25" HorizontalAlignment="Left" Width="100"/>
                        </Grid>
                        <ListBox VirtualizingStackPanel.VirtualizationMode="Recycling" ItemsSource="{Binding Advertisements}" x:Name="Advertisement" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Height="220" Width="300">
                                        <Border BorderBrush="#FF7BB800" BorderThickness="3" HorizontalAlignment="Center" Width="275" Height="190" VerticalAlignment="Center">
                                            <Image Source="{Binding AdvertisementImage}" Width="275" Height="190"/>
                                        </Border>
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                        </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

и вот как я сейчас его заполняю (для отладки я использую только три разных изображения, чтобы заполнить его. Размер картинок около 70 КБ, но я также тестировал очень маленький JPEG (по 10 КБ каждый). из них) и это не имело никакого влияния.

        for (int i = 0; i < 20; i++)
        {
            ProductCategory productcategory = new ProductCategory { Category = "Book" + i.ToString() };
            productcategory.Advertisements = new List<Advertisement>();
            for (int j = 0; j < 10; j++)
            {
                productcategory.Advertisements.Add(new Advertisement { AdvertisementImage = new Uri("/Images/advGalaxyS2reduced.jpg", UriKind.Relative) });
                productcategory.Advertisements.Add(new Advertisement { AdvertisementImage = new Uri("/Images/adviphone4sreduced.jpg", UriKind.Relative) });
                productcategory.Advertisements.Add(new Advertisement { AdvertisementImage = new Uri("/Images/advLumia800reduced.jpg", UriKind.Relative) });

            }
            productcategories.Add(productcategory);
        }
        this.CategoryList.ItemsSource = productcategories;

Я также проверил это со списком Telerik's Listbox, и он определенно лучше, но не "продаваемый", так что я все еще задаюсь вопросом, не упустил ли я еще кое-что здесь. На мой взгляд, виртуализация данных включена, если я смотрю объем оперативной памяти, которую она потребляет. Пожалуйста, помогите мне здесь:)

Answer 1

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

Вот некоторые другие более общие указатели:

• 1000 изображений это много, чтобы попробовать и показать сразу. Если вы попытаетесь это сделать, у вас будут проблемы с ресурсами, которые в лучшем случае скажутся на общей производительности.
• Вы всегда должны стремиться использовать изображения такого размера, как они будут отображаться на устройстве. Это экономит время (и ресурсы обработки): загружает (если необходимо) не больше байтов, чем необходимо, загружает не больше байтов, чем необходимо, и не требует изменения размера.
• Большое количество чего-либо на маленьком экране трудно для пользователя, чтобы найти и найти то, что он ищет. Обычно рекомендуется (есть несколько исключений) разбивать большие списки на более мелкие категории.
• Если вы хотите, чтобы отображался очень большой список (или список неизвестного размера), вам следует виртуализировать данные. Это требует наличия только подмножества данных, загруженных в любой момент времени (и загрузка была загружена, когда пользователь перемещается по данным) и, таким образом, экономит много времени и ресурсов.
• Всегда проверяйте, чтобы убедиться, что ваши данные виртуализируются, отслеживая, когда элементы загружаются и выгружаются.

Answer 2

1000 изображений - это много .. как утверждают и другие. попробуйте загрузчик lowProfileImage
http://blogs.msdn.com/b/delay/archive/2010/09/02/keep-a-low-profile-lowprofileimageloader-helps-the-windows-phone-7-ui-thread-stay-responsive-by-loading-images-in-the-background.aspx

Это не точное решение вашей проблемы, но оно может дать вам и идею об улучшении производительности