If you were going to build an org chart builder in Silverlight, what base class would you use for creating the boxes of the chart?

Question

For this question, let us assume that we will want to show the face of the employee, title, department, and whether they like Piña coladas/getting caught in the rain.

Perhaps it might look something like the following: http://www.edrawsoft.com/images/examples/Photo-Org-Chart-Full.png

Would you use a...

• System.Windows.Control.UserControl?
• FrameworkElement?
• UIElement?
• Canvas

Why? As always, thank you for your advise! I greatly appreciate it!

Answer 1

I've seen a website that uses TreeViewItem and ControlTemplates, but I can't find it at the moment, I think it was on CodeProject.

Another idea I was playing with recently is use 2 usercontrols, itemcontrols and stackpanels.

Here's an example of a an OrgBar rectangle with text under it and it renders it's children in OrgGroup control by setting the ItemSource to it's children collection recursively. You can put the root orgbar on a canvas and play around with paths for the arrows. I tried to point out the basics but if you need more I can fill in the blanks.

Public Class OrgBarDataNode  
   Public Property BarColor as New SolidColorBrush(Colors.Red)
   Public Property BarName As String
   Public Property Children as New ObservableCollection(Of OrgBarDataNode)
End Class

Class MainPage
...
   Public Sub Loaded

      Dim Root as New OrgBarDataNode With {.BarName = "Root"}
      Dim Child1 as New OrgBarDataNode With {.Barname = "Child1"}
      Root.Children.Add(Child1)
      LayoutRoot.Children.Add(Root)
   End Sub 
...
End Class

<UserControl x:Class="OrgBar">
<Grid>
    <StackPanel ToolTipService.ToolTip="{Binding BarName}" Cursor="Hand">
        <Rectangle Fill="{Binding BarColor}" Style="{StaticResource RecStyle}"/>
        <TextBlock Text="{Binding BarName}" HorizontalAlignment="Center"               
        Margin="0,10,0,0" />
        <local:OrgGroup Margin="0,20" HorizontalAlignment="Center" 
  DataContext="{Binding Children}" />
    </StackPanel>
    </Grid>
 </UserControl>

 <UserControl x:Class="OrgGroup">
  <Grid>
    <!-- this {Binding} to nothing means bind to DataContext}--> 
    <ItemsControl ItemsSource="{Binding}" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <local:OrgBar Style="{StaticResource OrgBarStyle}"  
                 DataContext="{Binding}" /> 
             <!-- this {Binding} refers to the the child node this time}  -->
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
   </Grid>
  </UserControl>

Answer 2

That's essentially a tree structure, so like Paully suggested, I would start with a TreeView (Silverlight Toolkit) and customize the control template and treeview itself.

Answer 3

If I had to create a org chart control with advanced layout I would probably derive from Control, and create a "real" templated control in a similar manner as e.g. the TreeView control. This is probably the most advanced route to create a new control, but also the most powerful.

You may also be able to modify the control template of a TreeView, and make it grow downwards from the center instead of left and down from the upper left corner, but it will probably be difficult or impossible to customize the layout of the various levels as the TreeViewItem doesn't carry any extra information to describe the layout of a particular node.

In fact I did recently some experiments modifying the TreeView control template, but I stumbled upon something I didn't understand. Luckily I figured out what I did wrong, and you can see how it is possible to change the orientation of TreeView child items from vertical to horizontal in my question here on Stack Overflow.