Sample: DataGrid

Because DataGrid is does not appear in the Toolbox of ESL. So there give some DataGrid Experience step by step.

New a Silverlight Web Project named DataGridTutorial.

Cope the following code to Page.xaml.

<UserControl  x:Class="DataGridTutorial.Page"
    xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400"
    Height="300">
    <Canvas x:Name="LayoutRoot" Background="Azure">
        <TextBlock Text="Filter :" Canvas.Left="10"
            Canvas.Top="15" Width="100"></TextBlock>
        <TextBox x:Name="country" Text="" Canvas.Left="60"
            Canvas.Top="10" Width="100"></TextBox>
        <Button x:Name="load" Content="Load" Click="Button_Click"
            Canvas.Left="180" Canvas.Top="11" Width="50"></Button>
        <my:DataGrid x:Name="grid" AutoGenerateColumns="True"
            RowBackground="Aquamarine" AlternatingRowBackground="White"
            Canvas.Left="10" Canvas.Top="50" Width="380" Height="230"></my:DataGrid>
    </Canvas>
</UserControl>

Now the xaml rendering should be display like this:

Open the Page.xaml.cs, and replace the contents by the following statement.
- This is load a list of customers as the user clicks on the Load button, filtered by the content of the TextBox.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace DataGridTutorial
{
    public partial class Page : UserControl
    {
        // Internal Class
        public class Customer
        {
            public string ContactName { get; set; }
            public string Company { get; set; }
            public string Country { get; set; }
     		  
            public Customer()  { }
        }
     
        // Initialize list of customers to display in the Grid
        Customer[] customers = new Customer[] { 
        new Customer { ContactName = "Stève Sfartz", Company = "Microsoft", Country = "France" },
        new Customer { ContactName = "Vijay Rajagopalan", Company = "Microsoft", Country = "United States" },
        new Customer { ContactName = "Yves Yang", Company = "Soyatec", Country = "France" }
        };
            
        public Page()
        {
            InitializeComponent();
        }
         
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // Retreive Filter set in the Silverlight UI
            string filter = country.Text.Trim();
        	
            // Display filtered results in Grid if the filter is not empty
            if (String.IsNullOrEmpty(filter)) {
                grid.ItemsSource = customers;
            }
            else {		
                // Filter 
                var selection = from c in customers where c.Country == filter select c;
                // Display in Grid
                grid.ItemsSource = selection.ToArray<Customer>();
            }
        }
    }
}

In this project, it need to add reference "System.Windows.Controls.Data" to be complemented. Right click the project, select 'Add Reference'.

In the pop-up dialog, select 'System.Windows.Controls.Data' and click OK.
Note: The references that the project contained is highlight in gray.

Now click Navigator near by Project Explorer, find *.csproj file(here is DataGridTutorial.csproj). The reference is added automatically, see the contents which highlight in red color.

  ...
<ItemGroup>
    <Reference Include="System.Windows" />
    <Reference Include="mscorlib" />
    <Reference Include="system" />
    <Reference Include="System.Core" />
    <Reference Include="System.Net" />
    <Reference Include="System.Xml" />
    <Reference Include="System.Windows.Browser" />
     <Reference Include="System.Windows.Controls.Data, Version=2.0.5.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

</ItemGroup>
  ...

Right click DataGridTutorialTestPage.html and select Run As->Silverligth Web Application. Running the application and click Load button.

Enter "France" to the TextBox as a filter and click on the Load button.