In this step you'll begin in Visual Studio to create a Silverlight grid application. You'll then continue by creating and customizing the application's user interface (UI) and adding the C1DataGrid control to your project.
To set up your project, complete the following steps:
1. In Visual Studio, select File | New | Project.
2. In the New Project dialog box, select a language in the left pane and in the templates list select Silverlight Application. Enter a Name for your project, for example "ComponentOneDataGrid", and click OK. The New Silverlight Application dialog box will appear.
3. Click OK to accept the default settings, close the New Silverlight Application dialog box, and create your project.
4. If the MainPage.xaml file is not currently open, navigate to the Solution Explorer and double-click on the MainPage.xaml item.
5. In the XAML view, locate the <UserControl> tag.
6. In the <UserControl> tag, replace Width="400" Height="300" (or d:DesignWidth="400" d:DesignHeight="300") with Width="600" Height="400".
This will increase the size of your Silverlight application.
7. Place the cursor just after the <Grid x:Name="LayoutRoot" Background="White"> tag and add the following markup:
<!-- Grid Layout-->
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
This row definition will define the layout of your grid.
8. Add a title to your application by adding the following TextBlock just under the </Grid.RowDefinitions> tag:
<!-- Title -->
<TextBlock Text="DataGrid for Silverlight" Margin="5" FontSize="16"/>
9. In the XAML window of the project, place the cursor just above the </Grid> tag and click once.
10. Navigate to the Toolbox and double-click the C1DataGrid icon to add the grid control to MainPage.xaml. The XAML markup will now look similar to the following:
<UserControl xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1DataGrid.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="600" Height="400">
<Grid x:Name="LayoutRoot" Background="White">
<!-- Grid Layout-->
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Title -->
<TextBlock Text="DataGrid for Silverlight" Margin="5" FontSize="16"/>
<c1:C1DataGrid></c1:C1DataGrid>
</Grid>
</UserControl>
Note that the C1.Silverlight.DataGrid namespace and <c1:C1DataGrid></c1:C1DataGrid> tags have been added to the project.
11. If the <c1:C1DataGrid> tag includes existing content, delete it so it appears similar to the following:
<c1:C1DataGrid>
12. Give your grid a name by adding x:Name="_c1DataGrid" to the <c1:C1DataGrid> tag so that it appears similar to the following:
<c1:C1DataGrid x:Name="_c1DataGrid">
By giving the control a unique identifier, you'll be able to access the C1DataGrid control in code.
13. Define the location of your grid by adding Grid.Row="1" to the <c1:C1DataGrid> tag so that it appears similar to the following:
<c1:C1DataGrid x:Name="_c1DataGrid" Grid.Row="1">
14. Add the following markup just after the </c1:C1DataGrid> tag:
<TextBlock x:Name="_tbStatus" Text="Ready"
VerticalAlignment="Center" FontSize="12" Foreground="Gray" Margin="5" Grid.Row="2" />
This TextBlock will be used to display status information text.
What You've Accomplished
Run your application, and observe that your page includes a title, a grid, and text below the grid. You've successfully created a basic grid application, but the grid is blank and contains no data. In the next steps you'll add a database to your project and bind the grid to a data source.
