ComponentOne OrgChart for UWP
OrgChart for UWP Quick Start / Step 1 of 3: Creating the C1OrgChart Application
In This Topic
    Step 1 of 3: Creating the C1OrgChart Application
    In This Topic

    In this step you'll create a Universal Windows application using OrgChart for UWP. 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:

    1. In Visual Studio select File | New | Project.
    2. Select Templates | Visual C# | Windows | Universal. From the templates list, select Blank App (Universal Windows).
    3. Enter a Name and click OK to create your project. Open the XAML view of the MainPage.xaml file; in this quick start you'll add controls using XAML markup.
    4. Navigate to the Toolbox and double-click the C1OrgChart icon. This will add the control to your application. This will add the reference and XAML namespace automatically.
    5. Add the following to the <OrgChart:C1OrgChart> tag:
    • Name="c1OrgChart1"
    • ConnectorThickness="2"
    • ConnectorStroke="Black"
    • Orientation="Vertical"
    • ChildSpacing="20, 30"

    The XAML markup should resemble the following:

    Markup
    Copy Code
    <OrgChart:C1OrgChart Name="c1OrgChart1" ConnectorThickness="2" ConnectorStroke="Black" Orientation="Vertical" ChildSpacing="20,30" VerticalAlignment="Center" HorizontalAlignment="Center" >
    
    1. Place the following C1OrgChart.ItemTemplate between the <OrgChart:C1OrgChart> and </OrgChart:C1OrgChart> tags:
    Markup
    Copy Code
    <OrgChart:C1OrgChart.ItemTemplate>
       <DataTemplate>
           <Border Background="#FF6AD400" Width="180" Height="90">
              <TextBlock Text="{Binding Name}" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
           </Border>
       </DataTemplate>
    </OrgChart:C1OrgChart.ItemTemplate>
    

    You've successfully set up your application's user interface, but the C1OrgChart control currently contains no content. In the next step you'll add content to the C1OrgChart control.

    See Also