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
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.
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}"/>
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.
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.
This is a companion discussion topic for the original entry at https://www.kirupa.com/net/ui_virtualization_pg3.htm