These articles will demonstrates you how to use xamlDataGrid using Silverlight 4.
First of all make a new Silverlight project and put a name and select the location to save that project like image 1.
Image 1.
Now add a reference of ComponentWays.Windows.Controls.Data.
Image 2.
Now add 2 classes in client project.
Customers.cs
using System;
using System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Ink;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
using
System.ComponentModel.DataAnnotations;
using
System.ComponentModel;
using
System.Collections.Generic;
namespace
Silverlight_DataGrid
{
public
class Customers
: INotifyPropertyChanged, IEditableObject
{
/// <summary>
/// Represents the customer's company
name.
/// </summary>
private string companyName;
/// <summary>
/// Represents the customer's contact
name.
/// </summary>
private string contactName;
/// <summary>
/// Represents the customer's contact
title.
/// </summary>
private string contactTitle;
/// <summary>
/// Represents the customer's address.
/// </summary>
private string address;
/// <summary>
/// Represents the customer's city.
/// </summary>
private string city;
/// <summary>
/// Represents the customer's region.
/// </summary>
private string region;
/// <summary>
/// Represents the customer's postal
code.
/// </summary>
private int postalCode;
/// <summary>
/// Represents the customer's country.
/// </summary>
private string country;
/// <summary>
/// Represents the customer's phone
number.
/// </summary>
private string phone;
/// <summary>
/// Represents the customer's fax number
/// </summary>
private string fax;
/// <summary>
/// Gets or sets the company name of the
customer.
/// </summary>
[Required]
[Display(Name = "Company
Name", GroupName = "Name",
Order = 0)]
public string CompanyName
{
get
{
return companyName;
}
set
{
if (value !=
companyName)
{
companyName
= value;
OnPropertyChanged("CompanyName");
}
}
}
/// <summary>
/// Gets or sets the contact name of the
customer.
/// </summary>
[Required]
[Display(Name = "Contact
Name", GroupName = "Name",
Order = 1)]
public string ContactName
{
get
{
return contactName;
}
set
{
if (value !=
contactName)
{
contactName
= value;
OnPropertyChanged("ContactName");
}
}
}
/// <summary>
/// Gets or sets the contact title of
the customer.
/// </summary>
[Required]
[Display(Name = "Contact
Title", GroupName = "ContactTitle",
Order = 2)]
public string ContactTitle
{
get
{
return
contactTitle;
}
set
{
if (value !=
contactTitle)
{
contactTitle = value;
OnPropertyChanged("ContactTitle");
}
}
}
/// <summary>
/// Gets or sets the address of the
customer.
/// </summary>
[Required]
[Display(Name = "Address",
Description = "Indicates that the
address.")]
public string Address
{
get
{
return address;
}
set
{
if (value != address)
{
address = value;
OnPropertyChanged("Address");
}
}
}
/// <summary>
/// Gets or sets the city.
/// </summary>
[Required]
[Display(Name = "City",
GroupName = "City")]
public string City
{
get
{
return city;
}
set
{
if (value != city)
{
city = value;
OnPropertyChanged("City");
}
}
}
/// <summary>
/// Gets or sets the region.
/// </summary>
[Required]
[Display(Name = "Region",
GroupName = "Region")]
public string Region
{
get
{
return region;
}
set
{
if (value != region)
{
region = value;
OnPropertyChanged("Region");
}
}
}
/// <summary>
/// Gets or sets the postal code.
/// </summary>
[Required]
//[RegularExpression(@"^\d\d\d\d\d\$", ErrorMessage =
"Postal code must be 5-digit numbers.")]
[Display(Name = "PostalCode",
Description = "Five-digit postal code",
GroupName = "PostalCode")]
public int
PostalCode
{
get
{
return postalCode;
}
set
{
if (value !=
postalCode)
{
//Validator.ValidateProperty(value,
new ValidationContext(this, null, null) { MemberName = "PostalCode"
});
postalCode
= value;
OnPropertyChanged("PostalCode");
}
}
}
/// <summary>
/// Gets or sets the country.
/// </summary>
[Required]
[Display(Name = "Country",
GroupName = "Country")]
public string Country
{
get
{
return country;
}
set
{
if (value != country)
{
country = value;
OnPropertyChanged("Country");
}
}
}
/// <summary>
/// Gets or sets the phone number.
/// </summary>
[Required]
//[RegularExpression(@"^\d\d\d\d\d\d\d\d\d\d$", ErrorMessage =
"Phone number must be 10-digit numbers.")]
[Display(Name = "Phone",
Description = "Ten-digit phone number
code", GroupName = "Phone")]
public string Phone
{
get
{
return phone;
}
set
{
if (value != phone)
{
//Validator.ValidateProperty(value, new
ValidationContext(this, null, null) { MemberName = "Phone" });
phone = value;
OnPropertyChanged("Phone");
}
}
}
/// <summary>
/// Gets or sets the fax number of the
customer.
/// </summary>
[Required]
//[RegularExpression(@"^\d\d\d\d\d\d\d\d\d\d$", ErrorMessage =
"fax number must be 10-digit numbers.")]
[Display(Name = "Fax",
Description = "Ten-digit fax number code",
GroupName = "Fax")]
public string Fax
{
get
{
return fax;
}
set
{
if (value != fax)
{
//Validator.ValidateProperty(value, new
ValidationContext(this, null, null) { MemberName = "Fax" });
fax = value;
OnPropertyChanged("Fax");
}
}
}
/// <summary>
/// Raises a property changed
notification for the specified property name.
/// </summary>
/// <param
name="propName">The name of the
property that changed.</param>
protected virtual void OnPropertyChanged(string
propName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}
#region INotifyPropertyChanged Members
/// <summary>
/// Raised when a property on the
customer changes.
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
#endregion
#region IEditableObject Members
/// <summary>
/// Keeps a copy of the original
customer detail for editing.
/// </summary>
private Customers cache;
/// <summary>
/// Indicates that the customer will
undergo a cancellable edit.
/// </summary>
public void BeginEdit()
{
cache = new Customers();
cache.CompanyName =
this.CompanyName;
cache.ContactName =
this.ContactName;
cache.ContactTitle
= this.ContactTitle;
cache.Address = this.Address;
cache.City = this.City;
cache.Region = this.Region;
cache.PostalCode = this.PostalCode;
cache.Country = this.Country;
cache.Phone = this.Phone;
cache.Fax = this.Fax;
}
/// <summary>
/// Indicates that the edit was
cancelled and that the old state should be restored.
/// </summary>
public void CancelEdit()
{
this.CompanyName = cache.CompanyName;
this.ContactName = cache.ContactName;
this.ContactTitle = cache.ContactTitle;
this.Address = cache.Address;
this.City = cache.City;
this.Region = cache.Region;
this.PostalCode = cache.PostalCode;
this.Country
= cache.Country;
this.Phone = cache.Phone;
this.Fax = cache.Fax;
cache = null;
}
/// <summary>
/// Indicates that the edit completed
and that changed fields should be committed.
/// </summary>
public void EndEdit()
{
cache = null;
}
#endregion
}
}
Add one more class
CustomersCollection.cs
using System;
using System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Ink;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
using
System.Collections.ObjectModel;
using
System.Collections.Generic;
namespace
Silverlight_DataGrid
{
public
class CustomersCollection
: ObservableCollection<Customers>
{
public CustomersCollection()
{
foreach (Customers
customer in CreateCustomers())
{
this.Add(customer);
}
}
/// <summary>
/// Gets customer information
/// </summary>
public static IEnumerable<Customers>
CreateCustomers()
{
return new ObservableCollection<Customers>
{
new Customers
{
CompanyName = "Ana Trujillo Emparedados
y helados",
ContactName = "Ana Trujillo",
ContactTitle = "Owner",
Address = "Avda. de la Constitución 2222",
City = "México
D.F.",
Region
= "xvcxvxcvcxv",
PostalCode = 12345,
Country
="Mexico",
Phone="(5) 555-4729",
Fax="(5) 555-3745"
},
new Customers
{
CompanyName = "Antonio Moreno
Taquería",
ContactName = "Antonio Moreno",
ContactTitle = "Owner",
Address
= "Mataderos
2312",
City = "México D.F.",
Region
= "sfsdf",
PostalCode = 05023,
Country
="Mexico",
Phone="(5) 555-3932",
Fax="235235235"
},
new Customers
{
CompanyName = "Berglunds snabbköp",
ContactName = "Christina Berglund",
ContactTitle = "Order
Administrator",
Address
= "Berguvsvägen 8",
City = "Luleå",
Region
= "WA",
PostalCode = 95822,
Country
="Sweden",
Phone="0921-12 34 65",
Fax="0921-12 34 67"
},
new Customers
{
CompanyName = "Blauer See
Delikatessen",
ContactName = "Hanna Moos",
ContactTitle = "Sales Representative",
Address
= "Forsterstr. 57",
City = "Mannheim",
Region
= "hgj",
PostalCode = 68306,
Country
="Germany",
Phone="0621-08460",
Fax="0621-08924"
},
new Customers
{
CompanyName = "Blondesddsl père et fils",
ContactName = "Frédérique Citeaux",
ContactTitle = "Marketing Manager",
Address = "24,
place Kléber",
City = "Strasbourg",
Region
= "hg",
PostalCode = 67000,
Country
="France",
Phone="88.60.15.31",
Fax="88.60.15.32"
},
new Customers
{
CompanyName = "Bólido Comidas
preparadas",
ContactName = "Martín Sommer",
ContactTitle = "Owner",
Address
= "C/ Araquil, 67",
City = "Madrid",
Region
= "jgk",
PostalCode = 28023,
Country
="Spain",
Phone="(91) 555 22 82",
Fax="(91) 555 91 99"
},
new Customers
{
CompanyName = "Bottom-Dollar
Markets",
ContactName = "Elizabeth Lincoln",
ContactTitle = "Accounting
Manager",
Address
= "23 Tsawassen Blvd.",
City = "Tsawassen",
Region
= "BC",
PostalCode = 34345,
Country
="Canada",
Phone="(604) 555-4729",
Fax="(604) 555-3745"
},
new Customers
{
CompanyName = "Laughing Bacchus Wine
Cellars",
ContactName = "Yoshi Tannamuri",
ContactTitle = "Marketing
Assistant",
Address
= "1900 Oak St.",
City = "Vancouver",
Region
= "BC",
PostalCode = 34545,
Country
="Canada",
Phone="(604) 555-3392",
Fax="(604) 555-7293"
},
new Customers
{
CompanyName = "Lazy K Kountry
Store",
ContactName = "John
Steel",
ContactTitle = "Marketing Manager",
Address
= "12 Orchestra Terrace",
City = "Walla Walla",
Region
= "WA",
PostalCode = 99362,
Country
="USA",
Phone="(509) 555-7969",
Fax="(509) 555-6221"
},
new Customers
{
CompanyName = "LILA-Supermercado",
ContactName = "Carlos González",
ContactTitle = "Accounting
Manager",
Address
= "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
City = "Barquisimeto",
Region
= "Lara",
PostalCode = 43508,
Country
="Venezuela",
Phone="(9) 331-6954",
Fax="(9) 331-7256"
},
new Customers
{
CompanyName = "Lonesome Pine
Restaurant",
ContactName = "Fran Wilson",
ContactTitle = "Sales Manager",
Address
= "89 Chiaroscuro Rd.",
City = "Portland",
Region
= "OR",
PostalCode = 97219,
Country
="USA",
Phone="(503) 555-9573",
Fax="(503) 555-9646"
},
new Customers
{
CompanyName = "Island Trading",
ContactName = "Helen Bennett",
ContactTitle = "Marketing Manager",
Address
= "Garden House Crowther Way",
City = "Cowes",
Region
= "Isle of Wight",
PostalCode = 79898,
Country
="UK",
Phone="(198) 555-8888",
Fax="(198) 555-8888"
},
new Customers
{
CompanyName = "HILARION-Abastos",
ContactName = "Carlos Hernández",
ContactTitle = "Sales
Representative",
Address
= "Carrera 22 con Ave. Carlos Soublette
#8-35",
City = "San Cristóbal",
Region
= "Táchira",
PostalCode = 50223,
Country
="Venezuela",
Phone="(5) 555-1340",
Fax="(5)
555-1340"
},
new Customers
{
CompanyName = "Familia Arquibaldo",
ContactName = "Aria Cruz",
ContactTitle = "Marketing
Assistant",
Address
= "Rua Orós, 92",
City = "Sao Paulo",
Region
= "SP",
PostalCode = 98789,
Country ="Brazil",
Phone="(11) 555-9857",
Fax="(11) 555-9857"
},
new Customers
{
CompanyName = "Comércio Mineiro",
ContactName = "Pedro Afonso",
ContactTitle = "Sales Associate",
Address
= "Av. dos Lusíadas, 23",
City = "Sao Paulo",
Region
= "SP",
PostalCode = 09809,
Country
="Brazil",
Phone="(11) 555-7647",
Fax="(11) 555-7647"
}
};
}
}
}
Now let's start work on MainPage.xaml
Add this reference
xmlns:dataGrid="http://schemas.componentways.com/xaml/data"
Here is all MainPage.xaml code
<UserControl x:Class="Silverlight_DataGrid.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:dataGrid="http://schemas.componentways.com/xaml/data"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" Background="#FF430000" BorderBrush="#FF585F5A" Foreground="#FF93908B">
<Grid x:Name="LayoutRoot" Background="#DE1C3DB7">
<dataGrid:XamlDataGrid x:Name="dataGrid"
HorizontalAlignment="Left"
VerticalAlignment="Top"
ItemsSource="{Binding}">
<dataGrid:XamlDataGrid.ToolBarSettings>
<dataGrid:XamlDataGridToolBarSettings CommandButtonsVisibility="Add|Edit|Delete|View|Filter"
/>
</dataGrid:XamlDataGrid.ToolBarSettings>
</dataGrid:XamlDataGrid>
</Grid>
</UserControl>
MainPage.xaml.cs
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;
using
Silverlight_DataGrid;
namespace
Silverlight_DataGrid
{
public
partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.DataContext
= new CustomersCollection();
}
}
}
Now we are done with all code part, time to run the application.
Image 3.
After running the application you see there is a data grid filled with data with toolbar Add, Edit, Delete, View and Filter links and in bottom right side there is paging link.
Note - We did not write any code for these toolbar links, these are in built in xamlDataGrid.
When you click on Add toolbar link, it opens a window like this. Just fill details and click OK.
Image 4.
When you click on Edit toolbar link it open that window with selected row records, edit details and click OK.
Image 5.
You can view selected row detail using View toolbar link click.
Image 6.
Here is one more feature which is very good from my point of view that if Filter option. When you click on Filter link it opens a window with two drop down list and one text box, first dropdown list has all column names and second has conditions and in text box you can write text from by you want to filter and click Search.
Image 7.
Result should be like this.
Image 8.
So we are done here with this cool xamlDataGrid control. If you have any questions and comments then drop me a line in c-sharpcorner comments section.