Click here to Skip to main content
Click here to Skip to main content

Advanced Custom TreeView Layout in WPF

, 29 Jan 2007
Rate this:
Please Sign up or sign in to vote.
Reviews an advanced layout customization for the WPF TreeView.

Introduction

In a previous article here on the CodeProject I demonstrated one way of redefining how a WPF TreeView can be displayed. In that article we examined how to make a TreeView look like an Org Chart by using some XAML magic. In this article we will explore a more complex and interactive customization, which makes the TreeView present its items as a set of "nested buckets."

Show me the money

Let's take look at what the customized TreeView looks like. Later we will see how this custom layout was implemented. The screenshot seen below is of a demo application, which is available for download via a link at the top of this page.

The TreeView with a layout customization in effect.

The top portion of the user interface is the customized TreeView. The innermost items provide links to Wikipedia pages containing information about the cities named in those items. The bottom portion of the UI is a Frame element, which loads and displays the Wikipedia pages chosen in the TreeView.

If we did not apply a layout customization to the TreeView seen above, it would look like this:

Plain Jane

What is a layout customization?

Take another quick glance again at the non-customized TreeView screenshot above. Notice that the leaf items are rendered as hyperlinks, even though a layout customization is not in effect. The way a TreeViewItem's content renders is affected by data templates. What I refer to as a "layout customization" does not deal with rendering an item's content, rather, it explains how to render that which contains an item's content and how those containers are positioned relative to one another. The item content is irrelevant for our purposes.

TreeView and TreeViewItem both derive from ItemsControl. An ItemsControl contains item containers, which can be thought of as 'boxes' that hold arbitrary content. The content of those boxes is the data which the user consumes (i.e. the stuff that the user cares about and pays the most attention to). In a TreeView those boxes are represented by TreeViewItem objects. A layout customization organizes the TreeViewItems – explaining how they should be positioned, how they should be rendered, if they should be shown or hidden, etc.

How it works

Data Format

Before delving into the code which implements our custom layout, let's take a moment to review the data being displayed. In the demo application a TreeView is bound to XML data, which is in this simple format:

<?xml version="1.0" encoding="utf-8" ?>
<Countries>
  <Country CountryName="USA">
    <Region RegionName="California">
      <City 
        CityName="Los Angeles" 
        Uri="http://en.wikipedia.org/wiki/Los_Angeles" />
      
      <!--<span class="code-comment"> More City elements... --></span>
      
    </Region>

    <!--<span class="code-comment"> More Region elements... --></span>

  </Country>

  <!--<span class="code-comment"> More Country elements... --></span>

</Countries>

The TreeView displays the Country, Region, and City elements as TreeViewItems. It renders Country and Region items as collapsible groups, whose caption is the CountryName or RegionName attribute value, and the inner list of items is taken from the element's set of nested child elements (a country contains regions, and a region contains cities).

TreeViewItem Style

Below is an abridged version of the Style which contains most of the custom layout implementation:

<Style TargetType="TreeViewItem">
  <Style.Resources>
    <!--<span class="code-comment"> Resources omitted for clarity... --></span>
  </Style.Resources>

  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="TreeViewItem">
        <Grid Margin="8,4">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>

          <!--<span class="code-comment"> This Border contains elements which display 
               the content and child items of the TreeViewItem. --></span>
          <Border Name="Bd" 
            Background="{StaticResource ItemAreaBrush}"
            BorderBrush="{StaticResource ItemBorderBrush}" 
            BorderThickness="0.6" 
            CornerRadius="8"              
            Padding="6"     
            SnapsToDevicePixels="True"
            >
            <Grid>
              <!--<span class="code-comment"> Items with children are shown in an Expander. --></span>
              <Expander Name="Exp" 
                IsExpanded="{TemplateBinding TreeViewItem.IsExpanded}">
                <Expander.Header>
                  <!--<span class="code-comment"> Displays the item's header in the Expander. --></span>
                  <ContentPresenter ContentSource="Header" />
                </Expander.Header>
                <!--<span class="code-comment"> Displays the item's children. --></span>
                <ItemsPresenter />
              </Expander>

              <!--<span class="code-comment">Items without children are shown in a ContentPresenter.--></span>
              <ContentPresenter Name="CntPres"
                ContentSource="Header"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Visibility="Collapsed" 
                />
            </Grid>
          </Border>
        </Grid>

        <ControlTemplate.Triggers>
          <!--<span class="code-comment"> If the TreeViewItem has child items,
               show it in an Expander.  Otherwise
               hide the Expander and show the hidden
               ContentPresenter. --></span>
          <Trigger Property="TreeViewItem.HasItems" Value="false">
            <Setter 
              TargetName="Exp" 
              Property="Visibility" 
              Value="Collapsed" />
            <Setter 
              TargetName="CntPres" 
              Property="Visibility" 
              Value="Visible" />
          </Trigger>

          <!--<span class="code-comment">When the item is selected in the TreeView, use the 
              "selected" colors and give it a drop shadow. --></span>
          <Trigger Property="IsSelected" Value="true">
            <!--<span class="code-comment"> Setters omitted for clarity... --></span>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>

  <!--<span class="code-comment"> Make each TreeViewItem show it's children 
       in a StackPanel. If it is a root item then
       the Orientation will be 'Horizontal', else
       'Vertical'. --></span>
  <Setter Property="ItemsPanel">
    <Setter.Value>
      <ItemsPanelTemplate>
        <ItemsPanelTemplate.Resources>
          <local:ItemsPanelOrientationConverter x:Key="conv" />
        </ItemsPanelTemplate.Resources>
        <StackPanel 
          IsItemsHost="True" 
          Orientation="{Binding 
            RelativeSource={x:Static RelativeSource.TemplatedParent}, 
            Converter={StaticResource conv}}" 
          />
      </ItemsPanelTemplate>
    </Setter.Value>
  </Setter>
</Style>

Choosing the right visuals

There are a couple aspects of the XAML seen above worth pointing out. The Style sets the Template property of TreeViewItem to a ControlTemplate. That template has the job of explaining how a TreeViewItem instance should be rendered. Items that represent a Country or Region XML element must render as collapsible groups, but City elements should not. Let's take a closer look at how that is achieved. I stripped away some unimportant settings, so that we can focus on the essential information:

<Border>
  <Grid>
    <!--<span class="code-comment"> Items with children are shown in an Expander. --></span>
    <Expander Name="Exp">
      <Expander.Header>
        <!--<span class="code-comment"> Displays the item's header in the Expander. --></span>
        <ContentPresenter ContentSource="Header" />
      </Expander.Header>
      <!--<span class="code-comment"> Displays the item's children. --></span>
      <ItemsPresenter />
    </Expander>

    <!--<span class="code-comment"> Items without children are shown in a ContentPresenter. --></span>
    <ContentPresenter Name="CntPres"
      ContentSource="Header"      
      Visibility="Collapsed" />
  </Grid>
</Border>

The XAML above creates a Border element which contains a Grid panel. That Grid has one row and one column (i.e. one "cell"). That cell contains an Expander and a ContentPresenter, but only one of those two elements will ever be visible at any given moment. The Expander is there in case the TreeViewItem has child items. The ContentPresenter will be shown if the item does not have any children, in this case, if it represents a City element in the XML data.

The control template has a Trigger to determine which element should be used to render the TreeViewItem. That Trigger is seen below:

<Trigger Property="TreeViewItem.HasItems" Value="false">
  <Setter 
    TargetName="Exp" 
    Property="Visibility" 
    Value="Collapsed" />
  <Setter 
    TargetName="CntPres" 
    Property="Visibility" 
    Value="Visible" />
</Trigger>

Item layout direction

Another tricky aspect to the layout seen in the screenshot at the top of this article has to do with the direction in which TreeViewItems are arranged. The items representing Country and Region elements are arranged in a horizontal row, but the City items are in a vertical list.

Arranging the root items (the Country items) in a horizontal row requires the TreeView's ItemsPanel property to be set to a StackPanel with a horizontal orientation. Here is some XAML from the demo app's main Window which configures the TreeView:

<TreeView Name="tree" 
  DataContext="{StaticResource countriesXml}" 
  ItemsSource="{Binding}"
  >
  <!--<span class="code-comment"> Import the resource file with the 
       new TreeViewItem style. --></span>
  <TreeView.Resources>
    <ResourceDictionary 
      Source="GroupedTreeViewItemStyle.xaml" />
  </TreeView.Resources>

  <!--<span class="code-comment"> Arrange the root items horizontally. --></span>
  <TreeView.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel 
        IsItemsHost="True" 
        Orientation="Horizontal" />
    </ItemsPanelTemplate>
  </TreeView.ItemsPanel>
</TreeView>

The next piece of the puzzle requires a little more trickery than just setting a property. Since the TreeViewItems that represent Region elements must be arranged horizontally but City items must be listed vertically, we need to use a value converter to determine at runtime what orientation a TreeViewItem's ItemsPanel should use. Here's the XAML from the Style seen previously which sets the ItemsPanel for a TreeViewItem:

<Setter Property="ItemsPanel">
  <Setter.Value>
    <ItemsPanelTemplate>
      <ItemsPanelTemplate.Resources>
        <local:ItemsPanelOrientationConverter x:Key="conv" />
      </ItemsPanelTemplate.Resources>
      <StackPanel 
        IsItemsHost="True" 
        Orientation="{Binding 
            RelativeSource={x:Static RelativeSource.TemplatedParent}, 
            Converter={StaticResource conv}}" 
          />
    </ItemsPanelTemplate>
  </Setter.Value>
</Setter>

The StackPanel used as the ItemsPanel template has its Orientation property bound. The binding uses a value converter to determine whether the StackPanel should have a horizontal or vertical orientation. Here's the code for the value converter:

[ValueConversion( typeof( ItemsPresenter ), typeof( Orientation ) )]
public class ItemsPanelOrientationConverter : IValueConverter
{  
 // Returns 'Horizontal' for root TreeViewItems 
 // and 'Vertical' for all other items.
 public object Convert( 
  object value, Type targetType, object parameter, CultureInfo culture )
 {
  // The 'value' argument should reference 
  // an ItemsPresenter.
  ItemsPresenter itemsPresenter = value as ItemsPresenter;
  if( itemsPresenter == null )
   return Binding.DoNothing;

  // The ItemsPresenter's templated parent 
  // should be a TreeViewItem.
  TreeViewItem item = itemsPresenter.TemplatedParent as TreeViewItem; 
  if( item == null )
   return Binding.DoNothing;

  // If the item is contained in a TreeView then it is
  // a root item.  Otherwise it is contained in another
  // TreeViewItem, in which case it is not a root.
  bool isRoot = 
   ItemsControl.ItemsControlFromItemContainer( item ) is TreeView;

  // The children of root items are layed out
  // in a horizontal row.  The grandchild items 
  // (i.e. cities) are layed out vertically.
  return
   isRoot ?
   Orientation.Horizontal :
   Orientation.Vertical;
 }

 public object ConvertBack( 
  object value, Type targetType, object parameter, CultureInfo culture )
 {
  throw new NotSupportedException( "Cannot convert back." );
 }
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Josh Smith
Software Developer (Senior) Cynergy Systems
United States United States
Josh creates software, for iOS and Windows.
 
He works at Cynergy Systems as a Senior Experience Developer.
 
Read his iOS Programming for .NET Developers[^] book to learn how to write iPhone and iPad apps by leveraging your existing .NET skills.
 
Use his Master WPF[^] app on your iPhone to sharpen your WPF skills on the go.
 
Check out his Advanced MVVM[^] book.
 
Visit his WPF blog[^] or stop by his iOS blog[^].
Follow on   Twitter

Comments and Discussions

 
QuestionHow to collapse all expanders except selected one? PinmemberMember 957203923-Aug-13 1:10 
QuestionBeautiful Pinmembervinchenzo.93928-Mar-13 3:21 
QuestionRemove Header Focus PinmemberDemonPT29-Aug-11 7:43 
AnswerRe: Remove Header Focus Pinmembervinchenzo.93928-Mar-13 3:26 
GeneralMy vote of 5 PinmemberVano Maisuradze18-Aug-11 23:18 
QuestionQuick question PinmemberJPR197821-Jun-11 5:57 
QuestionNode expansion PinmemberPaull7823-Apr-10 5:15 
Generalgood Pingroupzhujinlong1984091316-Apr-09 20:39 
GeneralJust came accross it PinmemberDmitri Nesteruk14-Dec-08 10:29 
GeneralNeed your help. PinmemberDharmender18-Nov-08 19:49 
QuestionCan this be applied to a TreeView with HierarchicalDataTemplate? Pinmemberjaschwa@clearwire.net16-Oct-08 8:50 
GeneralEvents PinmemberPascal Ganaye19-Aug-08 22:54 
GeneralRe: Events PinmvpJosh Smith25-Aug-08 2:22 
GeneralRe: Events PinmemberMember 178098912-Feb-09 2:40 
QuestionExpansion of a tree also meaning selection? Pinmembermikekreuzer24-Mar-08 12:54 
GeneralRe: Expansion of a tree also meaning selection? PinmvpJosh Smith25-Mar-08 3:37 
GeneralRe: Expansion of a tree also meaning selection? Pinmembermikekreuzer25-Mar-08 21:07 
GeneralProblem loading Windows1.xaml Pinmembergeorge.d11-Nov-07 4:48 
GeneralRe: Problem loading Windows1.xaml PinmvpJosh Smith11-Nov-07 5:06 
Generallicencing Pinmembervirtual.aussie10-Nov-07 12:04 
GeneralRe: licencing PinmvpJosh Smith10-Nov-07 12:21 
QuestionImage in treeView ? Pinmemberbinoo5-Sep-07 3:30 
QuestionFill the TreeView width Pinmemberpikul17-Aug-07 3:49 
QuestionObject Hierarchy Instead of XML PinmemberScott ---22-May-07 10:51 
AnswerRe: Object Hierarchy Instead of XML PinmvpJosh Smith22-May-07 11:37 
GeneralRe: Object Hierarchy Instead of XML PinmemberScott ---22-May-07 12:13 
GeneralRe: Object Hierarchy Instead of XML PinmvpJosh Smith22-May-07 16:33 
GeneralRe: Object Hierarchy Instead of XML PinmemberScott ---23-May-07 9:55 
GeneralThis helps. Thanks! PinmemberScott ---18-May-07 10:48 
GeneralRe: This helps. Thanks! PinmvpJosh Smith18-May-07 11:58 
QuestionGives Error Opening in Blend PinmemberAkash Kava11-Mar-07 0:10 
GeneralGreat article. PinmemberDr.Luiji16-Feb-07 9:18 
GeneralRe: Great article. PinmvpJosh Smith16-Feb-07 12:53 
GeneralOh wow. PinmemberPete O'Hanlon2-Feb-07 4:26 
GeneralRe: Oh wow. PinmvpJosh Smith2-Feb-07 4:31 
GeneralRe: Oh wow. PineditorPaul Conrad12-Feb-07 18:16 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140821.2 | Last Updated 29 Jan 2007
Article Copyright 2007 by Josh Smith
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid