In this step you'll create a Silverlight application using OrgChart for 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:
1. Create a new 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. For more information about creating a Silverlight project, see Creating a New Silverlight 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.Silverlight and C1.Silverlight.OrgChart assemblies and click OK to add references to your project.
3. Open the XAML view of the MainPage.xaml file; in this quick start you'll add templates and controls using XAML markup.
4. Add the XAML namespace to the UserControl tag with the following markup:
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 UserControl tag will now appear similar to the following:
<UserControl x:Class="C1SilverlightCS111010.MainPage" xmlns="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 ComponentOne Silverlight controls without adding multiple namespaces.
5. Add the following Resources just under the UserControl tag
The XAML will appear similar to the following:
<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:
<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:
<!-- 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:
<!-- 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.