WPF Flow Layout

Question

I have a ListBox with a horizontal WrapPanel inside to create a grid of content. It produces the correct layout but it's really slow with greater than a hundred or so items.

I see a few half-baked attempts at virtualising a WrapPanel on google but none of them seem production ready.

Am I missing a trick? How do I get performant and flexible (needs to reflow on resize) panel layouts?

(Note: cells are fixed size).

Answer 1

Yes, virtualizing is the correct step. WPF cant handle large amounts of UI items at once. Writing your own VirtualizingWrapPanel takes quite a lot of experience in WPF. WPF has no "ready" solution, so you either have to write it, or use someone else work.

Unlike VirtualizingStackPanel which offers the same functionality of StackPanel, this does not fully behave as the default WrapPanel that comes with WPF, there are some reasons for this:

1- WrapPanels can grow in two directions, while StackPanels only grow vertically or horizontally. Also, the growth in the direction orthogonal to the panel's orientation depends on the size of the items in the direction of the panel's orientation, so it is impossible to wrap into a new line/column unless the size of all items on the last line/column is known, but this is impossible if the two directions of the panel are being virtualized(since it does non-pixel based measurement for performance improvement).

2- The size of the extent is the same as the number of lines/columns(sections). On the StackPanel this is not a problem: Since only one item per section is allowed, the extent width/height is the number of items. On the WrapPanel, the number of sections depends highly on the size of items, and since the size of the items is not fixed and can change in any direction, it is impossible to calculate the number of sections on a WrapPanel.

The following solution was adopted when developing this panel:

1- The panel's extent is never known for sure. Instead, the number of sections is estimated after each MeasureOverride using the following expression : 'numberofitems/averageitemspersection'. Since the average number of items per section is updated after each scrolling, the extent of the panel is dynamic. The extent will be static if the items size in the panels orientation is fixed.

2- The items section/sectionindex can only be calculated sequentially, so if you are viewing the first items and you jump to a section that bypasses one or more unrealized sections, the panel will use the estimation to know which item is the first visible, this will be corrected if you go back to a realized section and go back sequentially. For example: if the panel knows that item 12 is in section 1 and the panel estimates 10 items per section,(section 0 is the first), if you jump to section 9 the panel will show the 100th item as the first visible item(that will only be correct if from section 1 to 9 there are exactly 10 items per section). But if you go back to section 1 and access all the sections sequentially until you reach section 9, then the panel will store all the items sections correctly so no further estimations will be made up to section 10.

3- Normally a WrapPanel inside a scrollviewer would be allowed to scroll vertically and horizontally, but since I can only virtualize one direction, this wrappanel will only scroll in the direction orthogonal to the panels orientation.(Meaning you shouldnt set the Virtualizing Panel Height/Width explicitly).

Copied from; http://virtualwrappanel.codeplex.com/

I didn't understand what you meant by fixed cells, but if you have fixed width / height per item, you could write better virtualization than the one I provided(VirtualWrapPanel). Just browse through code and try to understand what is going on.

What you call "doesnt quite work" is probably because it's not possible to make nice VirtualizingWrapPanel that would work exactly like the one WrapPanel(due to fact that the specific row of items depends on the next items and so on. ), but if you combine it with the fact that each item has the same width/height, I believe you could do better.

Also, you can get started by writing your own solution, based on these articles;

One: http://blogs.msdn.com/dancre/archive/2006/02/06/implementing-a-virtualized-panel-in-wpf-avalon.aspx

Two: http://blogs.msdn.com/dancre/archive/2006/02/13/531550.aspx

Three: http://blogs.msdn.com/dancre/archive/2006/02/14/532333.aspx

Four: http://blogs.msdn.com/dancre/archive/2006/02/16/implementing-a-virtualizingpanel-part-4-the-goods.aspx

Answer 2

How about try to use Grid and add the item to Grid such as :

( But I didn't test its performance)

   public void InitializeGridAsFourColumns()
   {
        for (int i = 0; i < 4; i++)
        {
            _customGrid.ColumnDefinitions.Add(new ColumnDefinition());
        }

   }

    private static int row = -1;
    private static int column = 0;


   public void AddItem(item)
   {

        //Add new RowDefinition every 4 items
        if (column % 4 == 0)
        {
            RowDefinition rd = new RowDefinition();
            rd.Height = GridLength.Auto;
            _customGrid.RowDefinitions.Add(rd);
            row++;
        }

        item.SetValue(Grid.RowProperty, row);
        item.SetValue(Grid.ColumnProperty, column % 4);
        column++;
        _customGrid.Children.Add(item);

   }