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:
<UserControl xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" x:Class="C1DataGridLocalization.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="450" Height="300">
<Grid x:Name="LayoutRoot">
<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)
})
Next
' 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.
