在具有超过1000个图像项的WPF ListBox中，缩放图像变慢 [英] In a WPF ListBox with more than 1000 Image Items the Zoom Images become slow

问题描述

在开发照片查看器应用程序时遇到了问题。
我使用ListBox来显示图像，它包含在ObservableCollection中。
我将ListBox的ItemsSource绑定到ObservableCollection。

I met a problem when deveoping a photo viewer application. I use ListBox to Show Images, which is contained in a ObservableCollection. I bind the ListBox's ItemsSource to the ObservableCollection.

  <DataTemplate DataType="{x:Type modeldata:ImageInfo}">
        <Image 
            Margin="6"
            Source="{Binding Thumbnail}"
            Width="{Binding ZoomBarWidth.Width, Source={StaticResource zoombarmanager}}"
            Height="{Binding ZoomBarWidth.Width, Source={StaticResource zoombarmanager}}"/>
  </DataTemplate>

<Grid DataContext="{StaticResource imageinfolder}">
    <ScrollViewer
        VerticalScrollBarVisibility="Auto" 
        HorizontalScrollBarVisibility="Disabled">
        <ListBox Name="PhotosListBox"
            IsSynchronizedWithCurrentItem="True"
            Style="{StaticResource PhotoListBoxStyle}" 
            Margin="5"
            SelectionMode="Extended" 
            ItemsSource="{Binding}" 
           />
    </ScrollViewer>

我还使用滑块绑定ListBox中的Image'height。（滑块的Value也绑定到zoombarmanager .ZoomBarWidth.Width）。
但是我发现如果集合变得更大，例如：包含超过1000个图像，如果我使用滑块来改变iamges的大小，它会变得有点慢。
我的问题是。
1.为什么变慢？变得它试图缩放每个图像，或者只是因为通知（宽度）被调用超过1000次。
2.有没有办法解决这类问题并加快速度。

I also bind the Image'height in ListBox with a slider.(the slider's Value also bind to zoombarmanager.ZoomBarWidth.Width). But I found if the collection become larger, such as: contains more then 1000 images, If I use the slider to change the size of iamges, it become a bit slow. My Question is. 1. Why it become Slow? become it tries to zoom every images,or it just because notify("Width") is invoked more than 1000 times. 2. Is there any method to solve this kind of problem and make it faster.

PhotoListBoxStyle是这样的：

The PhotoListBoxStyle is like this:

    <Style~~ TargetType="{x:Type ListBox}" x:Key="PhotoListBoxStyle">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}" >
                    <WrapPanel 
                        Margin="5" 
                        IsItemsHost="True" 
                        Orientation="Horizontal" 
                        VerticalAlignment="Top"                             
                        HorizontalAlignment="Stretch" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style~~>

但如果我使用上面的Style，我必须在ListBox之外使用ScrollViewer，否则我不知道如何获得平滑的滚动滚动条和wrappanel似乎没有默认的滚动条。有人帮吗？据说滚动查看器的列表框性能很差。

But If I use the Style above, I have to use ScrollViewer outside ListBox, otherwise I have no idea how to get a smooth scrolling scrollerbar and the wrappanel seems have no default scrollerbar. Anyone help? It is said listbox with scrollviewer has poor performance.

推荐答案

问题是你的新布局面板是WrapPanel而且它没有'支持虚拟化！可以创建自己的Virtualized WrapPanel ...阅读更多这里

The problem is that your new Layout Panel is the WrapPanel and it doesn't support Virtualization! It is possible to create your own Virtualized WrapPanel... Read more here

还详细了解其他问题，如实施IScrollInfo 这里

Also read more about other issues like the implementation IScrollInfo here

我也强烈建议你不要仅仅为了替换布局面板而创建新的控件模板...而是执行以下操作：

I also highly recommend that your do not create a new control template just to replace the layout panel... Rather do the following:

<ListBox.ItemsPanel>
   <ItemsPanelTemplate>
      <WrapPanel Orientation="Horizontal"/>
   </ItemsPanelTemplate>
</ListBox.ItemsPanel>

这样做的好处是你不需要将列表框包装在滚动查看器中！

The advantage of doing this is that you do not need to wrap your listbox in a scrollviewer!

[ UPDATE ]同时阅读这篇文章！要使WrapPanel换行...你还必须记住禁用水平滚动......

[UPDATE] Also read this article by Josh Smith! To make the WrapPanel wrap... you also have to remember to disable horizontal scrolling...

<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />

这篇关于在具有超过1000个图像项的WPF ListBox中，缩放图像变慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！