Articles in this section
Category / Section

How to generate tree like diagram with nested object in Silverlight Diagram?

1 min read

Nested business objects are directly set as ItemSource and a tree diagram is generated automatically by using the HierarchicalDataTemplate. The following code example explains how to use the HierarchicalDataTemplate.


public class NodeHead
    public NodeHead()
       Children = new ObservableCollection<NodeHead>();
    public ObservableCollection<NodeHead> Children { get; set; } 
    public string Name { get; set; }



<DataTemplate x:Key="NodeTemplate">
            <Border Background="{StaticResource OuterBrush}" CornerRadius="10" IsHitTestVisible="False">
                <Border Margin="10" BorderBrush="Black" BorderThickness="2" CornerRadius="20" Background="{StaticResource InnerBrush}">
                    <StackPanel Orientation="Vertical">
                        <TextBlock FontSize="10" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="White" Text="{Binding Path=Name}" />
<Style TargetType="{x:Type syncfusion:Node}" x:Key="{x:Type syncfusion:Node}">
                <Setter Property="Width" Value="75" />
                <Setter Property="Height" Value="50" />
                <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                <Setter Property="ContentTemplate" Value="{StaticResource NodeTemplate}" />
                <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=Content.Name}" />
<HierarchicalDataTemplate x:Key="dataTemplate"ItemsSource="{Binding Path=Children}"    DataType="{x:Type local:NodeHead}"></HierarchicalDataTemplate>



Figure 1: Hierarchical Data

Sample References:

Diagram WPF: Dashboard > WPF Sample Browser > Diagram > DataBinding > Business Object Binding Sample.

Diagram Silverlight: Dashboard > Silverlight Sample Browser > Diagram > DataBinding > Business Object Binding Sample.

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment