Virtualizing Wrap Panel v 8.0
- World's first Virtualizing Wrap Panel for WPF and Silverlight
- Supports Grouping of content even when virtualizing
- Supports customizing group header rendering by accepting a custom data template
- Advanced grouped mode rendering features
- Supports IEditableCollectionView data sources (transactional edit commits)
- Automatic re-virtualization/realization of items based on Filtering & Sorting of ICollectionView sources
- Custom item size support
- Multiple virtualization schemes
- On-demand realizing of child items
- Host millions of items, and still enjoy smooth scrolling user-experience
- MVVM design pattern friendly
VirtualizingWrapPanel .NET - A "UI Virtualizing" Wrap Panel control
Resources & Training Kits
The control is a "UI Virtualization" capable WrapPanel control for the Silverlight, WPF and Windows Phone (WP 7 & Mango) applications.
It is extremely helpful in boosting the performance of UI, and improving on 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.
Features overview
Unlike the standard Wrap panel, this control automatically viritualizes, realizes, and arranges the associated content, by automatically creating and destroying the containers for the content items.
Instead of letting the layout system generate all the UI elements that are associated with the control (i.e. all items from the content), the control automatically works out the number of elements that will be displayed in the viewport, and creates the UI element containers for only those elements that will be visible at any given time in the control.
Online demonstration
- Demo : Core features
- Demo : Grouping, Custom Group Header rendering, Sorting and Filtering with Virtualization
Sample Projects (C#):
(download)
- 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
MVVM Design Pattern Friendly
In contrast to the very powerful features in the control, you will find it extremely easy to setup and run the control in your applications with absolutely no procedural code.
Either using Designer tools like MS Expression Blend or such other designer tools, or even with hand-cranked one line of XAML, you will be able to run the control in just few seconds.
You can see a screen-shot here that displays a code snippet where the control has been setup in just one line of XAML, which instantiates the BinaryVirtualizingWrapPanel control, and sets it as the ItemsPanelTemplate, having configured some of its rich UI properties as well.
Custom Item Dimension / Sizing
The child items content hosted in the control can have differing size of Height and Width values.
The control is capable of rendering differing item sizes (with a maximum size specified via the ItemDimension property), and still can render it virtualized and support grouping, filtering and sorting on the children items.
Design-time/Tracing Friendly Assembly
The evaluation version of the control does not support XAML design-time view.
This feature is available only for retail customers.
When in evaluation mode, the control can be used as normal, but you will have to edit the XAML file directly to set up the control instance. - i.e. only XAML code view is available, not the XAML design-time view.
So you will not be able to open the XAML design-time view in Visual Studio IDE when working with the control.
Retail edition of this control does not have this limitation however.
For more details, please refer to a relevant section in our Technical FAQ page.
View the online demonstration below for this feature in action:
Supports Grouping of Child Items
The Virtualizing Wrap Panel control supports virtualization even in the context of Grouping of data – i.e. perform virtualization and also continue render your ICollectionView data using your custom grouping setup on it.
The control offers three kinds of header/children 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: In LineBreak mode, each group header (and its grouped child items) will start to render in the new row/column
- StandaloneRow: In StandaloneRow mode, 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.
All the above features can be done with absolutely no code, so its fully MVVM pattern friendly.
Refer to the screen shots below for a sample of the control rendering grouped data in each of the above mode.
Customized Group Header Summary Rendering, using custom header DataTemplate
The control supports:
- Group header summary row rendering
- Group header is fully customizable via custom data template; the data to be rendered is made available to the template via its DataContext by the control
- A new property ItemPositioningMode has been introduced, with two possible options: Greedy and Safe to manage the available space for rendering the virtualized child items
Deep Customization of Rendering the "Grouped mode" artifacts
The control supports being able to customize the various rendering 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
These features can be enabled via the control's dependency properties (for WPF), and via the customization of the Group header data template (for Silverlight).
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.
You can set this property with a value of your choice, and the control will render the group header nicely accordingly.
This property is a dependency property, so you can even bind to it if your needs are such, but if you know the height of the data template visual right up-front, then simply set that value to this property.
Supports Transactional Updates, Data Filtering and Sorting
IEditableCollectionView data sources: This will mean 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 now 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 (as part of ItemsControl)
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 scollviewer (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
Other Core Features
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.
"On demand" realizing of a 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.
This feature will let you have fine-grain control over the virtualizing mechanism to be used, purely based on the amount of memory to be used in not disposing off the virtualized items vs. the disk reads required to realize/(re)construct the item containers for the UI elements again (when needed again).
You can decide on this based on the ItemTemplate/datatemplate of your items that are to be displayed in the control.
When disposing off the virtualized items/item containers, the control performs the clean up in a separate dispatcher operation, so as to ensure that the virtualization process eliminates any negative performance impact.
Animation of wrapping action
The control can (optionally) perform an "animation" while wrapping the child elements from one row/line to the next.