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 User-interface 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 Does It Do?

 

 

Online demonstration

 

  • Demo : Core features

 

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

 

UI Virtualization

 

 

The control works just like the stock .NET WrapPanel control, but in addition, the control automatically virtualizes, realizes, and arranges the associated content, by automatically creating and destroying the containers for the content items on-the-fly.

 

This means the UI of your ItemsControl or ScrollViewer is completely virtualized, consequently letting you to allow your users to view and scroll through large amounts of visuals / data items very quickly.

 

 

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.

 

Grouping of Content

 

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.

Screenshot of the control rendering its virtualized view based on the Grouping and Sorting setup on the its data source:

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

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.

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.

Dynamic Injection Of Control Supported

 

 

The control, by default, supports its use directly in XAML -i.e. hosting it inside an ItemsControl or ScrollViewer instance or even using it as a WrapPanel control directly, and be able to transparently use it in a MVVM design-pattern friendly manner.

 

In addition to that,  it also supports some advanced scenarios of usage - i.e. there are scenarios where you would want to dynamically inject the control either via code or swap the control as the panel via some style triggers.

 

The control supports such advanced scenarios of usage as well, and you enable this usage by simply setting a property in the control - i.e. IsDynamicConstructionCapabilityEnabled to true.

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)

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

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.

Advanced Alignment Management

 

 

The control fully supports Alignment setting - i.e. all modes: Horizontal and Vertical, and all alignments for each of these, like Left, Center and Right, etc.

 

The control also allows you to control deeper aspects of when aligning, viz.,

 

  • whether the control should use a custom set render-time Margin value when re-computing the viewport extent spacing adjustment

  • whether the control should adjust right HorizontalAlignment setup considering scroll info
  • whether the control should share unused space equally between left and right sides of the panel when aligning for HorizontalAlignment

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.

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.

Custom Item Dimension / Sizing

 

 

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

Animation of Wrapping Action

 

 

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

MVVM Design Pattern Friendly

 

 

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