![\"\"](\"http:\/\/www.jonathanantoine.com\/wp-content\/uploads\/2011\/10\/liveShaping001.png\" "\\"VirtualizingStackPanel00\\"")
<\/a>Virtualizing panels are involved when an application’s performance needs to be improved. It provide a base panel for virtualization of children elements inside it. Instead of creating all the UI element which are inside an ItemControls, only the one which need to be displayed are created. Because the process of creating these elements is intensive, the use of a VirtualizingPanel makes an item controls display faster.<\/p>\nThe VirtualizingPanel comes with new features in WPF 4.5: two properties named ScrollUnit and CacheLength and virtualization on grouped data. In this post we will discover them in details.<\/strong><\/p>\n This post is a part of a serie on WPF 4.5 new features<\/a>.<\/p>\n <\/p>\n To illustrate the new properties and their usage, we will create a demo project. It can be found on my Dropbox folder after registration<\/a>. A button is here to allow the user to add a lot of persons to the list (500 actually). When this operation is done, we calculate the elapsed render time and display it as a status bar message. This allow us to be sure that virtualization is really enabled. When it is, the load takes a dozen of ms and when it’s not, the operation takes a lot of time (7000 ms on my computer). This is one of the scenarii addressed by the virtualization. watch.Stop();<\/p>\n Message = string.Format("Rendering took {0} ms.", watch.ElapsedMilliseconds); Virtualization can be enabled and disabled via the VirtualizingStackPanel.IsVirtualizing attached property on a ListBox.<\/strong> By default it is but we force it anyway: To be able to see things clearly, I defined a style for the ListBoxItem which set their background to pink and I set the ListBox’s Background to blue: The ViewPort is the visible aera of the virtualizing panel. With virtualization, only visible inside the viewport are really created in memory.<\/strong> Creating this items can be intensive and requires a noticeable time to be done. If so, the scrolling experience is not very good for the user because the reactivness of the application falls to nothing. <\/p>\n To reproduce this scenario, I have create an UserControl named TimeConsumingControl<\/em> and I do something long in its constructor. Then I put it in the DataTemplate: <!–Rest of the data template–> In WPF 4.5 you can create a Cache of the item not displayed. When the virtualizing panel has finished the render of its items, it start the creation of the cache with a low priority. By doing so, when the user scroll into the list, he’ll not feel the slowness of the rendering because the items will already be created in the cache. Not that it’ll be true only for the one in the cache.<\/p>\n You can use two properties to configure the cache in WPF 4.5:<\/strong><\/p>\n To demonstrate the benefit of their use is hard to do with a picture, but you can try the demo application to notice it<\/a>.<\/p>\n Here is an example of their use in the the demo application XAML which define a cache of 2 pages before the viewPort and 3 after it: When virtualization is enabled, the scrolling can be perceived as little odd by the user because only full items are displayed. If an item does not fit entirely in the viewport defined by the ItemsControl then it’s not displayed. In WPF 4.5, you can set the ScrollUnit <\/a>property to one of these following values:<\/strong><\/p>\n So if we update the previous example to set this property to Pixel we’ll get the following XAML: In WPF 4.0, you lost virtualization when grouping is done on the collection you display. I repeat : Grouping = no virtualization in WPF 4.0.<\/strong> This is still the default behavior of WPF 4.5 but you can turn on the virtualization by using the IsVirtualizingWhenGrouping<\/em> attached property of the VirtualizingPanel<\/strong> <\/em>class. When this is done, you benefit of all the already described advantages of virtualization.<\/p>\n Here is how you can enable it via XAML:WPF 4.0 behavior<\/h3>\n
\nThis simple WPF application display a list of persons in a listbox with virtualization enabled<\/strong>. In the last part, we will group the persons by age. <\/p>\n
\n[csharp]foreach (var person in persons)
\n{
\n Persons.Add(person);
\n}
\nvar watch = new Stopwatch();
\nwatch.Start();
\n\/\/Wait for the rendering is finished..
\nDispatcher.CurrentDispatcher.Invoke(new Action(() => { }),
\n DispatcherPriority.Loaded, null);<\/p>\n
\n[\/csharp]<\/p>\n
\n[xml]<ListBox ItemsSource="{Binding Persons}" Background="LightBlue"
\n ItemTemplate="{StaticResource PersonDataTemplate}"
\n ItemContainerStyle="{StaticResource ListBoxItemStyle}"
\n VirtualizingStackPanel.IsVirtualizing="True"
\n HorizontalContentAlignment="Stretch" \/>
\n[\/xml]<\/p>\n
\n<\/a><\/p>\nCacheLength<\/h3>\n
\n[xml]<DataTemplate x:Key="PersonDataTemplate"
\n DataType="{x:Type local:Person}">
\n <Grid>
\n <!–This will take time to be instancied–>
\n <local:TimeConsumingControl \/><\/p>\n
\n …
\n <\/Grid>
\n[\/xml]<\/p>\n\n
\n[xml]<ListBox ItemsSource="{Binding Persons}"
\n ItemTemplate="{StaticResource PersonDataTemplate}"
\n ItemContainerStyle="{StaticResource ListBoxItemStyle}"
\n VirtualizingStackPanel.IsVirtualizing="True"
\n VirtualizingStackPanel.CacheLength="2,3"
\n VirtualizingStackPanel.CacheLengthUnit="Page"\/>
\n[\/xml]<\/p>\nScrollUnit<\/h3>\n
\n<\/a><\/p>\n\n
\n[xml]<ListBox ItemsSource="{Binding Persons}"
\n ItemTemplate="{StaticResource PersonDataTemplate}"
\n ItemContainerStyle="{StaticResource ListBoxItemStyle}"
\n VirtualizingStackPanel.IsVirtualizing="True"
\n VirtualizingStackPanel.ScrollUnit="Pixel" \/>
\n[\/xml]
\n<\/a><\/p>\nVirtualization when grouping<\/h3>\n
\n[xml] <ListBox ItemsSource="{Binding Persons}"
\n ItemTemplate="{StaticResource PersonDataTemplate}"
\n VirtualizingPanel.IsVirtualizing="True"
\n VirtualizingPanel.IsVirtualizingWhenGrouping="True">
\n <ListBox.GroupStyle>
\n <GroupStyle HeaderTemplate="{StaticResource GroupHeaderTemplate}" \/>
\n <\/ListBox.GroupStyle>
\n <\/ListBox>
\n[\/xml]
\n<\/a><\/p>\nIsContainerVirtualizable<\/h3>\n