UI Virtualization

The RadBook API supports UI Virtualization, which means that RadBook will generate the minimal number of RadBookItem containers for a successful page flip. This significantly 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 RadBook is BookPanel. The BookPanel derives from VirtualizingPanel. It calculates the number of visible items and works with the ItemContainerGenerator from an ItemsControl (such as Book) to create UI elements only for the necessary (visible) items.

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

Example 1: Defining a RadBook

<Grid.Resources> 
    <sampleData:RadBookSampleData x:Key="DataSource" /> 
    <DataTemplate x:Key="PageTemplate"> 
        <Border Background="LightGoldenrodYellow"  
                BorderBrush="Black" 
                BorderThickness="1"> 
            <TextBlock HorizontalAlignment="Center"  
                       VerticalAlignment="Center" 
                       FontSize="36" 
                       Text="{Binding}" /> 
        </Border> 
    </DataTemplate> 
</Grid.Resources> 
<Grid x:Name="LayoutRoot" Background="White"> 
    <telerik:RadBook x:Name="book1"  
                     Width="500" 
                     Height="500" 
                     IsVirtualizing="False" 
                     ItemsSource="{Binding Source={StaticResource DataSource}, Path=VeryLargeDataSource}" 
                     LeftPageTemplate="{StaticResource PageTemplate}" 
                     RightPageTemplate="{StaticResource PageTemplate}" /> 
</Grid> 

The RadBook with Name "book1" is bound to a collection with 10000 Team objects. In the above example, the IsVirtualizing property is set to False (by default it is True, but for the sake of the example is False) which means that it will take few minutes in order the containers to be generated. That will freeze your application.

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

Enable UI Virtualization

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

Example 2: Enabling the UI virtualization

<telerik:RadBook x:Name="book2" IsVirtualizing="True"/> 

Now it will take just a second for the necessary containers to be generated.