Post
Ask Question

XamlDataGrid using Silverlight 4


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.

Image1.jpg
 
Image 1.

Now add a reference of ComponentWays.Windows.Controls.Data.

Image2.jpg 

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.

Image3.jpg

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.

Image4.jpg 

Image 4.

When you click on Edit toolbar link it open that window with selected row records, edit details and click OK.

Image5.jpg 

Image 5.

You can view selected row detail using View toolbar link click.

Image6.jpg

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. 

Image7.jpg

Image 7.

Result should be like this.

Image8.jpg 

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.


Similar Articles