Virtualizing Wrap Panel

for WPF, Silverlight & Windows Phone 
  • World's first Virtualizing Wrap Panel
  • Supports Grouping of content even when virtualizing
  • Supports customizing group header rendering
  • Advanced grouped mode rendering features
  • Supports IEditableCollectionView data sources
  • Automatic re-virtualization/realization of items
  • ... many more features...

 

UI Virtualizing WrapPanel

 

The control is a UI Virtualization capable WrapPanel control for WPF, Silverlight, and Windows Phone.

 

It is extremely helpful in boosting the performance of UI, and improving the User-experience (UX), especially when you have the need to associate large amounts of data with an ItemsControl that has to display content in an automatic Wrapping fashion.

 

How To Use the Control?

 

 

What it does?

 

 

Online demonstration

 

  • Demo : Core features

 

  • Demo : Grouping, Custom Group Header rendering, Sorting and Filtering with Virtualization

It works just like the stock Wrap Panel control, but in addition, this control automatically viritualizes, realizes, and arranges the associated content, by automatically creating and destroying the containers for the content items on-the-fly.

 

 

It also supports various other advanced features / capabilities, such as...

 

1. Grouping of Content

 

 

Sample Projects (C#):

 

  • WPF - Core Features Sample

 

  • Silverlight - Core Features Sample

 

  • WPF - Virtualized Grouping, Sorting and Filtering features sample

 

  • Silverlight - Virtualized Grouping, Sorting and Filtering features sample

 

  • IEditableCollectionView support Sample

 

 

Download the installer from here.

The control supports virtualization even when grouping – i.e. perform virtualization and also continue to render the collection data using custom grouping setup on it.

 

The control offers three kinds of header & children content rendering., viz:

 

  • Continuation: The grouped data (header and children) will continue to flow one group after the other, wrapping lines in a standard manner
  • LineBreak: Each group header (and its grouped child items) will start to render in the new row/column
  • StandaloneRow: Each group header will live in a new row/column, and its children will start to render in the next row/column.

 

The StandaloneRow mode is similar to LineBreak mode, except that in this mode, the group header will live in its own row/column than the relevant grouped items.

2. Customized Group Header Summary Rendering

 

  • The control supports drawing a group header summary row
  • The group header is fully customizable via custom data template
  • A property ItemPositioningMode is also available, with two possible options: Greedy and Safe - to manage the available space for rendering the virtualized child items

3. Deep Customization of Drawing the "Grouped mode" Visuals

 

The control supports being able to customize the various drawing aspects of the Grouped mode, giving you the control on rendering up to the pixel level.

 

The following are some of the rendering aspects that you can control:

 

  • Custom extra spacing between group header row and data item row
  • Custom extra spacing between group rendering completion and where the group header row rendering begins
  • Should the control render the default item dimension worth of height spacing between group header and data item row
  • Should the control render the default item dimension height worth of spacing after a group has been rendered
  • Should the control render the default extra line before rendering the group header.

4. Customizing the Height of the Group Header

 

 

By default, the control will render the header with a Height of 24.0 units, but you can specify the header height if you are setting up a custom header via your custom data template (as described above).

 

To support custom height for the header rendering, there is a property in the control named GroupHeaderItemCustomHeight.

5. Supports Transactional Updates, Data Filtering and Sorting

 

  • IEditableCollectionView data sources: The control’s virtualization engine will support the transactional edits to the ItemsControl’s items source data, and the control will automatically re-virtualize/realize the contents for rendering in its viewport.

 

  • Dynamic update of the viewport, based on Filter and Sort: The control is capable of dynamic and automatic re-virtualization / realization of child items for re-rendering in the view port, on dynamically filtered and sorted data (for ICollectionView data sources)

6. UI Virtualize anything that can be scrolled

 

The control can be used to automatically "UI Virtualize" any content that can be scrolled.

 

The typical Use-case for this control is to use it as the ItemsPanelTemplate for an ItemsControl, but you can use this control to virtualize any scrollable content, not just only as ItemsPanelTemplate.

 

For example, you can host it inside a scrollviewer (as part of an ItemsControl's ControlTemplate) to UI virtualize the scrollviewer's content.

Screenshot of using the control to virtualize the scrollviewer's content, as part of the ItemsControl's ControlTemplate

7. Custom Layout Management

 

 

The control is written from scratch, and implements custom logic for content layout and scrolling.

 

The control supports two layout orientations viz., Horizontal and Vertical Orientations, and fully custom implements IScrollInfo interface for scrolling support.

8. On-Demand Realizing of Desired Child Item

 

 

The control is capable of realizing a specified item from the associated data-bound source and scroll it into view, given the item's index.

9. Configurable Virtualization Scheme

 

 

The control allows you to choose from two virtualization schemes - viz.,

 

  • dispose off (virtualize) the children the moment they leave the bounds of the viewport, OR
  • let the control perform a light-weight cache of the virtualized items.

10. Custom Item Dimension / Sizing

 

 

The child items content hosted in the control can have differing size of Height and Width values.

11. Animation of Wrapping Action

 

 

The control can (optionally) perform an animation while wrapping the child elements from one row/line to the next.

12. MVVM Design Pattern Friendly

 

 

The control is MVVM pattern friendly, and hence the control's capabilities can be used straight from your viewmodel.