在具有超过 1000 个图像项的 WPF 列表框中，缩放图像变慢 [英] 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 与滑块绑定.(滑块的值也绑定到 zoombarmanager.ZoomBarWidth.Width).但是我发现如果集合变得更大，例如:包含超过 1000 张图像，如果我使用滑块更改 iamges 的大小，它会变得有点慢.我的问题是.1. 为什么会变慢?成为它尝试缩放每个图像，或者它只是因为 notify("Width") 被调用超过 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~~>

但是如果我使用上面的样式，我必须在 ListBox 之外使用 ScrollViewer，否则我不知道如何获得平滑滚动的滚动条，并且包装面板似乎没有默认滚动条.有人帮忙吗?据说带有滚动查看器的列表框性能很差.

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，不支持虚拟化！可以创建自己的虚拟化 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!

[更新] 另请阅读这篇文章乔什·史密斯！要使 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 列表框中，缩放图像变慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！