UI Virtualization in WPF

by kirupa   | filed under .NET and C#

When you are displaying a large amount of information, the chances of you actually displaying all of that information at one time are slim. More than likely, you are using a control that allows you to display only parts of the information with the option to view the rest in similar bite-sized chunks:

While visually you only see what is displayed in the viewable area, the rest of your control's data is rendered in the background anyway. The problem with this approach is that when dealing with large amounts of data, your control may seem unresponsive initially while waiting for the content outside of the viewable area to get processed.

A better approach is to only process the information that is loaded within the viewable area:

In this approach, even though your control is storing data that goes well beyond just what is visible in the viewable area, you decide to process your data on an as-needed basis as it enters your viewable area only. This approach is known as UI virtualization.

UI Virtualization

Like you saw in the previous section, UI virtualization is where only your viewable data is processed. In WPF, controls such as your listbox implement virtualization, but some controls such as your combobox do not. In this tutorial, you'll learn how to add virtualization support to a combobox.

Comboboxes are ideal candidates for virtualization because they, by design, only display a subset of a large amount of information:

[ comboboxes display a small sample of a large amount of data ]

For this tutorial, instead of spending time recreating a scenario where your combobox contains a lot of data, simply download, extract, and open a project I have already created. Don't worry - you'll have to implement the virtualization features yourself.

Let's get started:

1. First, download the sample project source files and extract the files to a location on your computer:

[ your extracted files ]

2. Once you have extracted the files, open the FontPreviewer project in Blend. Once you have opened your project, you will be instructed to Build your project before seeing anything useful:

[ for certain projects, you will have to build the project before seeing anything ]

Do as the instructions mention and go to Project | Build Project. Once you have built the project, you will see your Font Previewer project display in the Artboard:

[ your font previewer application ]

3. Your application consists of a few simple controls, and there are some interesting behind the scenes stuff I covered in another tutorial. Before proceeding, I want to highlight the performance issue you will be fixing. Run your application by pressing F5.
   
   Your Font Previewer application will run after a slight delay. Now, it's time to see the performance problems associated with our combobox. Click on the Select a font: drop down menu. When you click on the drop-down menu for the first time, you'll notice that your combobox takes a long time to display your list of items.
    
   If your computer has a lot of fonts, your application may even seem to freeze while all of the combobox's items are being processed:

[ your application is frozen because of some work your combobox is doing ]

Despite your application seeming to freeze, your application will work fine after a few seconds.

While your application seeming to freeze for a few seconds may not seem like a big deal, but it is minor details such as this that separate good applications from great ones. I want you to create great applications, so let's pick up from the previous step and learn how to fix this issue in the next section.

In the previous section, you received a brief overview of UI virtualization and how it can help improve performance in certain cases. We started to implement virtualization in a sample application, so let's pick up from where we left off and continue on this page.

4. Close your Font Previewer application, and let's go back to Blend. Right click on your combobox, and from the menu that appears, go to Edit Other Templates | Edit Layout of Items (ItemsPanel) | Edit a Copy:

[ we want to edit our ItemsPanel ]

5. Once you have selected the Edit a Copy option, the Create ItemsPanelTemplate Resource window will appear. In the Resource name (Key) field, give your template the name VirtualPanel:

[ let's give our ItemsPanelTemplate resource the name VirtualPanel ]

After naming your resource VirtualPanel press OK to create the new ItemsPanelTemplate resource and to close the Create ItemsPanelTemplate Resource.

6. Once your Create ItemsPanelTemplate Resource window closes, you will be in the editing mode for your ItemsPanelTemplate. Your Objects and Timeline panel will look like the following image:

[ what you should see in your Objects and Timeline panel ]

Your Artboard will also look like the following image:

[ what your Artboard looks like ]

7. We are going to replace your StackPanel with a different control. Select your StackPanel and press the Delete key to remove it. Once you have deleted your StackPanel, your Objects and Timeline panel and Artboard will look like the following two images:

[ you no longer see your StackPanel displayed ]

[ you no longer see anything in your Artboard either ]

8. Let's fill the void left by our missing StackPanel. From your Toolbox, find the Asset Library icon:

[ find the Asset Library icon ]

Once you have found the Asset Library icon, click on it to display your Asset Library window:

[ the Asset Library window will appear after you have clicked on your Asset Library icon ]

8. From your Asset Library window, find the VirtualizedStackPanel by searching for it from the search field found on the top-left corner:

[ use the search field to quickly find what you are looking for ]

Once you have found the VirtualizingStackPanel control, select it with your mouse. Once you have selected that control, your Asset Library window will disappear with your VirtualizingStackPanel appearing in your Toolbox:

[ after selecting a control from your Asset Library, it will appear in your Toolbox itself ]

9. Double click on the VirtualizingStackPanel from your Toolbox to insert it in your Artboard. Once you have double clicked on your VirtualizingStackPanel control, your VirtualizingStackPanel will appear in its default size and location in your Artboard.
    
   Your Objects and Timeline panel and Artboard will look like the following images:

[ your StackPanel from earlier has now been replaced with a VirtualizingStackPanel ]

[ looks can be deceiving, for behind the scenes lurks a VirtualizingStackPanel ]

10. That's all there is to improving your combobox's performance. Press F5 to test your application again. This time, when you click on your font drop-down menu, notice that your fonts display almost instantaneously without any delay.

Great! You've improved the performance of your application by simply swapping out one layout control (StackPanel) with a different control (VirtualizingStackPanel). Let's now look at the details of why you did the things you did in the next section.

In the previous section, 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 section, 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.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇