user interface - WPF ListBox with a ListBox - UI Virtualization and Scrolling

Question

My prototype displays "documents" that contain "pages" that are represented by thumbnail images. Each document can have any number of pages. For example, there might be 1000 documents with 5 pages each, or 5 documents with 1000 pages each, or somewhere inbetween. Documents do not contain other documents. In my xaml markup I have a ListBox, whose ItemsTemplate references an innerItemsTemplate that also has a ListBox. I want the 2 levels of selected items so that I can perform various operations on documents or pages (delete, merge, move to new location, etc). The innerItemsTemplate ListBox uses a WrapPanel as the ItemsPanelTemplate.

For the scenario where I have a large number of documents with a few pages each (say, 10000 documents with 5 pages each), the scrolling works great thanks to the UI Virtualization by the VirtualizingStackPanel. However, I have problems if I have a large number of pages. A document with 1000 pages will only display about 50 at a time (whatever fits on the screen), and when I scroll down, the outer ListBox moves to the next document, skipping the 950 pages or so that were not visible. Along with that, there is no VirtualzingWrapPanel so the app memory really increases.

I'm wondering if I am going about this the right way, especially since it is sort of difficult to explain! I would like to be able to display 10000 documents with 1000 pages each (only showing whatever fits on the screen), using UI Virtualization, and also smooth scrolling.

How can I make sure the scrolling moves through all of the pages in document before it displays the next document, and still keep UI virtualization? The scrollbar seems to only move to the next document.

Does it seem logical to represent "documents" and "pages" - with my current method of using a ListBox within a ListBox?

I would very much appreciate any ideas you have. Thank You.

Answer 1

It is possible to achieve smooth scrolling VirtualizingStackPanels in WPF 4.0 without sacrificing virtualization if you're prepared to use reflection to access private functionality of the VirtualizingStackPanel. All you have to do is set the private IsPixelBased property of the VirtualizingStackPanel to true.

Note that in .Net 4.5 there's no need for this hack as you can set VirtualizingPanel.ScrollUnit="Pixel".

To make it really easy, here's some code:

public static class PixelBasedScrollingBehavior 
{
    public static bool GetIsEnabled(DependencyObject obj)
    {
        return (bool)obj.GetValue(IsEnabledProperty);
    }

    public static void SetIsEnabled(DependencyObject obj, bool value)
    {
        obj.SetValue(IsEnabledProperty, value);
    }

    public static readonly DependencyProperty IsEnabledProperty =
        DependencyProperty.RegisterAttached("IsEnabled", typeof(bool), typeof(PixelBasedScrollingBehavior), new UIPropertyMetadata(false, HandleIsEnabledChanged));

    private static void HandleIsEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var vsp = d as VirtualizingStackPanel;
        if (vsp == null)
        {
            return;
        }

        var property = typeof(VirtualizingStackPanel).GetProperty("IsPixelBased",
                                                                     BindingFlags.NonPublic | BindingFlags.Instance);

        if (property == null)
        {
            throw new InvalidOperationException("Pixel-based scrolling behaviour hack no longer works!");
        }

        if ((bool)e.NewValue == true)
        {
            property.SetValue(vsp, true, new object[0]);
        }
        else
        {
            property.SetValue(vsp, false, new object[0]);
        }
    }
}

To use this on a ListBox, for example, you would do:

<ListBox>
   <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
         <VirtualizingStackPanel PixelBasedScrollingBehavior.IsEnabled="True">
          </VirtualizingStackPanel>
       </ItemsPanelTemplate>
   </ListBox.ItemsPanel>
</ListBox>