Wrap Panel Virtualization

• Download source code - 2.43 MB
• Download Media Assistant - 2.09 MB
• Download Media Assistant from CodePlex

Introduction

While developing Media Assistant, I faced several issues, mostly with the performance. I have written another article titled Replacing TreeView with ListBox, where I explained how I simulated a listbox to look like a tree view to support virtualization. I had to do that because a tree view performs very, very slow if there are about 20,000 nodes. I faced a similar issue when I added a Thumbnail View to display the movies in the repository. I used a ListBox where I changed the ItemsPanel to WrapPanel. When I use the WrapPanel, the ListBox loses its virtualization ability and it takes a lot of time to display 5000 movies in my repository. Because WrapPanel doesn't support virtualization. In this article, I will explain how I virtualized the WrapPanel.

Thumbnail View

ListBox with WrapPanel

I changed the ItemsPanel of ListBox with WrapPanel to show the thumbnail view.

<ListBox x:Name="thumbnailListBox" ItemsSource="{Binding DataSource.ResultMovies}" 
          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
          SelectedItem="{Binding DataSource.SelectedMovie}"
          ScrollViewer.IsDeferredScrollingEnabled="True"
          ItemTemplate="{StaticResource NormalThumbnailTemplate}"
          ScrollViewer.ScrollChanged="HandleScrollChanged"
          >
    <ListBox.ContextMenu>
        <ContextMenu>
            <MenuItem Header="Play" Command="{Binding DataSource.PlayMovieCommand}"/>
            <Separator/>
            <MenuItem Header="Show in Windows Explorer" 
               Command="{Binding DataSource.ShowMovieInWindowsExplorerCommand}"/>
        </ContextMenu>
    </ListBox.ContextMenu>
            
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Once I used the WrapPanel with ListBox, it displays the movies in a thumbnail like view without virtualization. I could not find any solution to virtualize the WrapPanel. So, I investigated which part of my code was taking time. Then I found that individual thumbnail items take some time to render because I used an image, there was some processing with each item, and I was using the converters, etc.

I tried with a simple border without anything in it with WrapPanel and it displays very quickly. So, I tried to use the detail movie view with an image and other information only for the items which are in the visible area, and all other items which are not in the visible area with a simple border. I kept changing the views while the user scrolled. I subscribed to the ScrollChanged event and used an ItemTemplate which switches between a normal border and a detail movie view.

Thumbnail Template

<DataTemplate  x:Key="NormalThumbnailTemplate">
    <Border Width="300" Height="200" BorderThickness="1" Margin="5" BorderBrush="Gray">
        <ContentControl x:Name="content" Content="{Binding}" ContentTemplate="{x:Null}"/>
    </Border>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding IsVisible}" Value="True">
            <Setter TargetName="content" Value="{StaticResource NormalThumbnail}" Property="ContentTemplate"/>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

In the movie data, I used a property IsVisible which is used in the DataTrigger to switch to the thumbnail view. NormalThumbnail is the DataTemplate which displays the detail movie information with image and other data. So I'm not going to explain that part in this article.

How to identify which items are in the visible area of the ListBox

private void HandleScrollChanged(object sender, ScrollChangedEventArgs e)
{
    ShowVisibleItems(sender);
}

private void ShowVisibleItems(object sender)
{
    var scrollViewer = (FrameworkElement) sender;
    var visibleAreaEntered = false;
    var visibleAreaLeft = false;
    var invisibleItemDisplayed = 0;
    foreach (Movie item in thumbnailListBox.Items)
    {
        if (item.IsVisible) continue;
        var listBoxItem = 
          (FrameworkElement) thumbnailListBox.ItemContainerGenerator.ContainerFromItem(item);
        if (visibleAreaLeft==false && 
            IsFullyOrPartiallyVisible(listBoxItem, scrollViewer))
        {
            visibleAreaEntered = true;
        }
        else if (visibleAreaEntered)
        {
            visibleAreaLeft = true;
        }
        if(visibleAreaEntered)
        {
            if(visibleAreaLeft && ++invisibleItemDisplayed>10)
                break;
            var job = new Job(MakeVisible);
            job.Store.Add(item);
            job.Start();
        }
    }
}

This code simply finds those items which are fully or partially visible and marks them as visible. I used a Job class which marks the items to be visible in a different thread. I did it just to delay the trigger. But it is not necessary in most cases. So, ignore that part.

protected bool IsFullyOrPartiallyVisible(FrameworkElement child, FrameworkElement scrollViewer)
{
    var childTransform = child.TransformToAncestor(scrollViewer);
    var childRectangle = childTransform.TransformBounds(
                              new Rect(new Point(0, 0), child.RenderSize));
    var ownerRectangle = new Rect(new Point(0, 0), scrollViewer.RenderSize);
    return ownerRectangle.IntersectsWith(childRectangle);
} 

This code identifies if an item is in the visible area of the scroll viewer. Then I find the visible items rectangle and the view point's rectangle in the same co-ordinate system and find the intersection. And I'm done.