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

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 ]

  1. 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 ]

  1. 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 on the next page.

Onwards to the next page!

1 | 2 | 3


kirupa.com's fast and reliable hosting provided by Media Temple.