Step 2 of 3: Adding Content to the C1OrgChart Control

In the previous step you created a Silverlight application and added the C1OrgChart control to your project. In this step you'll add content to the C1OrgChart control. Note that in this step you will add code files that is included with the ComponentOne Studio for Silverlight samples, which are by default installed in the Documents or MyDocuments folder in the ComponentOne Samples\Studio for Silverlight \C1.Silverlight.OrgChart\OrgChart_Demo directory. The code is included here as well, or you can locate and add the code file as a shortcut. To customize your project and add content to the C1OrgChart control in your application, complete the following steps:

1.   In the Solution Explorer, right-click the MainPage.xaml file and select View Code. The code file will open.

2.   Edit the code file so that it appears similar to the following:

      Visual Basic

      C#

3.   Navigate to the Solution Explorer, right-click the project name, and select Add │ New Item. In the Add New Item dialog box, locate the Code File template, name it "EnumerationExtension", and click Add.

The new code file will open. Note that this code file is also included with the sample, if you choose you can simply add that file.

4.   Add the following code to the EnumerationExtension code file :

      Visual Basic

      C#

This code allows you to bind the ComboBox controls to enumeration values so at run time you can choose a bound value to set.

5.   Navigate to the Solution Explorer, right-click the project name, and select Add │ New Item. In the Add New Item dialog box, locate the Code File template, name it "Person", and click Add.

The new code file will open. Note that this code file is also included with the sample, if you choose you can simply add that file.

6.   Add the following code to the Person code file:

      Visual Basic

      C#

This code creates a simple class with a recursive ObservableCollection for items to be displayed in C1OrgChart and creates a method to build a simple organization chart. Note that the C1OrgChart control's default template uses the ToString method to dictate what text is displayed.  You will need to override this method (as in the above code) 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).

In this step you added content to the C1OrgChart control. In the next step you'll view some of the run-time interactions possible in the control.


Send us comments about this topic.
Copyright © GrapeCity, inc. All rights reserved.