Список с тысячами изображений в обертке

Question

Я пытаюсь создать список, который может содержать более тысячи изображений в сетке, такой как дизайн. В перспективе конструкции было бы очень похоже на это:

Поскольку я не могу использовать WrapPanel как сломается виртуализации UI и StackPanel не может перечислить изображения в такой сетке (?) Я пытаюсь решить эту проблему, используя модифицированную версию https://virtualwrappanel.codeplex.com

Мой XAML:

<ListBox x:Name="GameWheel" ItemsSource="{Binding GameData}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden"> 
      <ListBox.ItemsPanel> 
       <ItemsPanelTemplate> 
        <c:VirtualizingWrapPanel IsItemsHost="True" /> 
       </ItemsPanelTemplate> 
      </ListBox.ItemsPanel> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <Image x:Name="GameImage" Source="{Binding Path=ImagePath}" Width="{Binding ElementName=GameWheel, Path=ActualWidth, Converter={StaticResource widthConverter}}" /> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 

Хотя этот подход работает, он по-прежнему довольно медленно и с ошибками, особенно при использовании привязки по ширине изображения. Есть ли лучший способ архивирования одного и того же результата? Без предпочтительной упаковки.

Answer 1

Ознакомьтесь с моей реализацией VirtualizingWrapPanel. Также доступно (с более включенным) от NuGet.

Этот код изначально использовался в этой статье CodeProject, которая в основном работала и, похоже, была тем же самым местом, где вы начали. По пути я исправил несколько ошибок и улучшил производительность, чтобы он мог помочь вам.

Обновление: Ключ предназначен для привязки к VirtualizingWrapPanel.ItemWidth, а не к Image.Width. Была ошибка в обеих реализациях VirtualizingWrapPanel, которая предотвратила бы изменение размера детей, если значения ItemHeight10 или ItemWidth изменены. Я исправил эту ошибку в этом commit (строка 358).

По общему признанию, это исправление грубой силы, но я хотел кое-что проверить для вас и должен уйти. Я тестировал его с 10 000 изображений, и это было очень быстро. Я буду работать над лучшим решением (то есть: только переоценить, когда мы знаем, что значение изменилось) и обновить этот ответ, когда я это сделаю.

Обновление 2: Быстрое изменение для улучшения положения ребенка. См. Это commit.

//TODO: If either child Height or Width == PositiveInfinity and the other side == ChildSlotSize then we probably don't need to measure. Need to test this 
if (!child.DesiredSize.Equals(ChildSlotSize)) 
{ 
    child.Measure(ChildSlotSize); 
} 

Помещение для улучшения, но нет времени для надлежащего тестирования прямо сейчас, и это работает.