Click here to Skip to main content
15,867,453 members
Articles / Desktop Programming / WPF

Replacing TreeView with ListBox

Rate me:
Please Sign up or sign in to vote.
4.83/5 (18 votes)
6 Oct 2011BSD4 min read 70.5K   5.2K   66   11
TreeView is not good enough to support millions of nodes. Simulating using a ListBox might help.

Introduction

Performance of the TreeView control is not good enough to handle thousands of nodes. It does not do UI virtualization if a single node contains a few thousands of child nodes. So I used a ListBox which supports virtualization to simulate the TreeView.

Background

I was developing an Open Source project named Media Assistant which manages all your media (music and movies) files and provide information information from IMDb and provide recommendation from TasteKid and many other features. But when I added a few thousands of movies in the application, it collected about 24 thousands of artist/genre and other information. I display the Media Library in a TreeView. I found that TreeView cannot handle such huge data. It was talking a long time to load and expand a node. Specially if a single node has a few thousands of children. I searched on the net about the problem and found a custom TreeView control which supports virtualization. But the performance was still not satisfactory. So I needed some kind of data virtualization and UI virtualization to solve my problem. I found a beautiful article about Data Virtualization. But data virtualization explained in the article works only for flat data not with hierarchical data. So, I ended up with a solution to use ListBox where I can do Data Virtualization, and ListBox supports UI virtualization by default. A complete solution to my problem.

Media_Library.png

How to simulate TreeView control with a ListBox

To explain how I implemented a ListBox which looks like TreeView with Data Virtualization, I split the problem in two parts. The first part will explain Templating ListBox in such a way that it looks like a TreeView, and the second part will explain how I converted hierarchical data to a flat list so that I can achieve Data Virtualization.

Templating ListBox so that it looks like a TreeView

HTML
<ListBox Name="Tree" DockPanel.Dock="Top" 
       ItemsSource="{Binding DataSource.OrderedLibraryItems}" 
       Width="230" HorizontalAlignment="Left"
       BorderThickness="0"
       Background="Transparent"
       VirtualizingStackPanel.IsVirtualizing="True"
       VirtualizingStackPanel.VirtualizationMode="Standard"
       ScrollViewer.IsDeferredScrollingEnabled="True"               
       ItemTemplate="{StaticResource ListLibraryItemTemplate}"
       SelectionMode="Single"
       MouseDoubleClick="HandleMouseDoubleClick"
/>

By default, ListBox uses VirtualizingStackPanel. I used deferred scrolling so that while scrolling, the ListBox doesn't get updated. In the ItemsSource, I bind the flat lists which is a flat representation of my hierarchical data. ListLibraryItemTemplate represents the list items so that it looks like a node of a TreeView.

XML
<DataTemplate x:Key="ListLibraryItemTemplate" >
    <StackPanel x:Name="listItemPanel" Orientation="Horizontal" 
          Margin="{Binding Converter={StaticResource LibraryItemMarginConverter}}">
        <ToggleButton x:Name="expandCollapseButton"
          IsChecked="{Binding IsExpanded, Mode=TwoWay}" 
          Visibility="{Binding HasChildren, 
                      Converter={StaticResource HasChildreenVisibilityConverter}}"
          Command="{Binding RelativeSource={RelativeSource 
                   Mode=FindAncestor,AncestorType={x:Type UserControl}}, 
                   Path=DataContext.ToggleExpandCollapseCommand}"
          Style="{StaticResource ExpandCollapseToggleStyle}"/>
        <Border Name="iconBorder" Width="20" Height="20">
            <ContentControl x:Name="icon"/>
        </Border>
        <TextBlock TextAlignment="Left" HorizontalAlignment="Center" 
          VerticalAlignment="Center" Text="{Binding Title}" 
          ToolTip="{Binding Title}" Width="150" 
          TextTrimming="CharacterEllipsis"></TextBlock>
    </StackPanel>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Type}" 
                  Value="{x:Static Constants:LibraryItemType.MovieLibrary}">
            <Setter TargetName="icon" Property="Content" 
                  Value="{StaticResource MovieLibraryImage}"/>
            <Setter TargetName="iconBorder" 
                    Property="Width" Value="25"/>
            <Setter TargetName="iconBorder" 
                    Property="Height" Value="25"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding Type}" 
                  Value="{x:Static Constants:LibraryItemType.UnreadMovieLibrary}">
            <Setter TargetName="icon" Property="Content" 
                   Value="{StaticResource NewImage}"/>
        </DataTrigger>
    //some other triggers
    </DataTemplate.Triggers>
</DataTemplate>

In the data template, I used a toggle button to show the +/- expand/collapse state, an icon to represent the library item, and a TextBlock represents the text of my library item.

To make the toggle button look like the expand/collapse button, I used the following style:

XML
<Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Width" Value="19"/>
    <Setter Property="Height" Value="13"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Width="19" Height="13" Background="Transparent">
                    <Border SnapsToDevicePixels="true" Width="9" Height="9" 
                           Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" 
                           BorderBrush="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" 
                           BorderThickness="1">
                        <Path Margin="1,1,1,1" x:Name="ExpandPath" 
                            Fill="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" 
                            Data="M 0 2 L 0 3 L 2 3 L 2 5 L 3 5 L 3 3 L 5 3 L 5 2 L 3 2 L 3 0 L 2 0 L 2 2 Z"/>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Data" TargetName="ExpandPath" 
                                 Value="M 0 2 L 0 3 L 5 3 L 5 2 Z"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style> 

I used the IsExpanded property of my library item to change the expand/collapse state of the toggle button. I introduced a property in my data structure to represent if it is expanded or collapsed.

To show the indenting at the ListBoxItem so that it looks like a tree node, I used LibraryItemMarginConverter to convert the Lavel property of the library item to margin for indenting.

C#
public class LibraryItemMarginConverter:IValueConverter
{
    public object Convert(object value, Type targetType, 
           object parameter, CultureInfo culture)
    {
        var libraryItem = (LibraryItem)value;
        return new Thickness(libraryItem.Lavel * 10, 1, 0, 1);
    }
    public object ConvertBack(object value, Type targetType, 
           object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

I introduced a Lavel property in my LibraryItem.

If a node doesn't have a child node then the tree view doesn't display any expand/collapse button. To simulate this, I used the HasChildreenVisibilityConverter converter which converts the HasChildren boolean property to visibility.

C#
public class HasChildreenVisibilityConverter:IValueConverter
{
    public object Convert(object value, Type targetType, 
                  object parameter, CultureInfo culture)
    {
        if (value == null)
            return Visibility.Visible;
        var hasChildren = (bool)value;
        return hasChildren ? Visibility.Visible : Visibility.Hidden;
    }
    public object ConvertBack(object value, Type targetType, 
                  object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

I introduced a HasChildren property in my LibraryItem. I could find if the library item has children while needed. But it is expensive when you are using Entity Framework. Because every time you access a navigation property, it takes enough time to process. I used a data trigger to change the icon of my library item. That's all for templating a ListBox to look like a TreeView.

Converting hierarchical data to a flat list to support data virtualization

To understand data virtualization, please read the article WPF Data Virtualization.

var orderedLibraryItems = 
  new VirtualizingCollection<LibraryItem>(new LibraryItemProvider(rootItems));

VirtualizingCollection takes an implementation of IItemsProvider which has two methods: FetchCount and FetchRange. My implementation for IItemsProvider is LibraryItemProvider which takes the root item as a constructor parameter. VirtualizingCollection first accesses the FetchCount method to identify how many items are available in the collection.

Calculating count

C#
private void CalculateCount()
{
    _count = 0;
    foreach (var rootItem in _rootItems)
    {
        _count++;
        rootItem.Lavel = 0;
        _startIndexDictionary.Add(_count - 1, rootItem);
        GetChildrenCount(rootItem, 0);
    }
}
private void GetChildrenCount(LibraryItem item, int label)
{
    if (!item.IsExpanded)
    {
        return;
    }
    if (LibraryItemType.CanHaveChildren(item.Type) == false)
    {
        return;
    }
    if (LibraryItemType.IsLastParent(item.Type) == false)
    {
        foreach (var child in item.OrderedChildren)
        {
            _count++;
            child.Lavel = label + 1;
            _startIndexDictionary.Add(_count - 1, child);
            GetChildrenCount(child, label + 1);
        }
    }
    else
    {
        _count += item.Children.Count;
    }
}

I used a recursive method to count the number of visible items in the list. If the item is expanded and it has children, then I'm continuing recursion by increment the Lavel which I use to do indenting like TreeView nodes. At the same time, I have a dictionary where the index is the key and the item at that index position is the value. This dictionary will be used in the FetchRange method to find a range of data to serve the virtualizing StackPanel.

FetchRange

C#
public IList<LibraryItem> FetchRange(int startIndex, int count)
{
    lock (DatabaseManager.LockObject)
    {
        var skippedItems = 0;
        var items = new List<LibraryItem>();
        foreach (var kv in _startIndexDictionary.OrderBy(kv => kv.Key))
        {
            var endeIndex = kv.Key;
            if (kv.Value.IsExpanded)
            {
                endeIndex += kv.Value.Children.Count;
            }
            if (endeIndex < startIndex)
            {
                skippedItems = endeIndex + 1;
                continue;
            }
            if (skippedItems < startIndex)
            {
                skippedItems++;
            }
            else
            {
                items.Add(kv.Value);
                if (items.Count == count)
                    return items;
            }
            if (kv.Value.IsExpanded && LibraryItemType.IsLastParent(kv.Value.Type))
            {
                foreach (var item in kv.Value.OrderedChildren)
                {
                    if (skippedItems < startIndex)
                    {
                        skippedItems++;
                    }
                    else
                    {
                        item.Lavel = kv.Value.Lavel + 1;
                        items.Add(item);
                        if (items.Count == count)
                            return items;
                    }
                }
            }
        }
        return items;
    }
}

In the FetchRange method, I skip the number of items to move the position to the startIndex. I use the dictionary I build to do this traveling to make the code run faster. Once I reach the item of startIndex, I try to return the number of items represented in the count parameter. The virtualizingCollection class uses a page size of 100 which can be changed to fetch items.

Points of interest

When developing Media Assistant, I found many areas where performance is a big issue and standard WPF controls needed to be used in a different way to solve problems. I'll try to post all such work I did to improve the performance of the application.

License

This article, along with any associated source code and files, is licensed under The BSD License


Written By
Software Developer (Senior) KAZ Software Limited
Bangladesh Bangladesh
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionConvert to user control Pin
SherifMazar27-Nov-13 19:33
SherifMazar27-Nov-13 19:33 
AnswerRe: Convert to user control Pin
Gothrek20-Aug-16 4:19
Gothrek20-Aug-16 4:19 
+1 Great idea
Convert it to user control
GeneralMy vote of 5 Pin
Prafulla Hunde3-Dec-11 10:04
Prafulla Hunde3-Dec-11 10:04 
QuestionSimple Code Pin
seres_cristian25-Nov-11 8:15
seres_cristian25-Nov-11 8:15 
GeneralMy vote of 5 Pin
member608-Oct-11 0:29
member608-Oct-11 0:29 
GeneralMy vote of 5 Pin
Filip D'haene7-Oct-11 6:29
Filip D'haene7-Oct-11 6:29 
GeneralRe: My vote of 5 Pin
H. S. Masud7-Oct-11 6:36
H. S. Masud7-Oct-11 6:36 
GeneralMy vote of 5 Pin
Razan Paul (Raju)7-Oct-11 1:25
Razan Paul (Raju)7-Oct-11 1:25 
GeneralMy vote of 5 Pin
Taufiq6-Oct-11 19:47
Taufiq6-Oct-11 19:47 
GeneralMy vote of 5 Pin
Syed BASHAR6-Oct-11 3:19
Syed BASHAR6-Oct-11 3:19 
GeneralMy vote of 5 Pin
Saraf Talukder6-Oct-11 2:14
Saraf Talukder6-Oct-11 2:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.