# Step 1 of 3: Creating the C1OrgChart Application

## Content



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](/componentone/api/wpf/online-orgchart/dotnet-framework-api/C1.WPF.OrgChart.4.6.2/C1.WPF.OrgChart.C1OrgChart.html) control to your application, complete the following steps:

1.  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.
2.  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.
3.  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.
4.  Add the XAML namespace to the Window or UserControl tag with the following markup:
    
    ```xml
    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:
    
    ```xml
    <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">
    ```
    
    ```xml
    <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.
    
5.  If creating a Silverlight application, add the following Resources just under the UserControl tag. The XAML appears similar to the following:
    
    ```xml
    <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>
    ```
    
6.  Add the following row definition within the Grid tag:
    
    ```xml
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    ```
    
7.  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:
    
    ```xml
    <!-- 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>
    ```
    
8.  Add the following XAML markup just after the last **StackPanel** to add a **C1OrgChart** control within a **ScrollViewer** to the application:
    
    ```xml
    <!-- 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](/componentone/api/wpf/online-orgchart/dotnet-framework-api/C1.WPF.OrgChart.4.6.2/C1.WPF.OrgChart.C1OrgChart.html) control named "\_orgChart" to the application.
    

You've successfully set up your application's user interface, but the [C1OrgChart](/componentone/api/wpf/online-orgchart/dotnet-framework-api/C1.WPF.OrgChart.4.6.2/C1.WPF.OrgChart.C1OrgChart.html) control currently contains no content. In the next steps you'll add content to the [C1OrgChart](/componentone/api/wpf/online-orgchart/dotnet-framework-api/C1.WPF.OrgChart.4.6.2/C1.WPF.OrgChart.C1OrgChart.html) control, and then you'll observe some of the run-time interactions possible with the control.