本文介绍了WP7中包含大量图像的嵌套列表框抖动且缓慢的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

为了使嵌套列表框正常工作,我现在已经花了两天时间,我在其中垂直喜欢类别,然后水平喜欢图像.图像数量可以轻松达到1000-2000.这是我的XAML代码:

I have been now banging my head two days for getting nested listbox working, where I have like categories vertically and then the images horizontally. Amount of images can be easily 1000-2000. Here is my XAML code for it:

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

这就是我现在如何填充它(这是出于调试目的,仅使用三张不同的图片来填充它.图片的大小约为70kb,但我也测试了非常小的jpeg(每张10kb)其中),并且没有任何影响.

and here is how I'm filling it now (this is as a debugging purposes to use just three different pictures to fill up it. Size of the pictures are about 70kb, but I tested very small jpeg as well (10kb each of them) and it didn't have any impact.

        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的Listbox进行了测试,它肯定更好,但不是可出售"的,所以我仍然想知道我在这里是否还缺少一些东西.在我看来,如果我正在查看正在消耗的RAM数量,则可以实现数据虚拟化.请在这里帮助我:)

I have tested this also with Telerik's Listbox and it is definitely better but not "sellable", so I'm still wondering am I missing some more here. In my mind virtualization for data is ON if I'm looking the amount of RAM it is eating. Please help me out here:)

推荐答案

我怀疑是嵌套列表框导致了此问题,因为布局引擎在滚动时需要不断地重新测量所有内容.我希望将布局更改为项目大小固定的布局,然后查看是否仍然存在相同的问题.

I suspect that it is the nested listboxes that are causing the problem as the layout engine will need to contantly be re-measuring everything as you scroll. I'd look to change the layout to one which has a fixed item size and then see if you still have the same issues.

还有其他一些更一般的指针:

Here are some other more general pointers:

    一次尝试显示
  • 1000张图像的尝试很多.如果尝试执行此操作,则将遇到资源问题,这些问题充其量只会影响整体性能.
  • 您应始终以使用将在设备上显示的尺寸的图像为目标.这样可以节省时间(和处理资源):下载(如果适用)的字节数不超过所需的字节数,加载的字节数不超过所需的字节数,并且无需调整大小.
  • 用户很难在小屏幕上浏览大量的任何东西,以找到他们想要的东西.通常建议(有一些例外)将大列表分为较小的类别.
  • 如果要显示非常大的列表(或大小未知的列表),则应虚拟化数据.这就要求在任何一次仅加载一部分数据(并且在用户浏览数据时加载交换出来的数据),从而节省了大量时间和资源.
  • 始终通过监视项目的加载和卸载时间进行测试,以确保您的数据已被虚拟化.
  • 1000 images is a lot to try and display at once. If you try to do this you'll have resource issues which, at best, will impact overall performance.
  • You should always aim to use images of the size they will be displayed on the device. This saves time (and processing resources) in: downloading (if appropriate) no more bytes than are needed, loading no more bytes than are needed and not having to resize.
  • Large numbers of anything on a small screen are hard for the user to naivigate and find what they are looking for. It is generally recommended (there are a few exceptions) that you break down the large lists into smaller categories.
  • If you want to have a very large list (or a list of unknown size) displayed you should virtualize the data. This requires having only a subset of the data loaded at any one time (and swapping out was is loaded as the user navigates through the data) and thereby saving lots of time and resources.
  • Always test to ensure that your data is being virtualized by monitoring when items are loaded and unloaded.

这篇关于WP7中包含大量图像的嵌套列表框抖动且缓慢的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-01 06:50