问题描述
为了使嵌套列表框正常工作,我现在已经花了两天时间,我在其中垂直喜欢类别,然后水平喜欢图像.图像数量可以轻松达到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中包含大量图像的嵌套列表框抖动且缓慢的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!