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.