UI Virtualization

The RadTileView API supports UI Virtualization, which processes only information loaded in the viewable area, which reduces the memory footprint of the application and speeds up the loading time thus enhancing additionally the UI performance.

The standard layout system creates item containers and computes layout for each item associated with a list control. The word "virtualize" refers to a technique by which a subset of user interface (UI) elements are generated from a larger number of data items based on which items are visible on-screen. Generating many UI elements when only a few elements might be on the screen can adversely affect the performance of your application.The default ItemsPanel for the RadTileView is TileViewPanel. The TileViewPanel derives from VirtualizingPanel. It calculates the number of visible items and works with the ItemContainerGenerator from an ItemsControl (such as the TileView) to create UI elements only for visible items.

In order to enable the Virtualization feature of the RadTileView, you need to set the IsVirtualizing property to True.

The following tutorial shows how to bind to a collection of business objects and virtualize the items displayed in a RadTileView element using the IsVirtualizing property.

Here is a simple RadTileView declaration:

<UserControl.DataContext> 
    <sampleData:RadTileViewSampleData x:Key="DataSource" /> 
</UserControl.DataContext> 
<Grid> 
    <telerik:RadTileView ColumnWidth="300"  
                         ContentTemplate="{StaticResource contentTemplate}" 
                         ItemsSource="{Binding}" 
                         ItemTemplate="{StaticResource headerTemplate}" 
                         MinimizedColumnWidth="250" 
                         MinimizedRowHeight="200" 
                         RowHeight="300" /> 
</Grid> 

The RadTileView is bound to a collection with 5000 objects. By default the IsVirtualizing property is set to False. Which means that when run the application, it will take a while to generate the RadTileViewItems containers. That will freeze your application.

In this case you need to use the UI Virtualization behavior of the RadTileView.

Enable UI Virtualization

In order to enable the UI Virtualization behavior, you should set the IsVirtualizing property of the RadTileView to True. See the example below:

    <telerik:RadTileView x:Name="radTileView" IsVirtualizing="True" /> 

Now when you run the application, only those elements that might be on the screen will be generated. For example if you have 5 columns x 1000 rows of restored tiles, but only those that are visible on the screen will be realized. And as you scroll to display more tiles - their containers will be generated on the fly. The same applies to the Minimized items - those that are visible will be realized and the containers for the rest will be generated only after they are brough into view by scrolling.

Note that internally the IsVirtualizing property sets the TileViewPanel.IsVirtualizing attached property. In the previous example setting the IsVirtualizing property can be replaced with the following initialization: <telerik:RadTileView x:Name="radTileView" telerik:TileViewPanel.IsVirtualized="True"/>