Create the "Templates" Solution

To illustrate the power of DataTemplates, let's create a new Silverlight solution. Call it "Templates". Complete the following steps:

Select File | New | Project to open the New Project dialog box in Visual Studio 2008.
In the Project types pane, expand either the Visual Basic or Visual C# node and select Silverlight.
Choose Silverlight Application in the Templates pane.
Name the project "Templates", specify a location for the project, and click OK. Next, Visual Studio will prompt you for the type of hosting you want to use for the new project.
In the New Silverlight Application dialog box, select OK to accept the default name ("Templates.Web") and settings and create the project.
Right-click the Templates project in the Solution Explorer and select Add Reference.
In the Add Reference dialog box locate and select the C1.Silverlight.dll assembly and click OK to add a reference to your project. This is required since we will be adding C1.Silverlight controls to the page.

Now, open the MainPage.xaml file in the Templates project and paste in the XAML below:

XAML	Copy Code
<UserControl x:Class="Templates.MainPage" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:C1_Silverlight="clr-namespace:C1.Silverlight;assembly=C1.Silverlight"> <Grid x:Name="LayoutRoot" > <Grid.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF7EB9F0"/> <GradientStop Color="#FF284259" Offset="1"/> </LinearGradientBrush> </Grid.Background> <!-- Grid layout --> <Grid.RowDefinitions> <RowDefinition Height="30" /> <RowDefinition Height="" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width=""/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!-- Page title --> <TextBlock Text="Silverlight Templates" Grid.Column="0" Grid.ColumnSpan="2" TextAlignment="Center" FontSize="18" FontWeight="Bold" /> <!-- ListBox on the left --> <StackPanel Grid.Row="1" Margin="5" > <TextBlock Text="ListBox Control" /> <ListBox x:Name="_listBox" /> </StackPanel> <!-- C1ComboBoxes on the right --> <StackPanel Grid.Column="2" Grid.Row="1" Margin="5" > <TextBlock Text="C1ComboBox Controls" /> <C1_Silverlight:C1ComboBox x:Name="_cmb1" Margin="0,0,0,5" /> <C1_Silverlight:C1ComboBox x:Name="_cmb2" Margin="0,0,0,5" /> </StackPanel> </Grid> </UserControl>

XAML

Copy Code

<UserControl x:Class="Templates.MainPage"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:C1_Silverlight="clr-namespace:C1.Silverlight;assembly=C1.Silverlight">

  <Grid x:Name="LayoutRoot" >
    <Grid.Background>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF7EB9F0"/>
        <GradientStop Color="#FF284259" Offset="1"/>
      </LinearGradientBrush>
    </Grid.Background>

    <!-- Grid layout -->
    <Grid.RowDefinitions>
      <RowDefinition Height="30" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <!-- Page title -->
    <TextBlock Text="Silverlight Templates" Grid.Column="0" Grid.ColumnSpan="2"
        TextAlignment="Center" FontSize="18" FontWeight="Bold" />

    <!-- ListBox on the left -->
    <StackPanel Grid.Row="1" Margin="5" >
      <TextBlock Text="ListBox Control" />
      <ListBox x:Name="_listBox" />
    </StackPanel>

    <!-- C1ComboBoxes on the right -->
    <StackPanel Grid.Column="2" Grid.Row="1" Margin="5" >
      <TextBlock Text="C1ComboBox Controls" />
      <C1_Silverlight:C1ComboBox x:Name="_cmb1" Margin="0,0,0,5" />
      <C1_Silverlight:C1ComboBox x:Name="_cmb2" Margin="0,0,0,5" />
    </StackPanel>

  </Grid>
</UserControl>

This creates a page with two columns. The left column has a standard ListBox control and the right has two C1ComboBoxes. These are the controls we will populate and style in the following steps.