Add a DataGrid to Silverlight using C#

I recently completed a project using WPF and along the way I read up some on Silverlight. I was reading that you could simply convert your MainWindow.xaml file to a MainPage.xaml. Of course this depends on the complexity of your MainWindow.xaml file. I believe it is a known fact that programs written for the installation directly on a computer system are more feature/functionally richer than a web system. And that is by design or constraint. That being said, one of the many features of Silverlight is the DataGrid. This lets you connect the XAML/XAP file to a data source. Let’s do that now.

[sourcecode language="xml" padlinenumbers="true" autolinks="false" gutter="false" toolbar="false"]
<scrollviewer verticalscrollbarvisibility="Auto">
  <stackpanel margin="20,20,20,20">
      <textblock text="Silverlight DataGrid with with SubGrid">
      <dg:datagrid rowdetailsvisibilitymode="VisibleWhenSelected">
         <dg:datagrid.rowdetailstemplate>
             <datatemplate>
                 <stackpanel orientation="Horizontal">
                     <textblock text="Products: ">
                     <textblock text="{Binding Products}">
                 </textblock>
             </textblock>
         </stackpanel>
      </datatemplate>
  </dg:datagrid.rowdetailstemplate>
</dg:datagrid></textblock></stackpanel></scrollviewer>
[/sourcecode]

You need to be sure and add the System.Windows.Controls.Data reference to your project.

I make a reference to the System.Windows.Controls.Data component from within my XAML file, setting it equal to the ‘dg’ tag. Then when I want to reference the methods within that component I use ‘dg:MethodName’. In this case I am using the DataGrid functionality. I like the SubGrid view concept so I implemented the VisibleWhenSelected event to display some additional details of the main grid row when selected.

Populating the DataGrid from the XAML.cs file is pretty easy too. Add this code to your XAML.cs code-behind associated with the above XAML file.

[sourcecode language="csharp" autolinks="false" gutter="false" toolbar="false"]
public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
 
        DataGrid dataGrid = 
            ((DataGrid)(this.FindName("dataGrid")));
        dataGrid.ItemsSource = Company.GetCompanyList();
    }
}
[/sourcecode]

This code will search for the DatGrid we added to the XAML file by name and then use that reference to populate the DataGrids’ ItemsSource. The DataGrid is populated by calling the GetCompanyList() method within the company class. You can add the below code to a new .cs (C# file). For this example I added it to the MainPage.xaml itself. See the code below.

[sourcecode language="csharp" autolinks="false" gutter="false" toolbar="false"]
    public class Company
    {
        public String Name { get; set; }
        public String Size { get; set; }
        public String Address { get; set; }
        public String Industry { get; set; }
        public Boolean? IsMajor { get; set; }
        public Boolean IsBuying { get; set; }
 
        public Company(String name, String size, String address,
            String industry, Boolean? isMajor, Boolean isBuying)
        {
            this.Name = name;
            this.Size = size;
            this.Address = address;
            this.Industry = industry;
            this.IsMajor = isMajor;
            this.IsBuying = isBuying;
        }
        public static List<company> GetCompanyList()
        {
            return new List<company>(new Company[5] {
                new Company("Company 1", "< 100", 
                    "Company 1 Street", "Software", false, true), 
                new Company("Company 2", "> 1000", 
                    "Company 2 Avenue", "Automotive", false, false),
                new Company("Company 3", "< 100 > 50", 
                    "Company 3 Boulevard", "IT Services", null, false),
                new Company("Company 4", "> 20000", 
                    "Company 4 Parkway", "Transportation", true, true),
                new Company("Company 5", "<10", 
                    "Company 5 Place", "Entertainment", true, true)
            });
        }
    }
[/sourcecode]

In most real world systems you would not load the data using hardcoded values, Like I did in this example. Instead, within your GetCompanyList() method you would access a database and load the data using ADO.Net or an ORM (Object Relation Mapping) system.




Download the source.

Leave a Comment

Your email address will not be published.