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.