Complex Silverlight TreeView, is nested hierarchy

问题:

I have a DB that looks like:

Locations         [rootlevel]
   Inspections    [level1]
   Areas          [level1]
      Inspections [level2]

So each Location can have zero or more Inspections and zero or more Areas, and Areas have zero or more Inspections. The records for Inspections all have a LocationID!=null and the AreaID=null or !=null to get this hierarchy.

I would like to get all the names of each item in the table in a treeview as navigation. So far I can get EITHER

Locations-->Areas-->Inspections OR

Locations-->Inspections

I cannot seem to get the treeview hierarchy to show what I need. Is it possible? I have tried to use a nested treeview as an item in the hierarchy to show what I want but it doesn't work correctly.

xaml code for Locations-->Areas-->Inspections

 <!--NAVIGATION TREE HIERARCHICAL TEMPLATE-->
    <common:HierarchicalDataTemplate x:Key="AssetManager" ItemsSource="{Binding Path=Areas}">

        <!--START OF AREA OPTIONS TEMPLATE-->
        <common:HierarchicalDataTemplate.ItemTemplate>
            <common:HierarchicalDataTemplate ItemsSource="{Binding Path=Inspections}">

                <!--START OF INSPECTION OPTIONS TEMPLATE-->
                <common:HierarchicalDataTemplate.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="Assets/Resources/ImageResources/SearchICON2.png" Height="20" Width="20" />
                            <TextBlock Margin="0,0,0,0" Text="{Binding Path=Name}"/>
                        </StackPanel>
                    </DataTemplate>
                </common:HierarchicalDataTemplate.ItemTemplate>
                <!--END OF INSPECTION OPTIONS TEMPLATE-->

                <StackPanel Orientation="Horizontal">
                    <Image Source="Assets/Resources/ImageResources/ManufacturingICON.png" Width="20" Height="20"/>
                    <TextBlock Margin="0,0,0,0" Text="{Binding Path=Name}"/>
                </StackPanel>
            </common:HierarchicalDataTemplate>
        </common:HierarchicalDataTemplate.ItemTemplate>
        <!--END OF AREA OPTIONS TEMPLATE-->


            <StackPanel Orientation="Horizontal">
                    <Image Source="Assets/Resources/ImageResources/ManufacturingICON.png" Width="20" Height="20"/>
                    <TextBlock Margin="0,0,0,0" Text="{Binding Path=Name}"/>                    
          </StackPanel>     
    </common:HierarchicalDataTemplate>
    <!--END OF NAVIGATION TEMPLATE-->

xaml for Locations-->Inspections

 <!--NAVIGATION TREE HIERARCHICAL TEMPLATE-->
    <common:HierarchicalDataTemplate x:Key="AssetManager" ItemsSource="{Binding Path=Inspections}">
            <StackPanel Orientation="Horizontal">
                    <Image Source="Assets/Resources/ImageResources/ManufacturingICON.png" Width="20" Height="20"/>
                    <TextBlock Margin="0,0,0,0" Text="{Binding Path=Name}"/>
                </StackPanel>
            </common:HierarchicalDataTemplate>
        </common:HierarchicalDataTemplate.ItemTemplate>
        <!--END OF TEMPLATE-->

xaml for nested treeview

 <!--NAVIGATION TREE HIERARCHICAL TEMPLATE-->
    <common:HierarchicalDataTemplate x:Key="AssetManager" ItemsSource="{Binding Path=Areas}">

        <!--START OF AREA OPTIONS TEMPLATE-->
        <common:HierarchicalDataTemplate.ItemTemplate>
            <common:HierarchicalDataTemplate ItemsSource="{Binding Path=Inspections}">

                <!--START OF INSPECTION OPTIONS TEMPLATE-->
                <common:HierarchicalDataTemplate.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="Assets/Resources/ImageResources/SearchICON2.png" Height="20" Width="20" />
                            <TextBlock Margin="0,0,0,0" Text="{Binding Path=Name}"/>
                        </StackPanel>
                    </DataTemplate>
                </common:HierarchicalDataTemplate.ItemTemplate>
                <!--END OF INSPECTION OPTIONS TEMPLATE-->

                <StackPanel Orientation="Horizontal">
                    <Image Source="Assets/Resources/ImageResources/ManufacturingICON.png" Width="20" Height="20"/>
                    <TextBlock Margin="0,0,0,0" Text="{Binding Path=Name}"/>
                </StackPanel>
            </common:HierarchicalDataTemplate>
        </common:HierarchicalDataTemplate.ItemTemplate>
        <!--END OF AREA OPTIONS TEMPLATE-->

        <StackPanel Orientation="Vertical">                         
                            <StackPanel Orientation="Horizontal">
                    <Image Source="Assets/Resources/ImageResources/ManufacturingICON.png" Width="20" Height="20"/>
                    <TextBlock Margin="0,0,0,0" Text="{Binding Path=Name}"/>                    
                </StackPanel>
                            <sdk:TreeView HorizontalAlignment="Left" ItemsSource="{Binding Source={StaticResource locationInspectionsViewSource}}" Name="inspectionsTreeView" VerticalAlignment="Top" ItemTemplate="{StaticResource Level2}" BorderBrush="{x:Null}" Background="{x:Null}"/>                                         
                    </StackPanel>
    </common:HierarchicalDataTemplate>
    <!--END OF NAVIGATION TEMPLATE-->

Thank you

回答1:

After much research, hair-pulling and head-desking I found that:

No, it is not possible when using HierarchicalDataTemplate to display a nested TreeView hierarchy. The data template allows only for one 'child' per node.

One solution is to merge the two list items 'children' into one list 'child' and use that within the hierarchy. So in my case the Locations will relate to a single 'child' table where Areas and Inspections entities are adjacent, with each Area relating to the relevant Inspection children and the Inspections have no children.

A second solution is to use a nested DataGrid. This seems like cheating but it achieved the desired effect. The templates will need to be changed for the DataGrid so that there are have no column headers/alternate row colouring/higlighting etc. Depending on what the TreeView needs to look like.

The second is, in fact, the easier option as it uses the standard DomainDataSource for the root table (with all inclusions) which allows for easy encapsulation of DataContext, it also means there is still no code-behind to ensure the layout is separate.

There may be more ways, but I have found a solution that works for me and is easy.