Skip to main content Skip to footer

OrgChart Madness: OrgChart Control for Silverlight and WPF

About C1OrgChart One of the new additions to the 2012 v1 release is is a XAML org chart control. The C1OrgChart will be found in both Studio for Silverlight and Studio for WPF. Like all our XAML controls, C1OrgChart is a true XAML control, so it is based on basic XAML elements, supports data binding, easy styling, etc. At its core, C1OrgChart is an ItemsControl, so you just need to bind your data to the ItemsSource, and you use ItemTemplates to style the control (you can even have different styles for the different levels of the org chart). Data sources can be simple nested collections, anything IEnumerable, or HierarchicalDataTemplates, and all of these methods are shown in samples. I'm writing this post in March of 2012, and at this time of the year, people see an org chart and instead of thinking "corporate hierarchy", they think "bracket". Yes, C1OrgChart is a very flexible control, and you can use it to create playoff brackets as well as organization charts. In this post, I'll show you some of the features of the C1OrgChart which are useful for both org charts and brackets. The bracket logic is up to you--that's somewhat copyrighted, and I don't need a patent troll after me for a simple blog post. Basic Features Organization charts can be created in to orientations--vertical (top part of the image below) and horizontal (bottom part of the image below). You can optionally set the org chart to be collapsible. Below is the same chart as above, with different nodes collapsed. The default direction of a horizontal org chart is left to right, with the "topmost" node on the left and subordinate nodes spreading to the right (as seen in the first image above). Setting the FlowDirection property of C1OrgChart flips the chart left-to-right, as seen below. Connector lines can be solid or dashed, and width can be fixed or variable. In the image above, the connector is dashed, and width is relative, based on the number of child nodes. Because C1OrgChart is an ItemsControl, you can do all kinds of crazy templating based on paths and levels and other dependencies you want to tie together. Below is another org chart, representing an athletic league, with different item templates assigned to the different levels of the hierarchy. All of these features are demonstrated in the code samples, which you can find in the Studio download. Getting Started Let's see how to make some of these features work. Start by creating a new Silverlight project, and add a C1OrgChart to MainPage. We're going to do a minimal amount of UI at the beginning, so this is all the code we need:


<Grid x:Name="LayoutRoot" Background="White">  
<c1:C1OrgChart  
        x:Name="_bracket"  
Orientation="Horizontal" >  
</c1:C1OrgChart>  
</Grid>  

For a real 64-team tourney bracket, you'd want to have a two-panel grid split vertically, and place a bracket in each half. Now it's time to make a simple bracket. We'll create a very simple class with a recursive ObservableCollection for subordinates, and create a method to build a simple bracket. The org chart control default template uses the ToString method to dictate what text is displayed, so be sure to override this if you're not using a DataTemplate (if you are using a DataTemplate, you can just set your bindings in that and ignore the ToString).


namespace BracketSample  
{  
public partial class MainPage : UserControl  
{  
public MainPage()  
{  
InitializeComponent();  

var _tournament = Team.GetTournament();  
\_bracket.Header = \_tournament;  
}  
}  

public class Team  
{  

ObservableCollection<Team> _list = new ObservableCollection<Team>();  

public string Name { get; set; }  
public IList<Team> Challengers { get { return _list; } }  

public static Team GetTournament()  
{  
var _champion = new Team();  
_champion.Name = "Louisville";  

var _challenger1 = new Team();  
var _challenger2 = new Team();  

_challenger1.Name = "Louisville";  
_challenger2.Name = "Kentucky";  

\_champion.Challengers.Add(\_challenger1);  
\_champion.Challengers.Add(\_challenger2);  

return _champion;  
}  

public override string ToString()  
{  
return Name;  
}  

}  
}  

This code results in a bracket which looks like this: If you wanted to leave the bracket without a winner, just make the _champion.Name property to an empty string. That gives us a bracket with no winner (yet). If we want that bracket to face the other way, setting the FlowDirection in the XAML accomplishes that: For dashed lines, we just need to set the ConnectorDashArray property in the XAML. ConnectorDashArray uses two doubles to specify the width of the dash and the spaces. So


<Grid x:Name="LayoutRoot" Background="White">  
<c1:C1OrgChart  
        x:Name="_bracket"  
ConnectorDashArray="5 5"  
Orientation="Horizontal" >  
</c1:C1OrgChart>  
</Grid>  

renders an org chart with dashed lines like so: With a little bit of ingenuity in the GetTournament() method, we can generate entire regional brackets: As you can see from the screenclips in this post, a lot can be done with the look and feel of the C1OrgChart with very little work. Applying styles and templates, as well as HierarchicalDataTemplates are all in the samples, so download the 2012 v1 of either Studio for Silverlight or Studio for WPF and see how easy it is to use C1OrgChart!

MESCIUS inc.

comments powered by Disqus