Step 1 of 3: Creating the C1OrgChart Application

In this step you'll create a WPF or Silverlight application using OrgChart for WPF and Silverlight. C1OrgChart allows you to create hierarchical diagrams that show the structure and relationships of your data. To set up your project and add a C1OrgChart control to your application, complete the following steps:

Create a new WPF or Silverlight project in Visual Studio. In this example the application will be named "QuickStart". If you name the project something else, in later steps you may need to change references to "QuickStart" with the name of your project.
In the Solution Explorer, right-click the project name and choose Add Reference. In the Add Reference dialog box, locate and select the C1.WPF and C1.WPF.OrgChart or C1.Silverlight and C1.Silverlight.OrgChart assemblies and click OK to add references to your project.
Open the XAML view of the MainWindow.xaml or MainPage.xaml file; in this quick start you'll add templates and controls using XAML markup.

Add the XAML namespace to the Window or UserControl tag with the following markup:

XAML	Copy Code
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:ext="clr-namespace:Util" xmlns:local="clr-namespace:QuickStart"

Note that if you named your project something other than "QuickStart" you will have to update the last reference with your project name. The Window or UserControl tag will now appear similar to the following:

XAML	Copy Code
<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:ext="clr-namespace:QuickStart.Util" xmlns:local="clr-namespace:QuickStart" Title="ComponentOne OrgChart for WPF" Height="275" Width="425">

XAML

Copy Code

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:ext="clr-namespace:QuickStart.Util" xmlns:local="clr-namespace:QuickStart"
    Title="ComponentOne OrgChart for WPF" Height="275" Width="425">

XAML	Copy Code
<UserControl x:Class="C1SilverlightCS111010.MainPage" xlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml xmlns:d=http://schemas.microsoft.com/expression/blend/2008 xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:c1=http://schemas.componentone.com/winfx/2006/xaml xmlns:ext="clr-namespace:Util" xmlns:local="clr-namespace:QuickStart" mc:Ignorable="d" d:DesignHeight="262" d:DesignWidth="399">

XAML

Copy Code

<UserControl x:Class="C1SilverlightCS111010.MainPage"
 xlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     
 xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
 xmlns:d=http://schemas.microsoft.com/expression/blend/2008
 xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006
 xmlns:c1=http://schemas.componentone.com/winfx/2006/xaml
 xmlns:ext="clr-namespace:Util" xmlns:local="clr-namespace:QuickStart"
 mc:Ignorable="d" d:DesignHeight="262" d:DesignWidth="399">

This is a unified namespace that will enable you to work with most of the controls in WPF and Silverlight Edition without adding multiple namespaces.

If creating a Silverlight application, add the following Resources just under the UserControl tag. The XAML appears similar to the following:

XAML	Copy Code
<UserControl.Resources> <!-- TemplateSelector: picks _tplDirector or _tlpOther --> <local:PersonTemplateSelector x:Key="_personTplSelector" /> <!-- data template for Directors --> <DataTemplate x:Key="_tplDirector" > <Border Background="Gold" BorderBrush="Black" BorderThickness="2 2 4 4" CornerRadius="6" Margin="20" MaxWidth="200" > <StackPanel Orientation="Vertical" > <Border CornerRadius="6 6 0 0" Background="Black" > <StackPanel Orientation="Horizontal"> <Ellipse Width="12" Height="12" Fill="Gold" Margin="4" /> <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="16" Foreground="Gold" /> </StackPanel> </Border> <TextBlock Text="{Binding Position}" Padding="6 0" FontSize="14" FontStyle="Italic" HorizontalAlignment="Right" /> </StackPanel> </Border> </DataTemplate> <!-- data template for everyone else --> <DataTemplate x:Key="_tplOther" > <Border Background="WhiteSmoke" BorderBrush="Black" BorderThickness="1 1 2 2" CornerRadius="6" MaxWidth="200" > <StackPanel Orientation="Vertical" > <Border CornerRadius="6 6 0 0" Background="Black" > <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="14" Foreground="WhiteSmoke" Padding="4 0 0 0" /> </Border> <TextBlock Text="{Binding Notes}" Padding="6 0" FontSize="9.5" TextWrapping="Wrap" /> <TextBlock Text="{Binding Position}" Padding="6 0" FontSize="12" FontStyle="Italic" HorizontalAlignment="Right" /> </StackPanel> </Border> </DataTemplate> </UserControl.Resources>

XAML

Copy Code

<UserControl.Resources>
        <!-- TemplateSelector: picks _tplDirector or _tlpOther -->
        <local:PersonTemplateSelector x:Key="_personTplSelector" />
        <!-- data template for Directors -->
        <DataTemplate x:Key="_tplDirector" >
            <Border
                Background="Gold" BorderBrush="Black"
                BorderThickness="2 2 4 4" CornerRadius="6"
                Margin="20" MaxWidth="200" >
                <StackPanel Orientation="Vertical" >
                    <Border CornerRadius="6 6 0 0" Background="Black" >
                        <StackPanel Orientation="Horizontal">
                            <Ellipse Width="12" Height="12" Fill="Gold" Margin="4" />
                            <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="16" Foreground="Gold" />
                        </StackPanel>
                    </Border>
                    <TextBlock Text="{Binding Position}" Padding="6 0" FontSize="14" FontStyle="Italic" HorizontalAlignment="Right" />
                </StackPanel>
            </Border>
        </DataTemplate>
        <!-- data template for everyone else -->
        <DataTemplate x:Key="_tplOther" >
            <Border
                Background="WhiteSmoke" BorderBrush="Black"
                BorderThickness="1 1 2 2" CornerRadius="6"
                MaxWidth="200" >
                <StackPanel Orientation="Vertical" >
                    <Border CornerRadius="6 6 0 0" Background="Black" >
                        <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="14" Foreground="WhiteSmoke" Padding="4 0 0 0" />
                    </Border>
                    <TextBlock Text="{Binding Notes}" Padding="6 0" FontSize="9.5" TextWrapping="Wrap" />
                    <TextBlock Text="{Binding Position}" Padding="6 0" FontSize="12" FontStyle="Italic" HorizontalAlignment="Right" />
                </StackPanel>
            </Border>
        </DataTemplate>
</UserControl.Resources>

Add the following row definition within the Grid tag:

XAML	Copy Code
<Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions>

Add the following markup just below the row definition to add a title and a control panel that will enable you to change the display of the C1OrgChart control at run time:

XAML	Copy Code
<!-- sample title --> <StackPanel Orientation="Horizontal" > <TextBlock Text="C1OrgChart Quick Start" FontSize="16" VerticalAlignment="Bottom" /> <TextBlock Name="_tbTotal" VerticalAlignment="Bottom" /> </StackPanel> <!-- control panel --> <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid.Row="1" > <Button Content="New Data" Padding="8 0" Click="Button_Click" /> <TextBlock Text=" Zoom: " VerticalAlignment="Center" /> <Slider x:Name="_sliderZoom" VerticalAlignment="Center" Minimum=".01" Maximum="1" Value="1" Width="200" /> </StackPanel> <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid.Row="2"> <StackPanel Orientation="Horizontal" > <TextBlock Text="Orientation: " VerticalAlignment="Center" /> <ComboBox Width="100" SelectedValue="{Binding ElementName=_orgChart, Path=Orientation, Mode=TwoWay}" ItemsSource="{Binding Source={ext:EnumerationExtension EnumType=Orientation}}" /> </StackPanel> <StackPanel Orientation="Horizontal" > <TextBlock Text=" HorizontalContentAlignment: " VerticalAlignment="Center" /> <ComboBox Width="80" SelectedValue="{Binding ElementName=_orgChart, Path=HorizontalContentAlignment, Mode=TwoWay}" ItemsSource="{Binding Source={ext:EnumerationExtension EnumType=HorizontalAlignment}}" /> </StackPanel> <StackPanel Orientation="Horizontal" > <TextBlock Text=" VerticalContentAlignment: " VerticalAlignment="Center" /> <ComboBox Width="80" SelectedValue="{Binding ElementName=_orgChart, Path=VerticalContentAlignment, Mode=TwoWay}" ItemsSource="{Binding Source={ext:EnumerationExtension EnumType=VerticalAlignment}}" /> </StackPanel> </StackPanel>

XAML

Copy Code

<!-- sample title -->
        <StackPanel Orientation="Horizontal" >
            <TextBlock Text="C1OrgChart Quick Start" FontSize="16" VerticalAlignment="Bottom" />
            <TextBlock Name="_tbTotal" VerticalAlignment="Bottom" />
        </StackPanel>
<!-- control panel -->
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid.Row="1" >
    <Button Content="New Data" Padding="8 0" Click="Button_Click" />
    <TextBlock Text="  Zoom: " VerticalAlignment="Center" />
    <Slider x:Name="_sliderZoom" VerticalAlignment="Center" Minimum=".01" Maximum="1" Value="1" Width="200" />
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid.Row="2">
    <StackPanel Orientation="Horizontal" >
        <TextBlock Text="Orientation: " VerticalAlignment="Center" />
        <ComboBox Width="100" SelectedValue="{Binding ElementName=_orgChart, Path=Orientation, Mode=TwoWay}" ItemsSource="{Binding Source={ext:EnumerationExtension EnumType=Orientation}}" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" >
        <TextBlock Text="  HorizontalContentAlignment: " VerticalAlignment="Center" />
    <ComboBox Width="80" SelectedValue="{Binding ElementName=_orgChart, Path=HorizontalContentAlignment, Mode=TwoWay}" ItemsSource="{Binding Source={ext:EnumerationExtension EnumType=HorizontalAlignment}}" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" >
        <TextBlock Text="  VerticalContentAlignment: " VerticalAlignment="Center" />
        <ComboBox Width="80" SelectedValue="{Binding ElementName=_orgChart, Path=VerticalContentAlignment, Mode=TwoWay}" ItemsSource="{Binding Source={ext:EnumerationExtension EnumType=VerticalAlignment}}" />
    </StackPanel>
</StackPanel>

Add the following XAML markup just after the last StackPanel to add a C1OrgChart control within a ScrollViewer to the application:

XAML	Copy Code
<!-- org chart --> <ScrollViewer Grid.Row="3" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Padding="0"> <c1:C1OrgChart x:Name="_orgChart" Grid.Row="1" Orientation="Horizontal" ItemTemplateSelector="{StaticResource _personTplSelector}" ConnectorStroke="Black" ConnectorThickness="2" > <!-- scale transform bound to slider --> <c1:C1OrgChart.RenderTransform> <ScaleTransform ScaleX="{Binding Value, ElementName=_sliderZoom}" ScaleY="{Binding Value, ElementName=_sliderZoom}" /> </c1:C1OrgChart.RenderTransform> </c1:C1OrgChart> </ScrollViewer>

XAML

Copy Code

<!-- org chart -->
<ScrollViewer Grid.Row="3" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Padding="0">
 <c1:C1OrgChart x:Name="_orgChart" Grid.Row="1"                 Orientation="Horizontal" ItemTemplateSelector="{StaticResource _personTplSelector}" ConnectorStroke="Black" ConnectorThickness="2" >
<!-- scale transform bound to slider -->
    <c1:C1OrgChart.RenderTransform>
        <ScaleTransform ScaleX="{Binding Value, ElementName=_sliderZoom}" ScaleY="{Binding Value, ElementName=_sliderZoom}" />
    </c1:C1OrgChart.RenderTransform>
</c1:C1OrgChart>
</ScrollViewer>

This will add a C1OrgChart control named "_orgChart" to the application.

You've successfully set up your application's user interface, but the C1OrgChart control currently contains no content. In the next steps you'll add content to the C1OrgChart control, and then you'll observe some of the run-time interactions possible with the control.