UI Virtualization in WPF - Page 3
       by kirupa  |  29 July 2007

In the previous page, you finished virtualizing our combobox's contents by swapping the StackPanel with a VirtualizingStackPanel control. In this page, let's take a look at some of the details on why you did what you did in the previous two pages

Why it Worked - Virtualization in WPF
In the previous page, you learned how to improve the performance of your combobox by implementing virtualization. Even though you improved the performance, I simply provided steps you implemented. In this section, let's take a step back and look at why this works in greater detail.

While this seems like a great way to improve the performance of many controls, not all controls support UI virtualization. Behind the scenes, a WPF control is built-up through various templates that control everything from how the control looks to how the data is managed. Only controls that use an ItemsControl class for displaying data will work, and in the tutorial, you replaced a layout control responsible for organizing data inside your ItemsControl.

Why you Edit ItemsTemplate
To re-emphasize what was mentioned earlier, there is even a template for allowing you to customize how your data inside your control will be laid out. These layout controls can be adjusted by editing your ItemsPanelTemplate, and it is the layout control that you replaced in this tutorial.

For virtualization, we use the VirtualizingStackPanel, and controls such as your listbox automatically use the VirtualizingStackPanel for laying out items. As you saw with your combobox, though, some do not. So the main goal of what we did in this tutorial was to force our combobox to also use a VirtualizingStackPanel just like its better behaved cousin, the listbox.

Let's look at the XAML for what I have described:

<ItemsPanelTemplate x:Key="VirtualPanel">

   <VirtualizingStackPanel/>

</ItemsPanelTemplate>

In this tutorial, you created a new ItemsPanelTemplate called VirtualPanel. This VirtualPanel template contains only one item -  a VirtualizingStackPanel. That's not all you have to do though. Creating a new template is one thing. Getting your control to listen to your newly created template is something else.

In Blend, your new template was applied automatically because we created the new template by right clicking on our combobox itself. If you were not using Blend or are just curious to know the under-the-hood implementation, the XAML for where you tell your control to use this ItemsPanelTemplate is highlighted in the combobox XAML code:

<ComboBox HorizontalAlignment="Left" Margin="13,45,0,0" VerticalAlignment="Top" Width="150" MaxDropDownHeight="100" x:Name="ComboBox" Height="26" SelectedIndex="0" ItemsPanel="{DynamicResource VirtualPanel}" ItemsSource="{Binding Mode=OneWay, Source={StaticResource FontSource}}" ItemTemplate="{DynamicResource FontCollectionTemplate}"/>

Data Binding and ItemsControl Only - Others Need not Apply
WPF in its current state (.NET 3.0), supports UI Virtualization only for controls that, like I mentioned earlier, use the ItemsControl class and only if the data in your ItemsControl is data bound. If you use procedural code to send data to your control, UI virtualization will not work.

1 | 2 | 3