Step 1 of 3: Setting up the Localized Grid

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

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 "C1DataGridLocalization" in the Name text box, and click OK. The New Silverlight Application dialog box will appear.

3. Click OK to close the New Silverlight Application dialog box and create your project.

4. In the <UserControl> tag, replace Width="400" (or d:DesignWidth="400") with Width="450" to increase its size.

5. In the XAML window of the project, place the cursor between the <Grid> and </Grid> tags and click once.

6. 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:

<c1:C1DataGrid></c1:C1DataGrid>

</Grid>

</UserControl>

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

<c1:C1DataGrid></c1:C1DataGrid>

8. 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.

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

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

10. In the Solution Explorer, right-click the C1DataGridLocalization project and select Build.

11. In the Solution Explorer, right-click the MainPage.xaml file and click View Code in the context menu to open the Code Editor.

12. Add the following code to the project to create the Data class:

· Visual Basic

Public Class Data

Private _ProductName As String

Public Property ProductName() As String

Get

Return _ProductName

End Get

Set(ByVal value As String)

_ProductName = value

End Set

End Property

Private _Description As String

Public Property Description() As String

Get

Return _Description

End Get

Set(ByVal value As String)

_Description = value

End Set

End Property

Private _Quantity As Integer

Public Property Quantity() As Integer

Get

Return _Quantity

End Get

Set(ByVal value As Integer)

_Quantity = value

End Set

End Property

Private _InStock As Boolean

Public Property InStock() As Boolean

Get

Return _InStock

End Get

Set(ByVal value As Boolean)

_InStock = value

End Set

End Property

End Class

· C#

public class Data

{

public string ProductName { get; set; }

public string Description { get; set; }

public int Quantity { get; set; }

public bool InStock { get; set; }

}

13. Add the following code to the MainPage constructor to populate the grid:

· Visual Basic

Public Sub New()

InitializeComponent()

' Add data to a data source.

Dim source As New List(Of Data)()

Dim itemsCount As Integer = 25

For i As Integer = 0 To itemsCount - 1

source.Add(New Data With

{

.ProductName = "Name",

.Description = "Description",

.Quantity = i,

.InStock = (i Mod 2 = 0)

})

' Set the grid's ItemsSource property.

c1dg.ItemsSource = source

End Sub

· C#

public MainPage()

{

InitializeComponent();

// Add data to a data source.

List<Data> source = new List<Data>();

int itemsCount = 25;

for (int i = 0; i < itemsCount; i++)

{

source.Add(new Data()

{

ProductName = "Name",

Description = "Description",

Quantity = i,

InStock = (i % 2 == 0)

});

}

// Set the grid's ItemsSource property.

c1dg.ItemsSource = source;

}

What You've Accomplished

In this step you created a new Silverlight application, added a C1DataGrid control, and bound the control to a data source. In the next step, you'll add a resource file to localize the grid.