在自定义 ItemsPanel 中实现 UI 虚拟化 [英] Implement UI virtualization in custom ItemsPanel

问题描述

我的目标是显示一些布局，如官方 Android Imgurapp 其中项目具有固定宽度但高度可变.我已经有一个带有 GridView 的自定义面板.有用.但是，它破坏了一些东西:

My goal is to display some layout like the official Android Imgur app where items have fixed width but variable height. I already have a custom panel with a GridView. It works. However, it breaks a couple of things:

1. 我不了解 UI 虚拟化.当需要渲染大量图像时，这是一个很大的性能瓶颈.
2. 由于没有虚拟化，也不支持增量加载.

我搜索了很多，但找不到任何关于如何实现虚拟化的文档.所以，我有几个问题:

I've searched around a lot, but I couldn't find any documentation on how to implement virtualization. So, I have a couple of questions:

1. 甚至可以通过自定义面板获得虚拟化吗?怎么样?
2. 是否可以使用现有面板之一(例如VirtualizedStackPanel)来获得我需要的布局?

1. Is it even possible to get virtualization with custom panel? How?
2. Is it possible to use one of the existing panels (VirtualizedStackPanel for example) to get the layout I need?

推荐答案

我认为您无法在自定义面板上实现虚拟化.上次我需要自定义的虚拟化面板是在您在 Windows 照片应用程序中看到的原型中，我已经从头开始完成所有虚拟化.那么我看到了两个选项:

I don't think you can get virtualization on custom panels. The last time I needed custom, virtualized panel was in a prototype of what you see in the Windows Photos app, where I've done all virtualization from scratch. I see two options for you then:

1. 自己实现虚拟化 - 在 ScrollViewer 中放置一个面板(Canvas 效果很好，但您也可以使用自定义面板)，创建一些容器来填充几个屏幕值得的项目和滚动时 - 重新排列容器及其内容，以便在实现窗口中始终有一些项目.这很有趣，您可以获得惊人的性能，特别是如果您在后台线程上预先计算和缓存项目的布局.您可能需要付出一些努力来处理焦点、键盘输入(无论窗口位置如何，您都应该始终保持获得焦点的容器)或可能的可访问性，但这将是值得的.
2. 在常规 ListView 中使用您的自定义面板，而不是更改 ListView.ItemsPanel - 将其保留为默认值 (ItemsStackPanel) 和将您的自定义布局面板放在项目模板内，并具有这些面板的高但不同的行.这意味着您的布局不会到处都是锯齿状的 - 项目需要在某处与 ListViewItems 对齐，但实现基础要简单一些.我认为照片应用中的布局就是这样工作的.您需要付出很多努力来覆盖 ListView 处理输入和显示选择视觉效果的方式，但它可能对您有用.请记住，在这种情况下，您的 ItemsSource 将需要有一组项目以在每个 ListViewItem 中执行自定义布局.

1. Implement virtualization yourself - put a panel (Canvas works great, but you can use a custom panel too) in a ScrollViewer, create some containers to fill a few screens worth of items and as you scroll - rearrange the containers and their content to always have some items in the realization window. It's fun and you can get amazing performance, especially if you pre-calculate and cache the layout of items on a background thread. You might need to put some effort into handling focus, keyboard input (you should probably always keep the focused container realized regardless of window position) or possibly accessibility, but it's going to be worth it.
2. Use your custom panel in a regular ListView, but instead of altering the ListView.ItemsPanel - leave it as default (ItemsStackPanel) and put your custom layout panel inside of the item template and have tall, but distinct rows of these panels. This means that your layout won't be jagged everywhere - items will need to align with the ListViewItems somewhere, but it's somewhat simpler to implement the basics. I think that's how the layout in the Photos app works. You will need to put a lot of effort to override the way a ListView handles input and displays selection visuals, but it might work for you. Remember that in this case your ItemsSource will need to have groups of items to perform custom layout on in each ListViewItem.

我会选择第一个选项，但这取决于您.一开始需要做更多的工作，但总体而言，最终可能更容易正确，让您可以自由地将事物布置在没有任何行的情况下，并且它会教给您一些有用的东西.第二个选项只是意味着您必须屏蔽无论如何都不需要的内置行为.我认为第一个选项还可以更好地将视图层与视图模型分开，因为 ItemsSource 中不需要依赖于布局的分组，除非您实现某种视图层聚合器 ItemsSource 将处理来自视图模型的项目.

I'd choose the first option, but it's up to you. It's some more work initially, but overall it might end up being easier to get right, gives you freedom to lay things out without any rows and it will teach you something useful. The second option will just mean you'll have to mask built-in behaviors that you don't need anyway. I think the first option also separates the view layer better from the view model one as there is no layout-dependent grouping required in the ItemsSource, unless you implement some sort of view-layer aggregator ItemsSource that will process the items from the view model.

阅读这篇精彩文章，详细了解虚拟化的一些理论和实践:

Read more about some theory and practice of virtualization in this great article:

ListView 基础知识和虚拟化概念

这篇关于在自定义 ItemsPanel 中实现 UI 虚拟化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！