在WP7中,带有大量图像的嵌套列表框抖动缓慢

时间:2012-02-03 09:52:27

标签: c# performance windows-phone-7 listbox

我现在一直在敲打我的头两天让嵌套列表框工作,我在那里垂直分类,然后是水平图像。图像数量可以很容易地为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>

以下是我现在填写它的方法(这是一个调试目的,只使用三张不同的图片来填充它。图片的大小约为70kb,但我也测试了非常小的jpeg(每个10kb)他们没有任何影响。

        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量,那么数据的虚拟化就是ON。请帮帮我:))

2 个答案:

答案 0 :(得分:2)

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

以下是一些其他更通用的指示:

  • 一次尝试并显示1000张图片。如果您尝试这样做,您将遇到资源问题,这些问题充其量只会影响整体性能。
  • 您应始终瞄准使用将在设备上显示的尺寸的图像。这节省了时间(和处理资源):下载(如果适用)不超过所需的字节数,加载的字节数不超过所需的字节数,而不必调整大小。
  • 小屏幕上的大量任何内容都难以让用户无法想象并找到他们想要的内容。通常建议(有一些例外情况)将大型列表分解为较小的类别。
  • 如果您希望显示非常大的列表(或未知大小的列表),则应虚拟化数据。这要求在任何时候只加载一部分数据(并且在用户浏览数据时加载交换),从而节省大量时间和资源。
  • 始终通过监视何时加载和卸载项目来进行测试,以确保您的数据正在虚拟化。

答案 1 :(得分:0)

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

它不是你问题的确切解决方案,但它可能会给你和想法  关于绩效改进