Step 1 of 3: Creating the User Interface

In This Topic

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 "StealthPaging", 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. Navigate to the Solution Explorer, right-click the StealthPaging project, and select Add Reference from the context menu.

5. In the Add Reference dialog box locate the System.Runtime.Serialization assembly and click the OK button to add a reference to your project. The dialog box will close and the reference will be added.

6. If the MainPage.xaml file is not currently open, navigate to the Solution Explorer and double-click on the MainPage.xaml item.

7. In the XAML view, place the cursor just after the <Grid x:Name="LayoutRoot" Background="White"> tag and add the following markup:

<Grid.RowDefinitions>

</Grid.RowDefinitions>

This row definition will define the layout of your application.

8. In the XAML window of the project, place the cursor just above the </Grid> tag and click once.

9. 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 x:Class="StealthPaging.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:DesignHeight="300" d:DesignWidth="400" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<c1:C1DataGrid />

</Grid>

</UserControl>

Note that the C1.Silverlight.DataGrid namespace and <c1:C1DataGrid /> tag has been added to the project.

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

<c1:C1DataGrid />

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

<c1:C1DataGrid x:Name="peopleDataGrid" />

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

12. Customize your grid by adding AutoGenerateColumns="True" CanUserAddRows="False" to the <c1:C1DataGrid> tag so that it appears similar to the following:

<c1:C1DataGrid x:Name="peopleDataGrid" AutoGenerateColumns="True" CanUserAddRows="False" />

This markup will set the grid to generate columns automatically and will disable adding new rows.

13. Add the following markup just after the </c1:C1DataGrid> tag:

This TextBlock will be used to display status information text.

What You've Accomplished

If you run your application you'll observe that your page includes 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 bind the grid to a data source and add stealth paging in code.