Step 1 of 3: Setting up the Master/Detail Grid

In this step you'll begin in Visual Studio to create a Silverlight grid application using DataGrid for Silverlight. You'll create a new Silverlight project and add the C1DataGrid control to your application.

To set up your project and add a C1DataGrid control to your application, 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 (in this example, C# is used), and in the templates list select Silverlight Application. Enter "MasterDetail" in the Name text box, 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. In the XAML window of the project, place the cursor between the <Grid> and </Grid> tags and click once.

5. 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="MasterDetail.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" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

<c1:C1DataGrid></c1:C1DataGrid>

</Grid>

</UserControl>

6. If the <c1:C1DataGrid> tag includes existing content, delete it so it appears similar to the following:

<c1:C1DataGrid></c1:C1DataGrid>

7. Give your grid a name by adding x:Name="c1dg" to the <c1:C1DataGrid> tag so that it appears similar to the following:

<c1:C1DataGrid x:Name="c1dg">

By giving the control a unique identifier, you'll be able to access the C1DataGrid control in code.

8. Add CanUserAddRows="False" to the <c1:C1DataGrid> tag so that it appears similar to the following:

<c1:C1DataGrid x:Name="c1dg" CanUserAddRows="False">

Users will not be able to add new rows to the grid.

9. Add Margin="5" to the <c1:C1DataGrid> tag so that it appears similar to the following:

<c1:C1DataGrid x:Name="c1dg" CanUserAddRows="False" Margin="5">

This will add a margin around the grid.

What You've Accomplished

You've successfully created a basic grid application. In the next step you'll add a XML data source to your project.