|
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.
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use
Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
|
UI Virtualization in WPF - Page 3
