Databind WPF TreeView With Mixed Types and Categorized Sub-TreeViewItems

Question

I'm trying to build a TreeView in WPF that has categories.

Basically the structure looks like this:

Root  
 |_
 | Cat A
 |_
 | Cat B
 |_
   Cat C

Each Category is bound to a separate observable collection. Most of my categories are very simple. The TreeViewItem that is the category has it's ItemsSource set and there is no hierarchy. However, I do have a category which needs to be represented in a special hierarchy.

Image that "Cat C" in the above tree then becomes like this:

Servers
  |_
  | [SERVER A's DISPLAY NAME]
  |  |_
  |  | Namespaces
  |  |  |_
  |  |_   [NAMESPACE alpha's DISPLAY NAME]
  |  | Deployments
  |  |  |_
  |  |_   [DEPLOYMENT 1's DISPLAY NAME]
  |_   Configuration File
    [SERVER B's DISPLAY NAME]

Basically, what I want is the hard coded parent TreeViewItem to have a static header. That item should then have a collection of items with their names shown. For each child of the original parent there should be three static items which have a dynamic list of children.

Writing this out makes me think that this should be a very simplistic problem to solve. However, after playing with the XAML for a couple of days I cannot get a hierarchy to work. Below is the farthest I've been able to get. I've used a composite collection called Children to get the Namespaces, Deployments, and the Configuration File into one collection. However, I cannot separate them out.

<TreeViewItem ItemsSource="{Binding Path=Configuration.Servers}" 
                      IsExpanded="True" >
            <TreeViewItem.ItemContainerStyle>
                <Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource {x:Type TreeViewItem}}">
                    <Setter Property="IsExpanded" Value="True"/>
                </Style>
            </TreeViewItem.ItemContainerStyle>

            <TreeViewItem.HeaderTemplate>
                <DataTemplate>
                    <Border Margin="0,2,2,0">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/WPF;component/Images/server_chart.png"
                                   Margin="0,0,5,0"/>
                            <TextBlock Text="Cognos Servers" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </TreeViewItem.HeaderTemplate>

            <TreeViewItem.Resources>
                <HierarchicalDataTemplate ItemSource="{Binding Path=Children}" DataType="{x:Type local:Server}">
                    <HierarchicalDataTemplate.ItemContainerStyle>
                        <Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource {x:Type TreeViewItem}}" >
                            <Setter Property="IsExpanded" Value="True"/>
                        </Style>
                    </HierarchicalDataTemplate.ItemContainerStyle>
                    <TextBlock Text="{Binding DisplayName}" PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown">
                        <TextBlock.ContextMenu>
                            <ContextMenu>
                                <MenuItem Header="Refresh" Click="TreeItemMenu_AddNewClient">
                                    <MenuItem.Icon>
                                        <Image Source="/WPF;component/Images/arrow_refresh.png" />
                                    </MenuItem.Icon>
                                </MenuItem>
                                <MenuItem Header="Add Client..." Click="TreeItemMenu_AddNewClient" />
                                <Separator />
                                <MenuItem Header="Remove" Click="TreeItemMenu_RemoveClick">
                                    <MenuItem.Icon>
                                        <Image Source="/WPF;component/Images/server_delete.png" />
                                    </MenuItem.Icon>
                                </MenuItem>
                            </ContextMenu>
                        </TextBlock.ContextMenu>
                    </TextBlock>
                </HierarchicalDataTemplate>

                <HierarchicalDataTemplate ItemsSource="{Binding Clients}" DataType="{x:Type local:Namespace}">
                    <HierarchicalDataTemplate.ItemContainerStyle>
                        <Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource {x:Type TreeViewItem}}" >
                            <Setter Property="IsExpanded" Value="True"/>
                        </Style>
                    </HierarchicalDataTemplate.ItemContainerStyle>
                    <TextBlock Text="{Binding DisplayName}" PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown" />
                </HierarchicalDataTemplate>

                <DataTemplate DataType="{x:Type local:Client}">
                    <TextBlock Text="{Binding DisplayName}"
                               ContextMenu="{StaticResource ResourceKey=ContextMenuTreeItem}" 
                               PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown" />
                </DataTemplate>
            </TreeViewItem.Resources>

Eric Liprandi Eric Liprandi · Accepted Answer · 2011-11-08T17:07:30

Mike,

Mixing static and model data probably won't get you where you want. You'll have to create an actual ViewModel that contains the static nodes, etc. I highly recommend Josh Smith's TreeView ViewModel tutorials. This is the first one, but look around for more info. He is one of the most knowledgeable developer on that subject. We had great success following his recommendations.

Databind WPF TreeView With Mixed Types and Categorized Sub-TreeViewItems

1 Answers