2012-02-03 34 views
0

我一直在敲我的头两天获得嵌套的列表框工作,在那里我喜欢垂直类别,然后水平图像。图像的数量可以很容易1000-2000。这是我的XAML代码吧:有很多图像的嵌套列表框在抖动和WP7中慢

 <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的列表框,它是肯定更好,但不是“可售”,所以我仍然想知道我在这里错过了些什么,在我看来,如果我正在查看它正在吃的RAM的数量,那么数据的虚拟化是ON的。请帮助我在这里:)

+1

1000 - 2000图像是很多。 不要被JPG的大小所欺骗;操作系统将把JPG数据扩展为每像素4字节。内存中图像的大小取决于图像的大小(以像素为单位)。 – 2012-02-03 10:14:58

回答

2

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

这里有一些其他的更一般的指针:

  • 1000图像是很多,在一次尝试和显示。如果你试图做到这一点,你就会遇到资源问题,这至少会影响整体绩效。
  • 您应该始终致力于使用设备上显示的尺寸图像。这节省了时间(和处理资源):下载(如果合适的话)没有比需要更多的字节,加载的字节数比需要的更多,而且不需要调整大小。
  • 小屏幕上的大量任何东西都很难让用户轻松驾驭并找到他们正在寻找的东西。通常建议(有一些例外)将大型列表细分为更小的类别。
  • 如果你想有一个非常大的列表(或一个未知大小的列表)显示,你应该virtualize的数据。这要求在任何时候只加载一部分数据(并且在用户浏览数据时加载换出),从而节省大量时间和资源。
  • 始终进行测试,以确保在加载和卸载项目时通过监视来虚拟化数据。