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.
C#
public class NodeHead
{
public NodeHead()
{
Children = new ObservableCollection<NodeHead>();
}
public ObservableCollection<NodeHead> Children { get; set; }
public string Name { get; set; }
}
XAML
<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}" />
</StackPanel>
</Border>
</Border>
</DataTemplate>
<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}" />
</Style>
<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.
