Part 1: Silverlight with a DataGrid – An example for beginners

I have recently been working with a Microsoft Silverlight Visual Studio 2010 project. I wanted to share a very basic Silverlight application as an example for beginners. This example includes a simple button that loads a list of cars into the DataGrid. The car list date is hard coded in a class.  In each additional post I will add more features to the DataGrid. I also intend to move the car list over to SharePoint in the final example and also host the Silverlight application in SharePoint 2010 utilizing the SharePoint Client Object Model.

This is the XAML MainPage.XAML Code:

<UserControl x:Class=”SPSilverlightList.MainPage”
    d:DesignHeight=”272″ d:DesignWidth=”462″ xmlns:data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data” HorizontalAlignment=”Center”>

    <Grid x:Name=”LayoutRoot” Background=”#FF77CEF5″ Height=”264″ Width=”358″>
        <Button Content=”Load Car Data from Cars List” Height=”23″ HorizontalAlignment=”Left” Margin=”90,12,0,0″ Name=”button1″ VerticalAlignment=”Top” Width=”180″ Click=”button1_Click” />
        <data:DataGrid AutoGenerateColumns=”True” Height=”180″ HorizontalAlignment=”Left” Margin=”12,52,0,0″ Name=”dataGrid1″ VerticalAlignment=”Top” Width=”324″ Background=”#FF25A4DD”>

 This is the 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;

namespace SPSilverlightList
    public partial class MainPage : UserControl
        public MainPage()

        private void button1_Click(object sender, RoutedEventArgs e)
            dataGrid1.ItemsSource = loadCarListData();

        public class Cars
            public string manufacturer { get; set; }
            public string carModel { get; set; }
            public double engineSize { get; set; }
            public int horsepower { get; set; }

        private List&lt;Cars&gt; loadCarListData()
            List&lt;Cars&gt; cars = new List&lt;Cars&gt;();

            cars.Add(new Cars()
                manufacturer = "Ferrari",
                carModel = "F355",
                engineSize = 3.5,
                horsepower = 375

            cars.Add(new Cars()
                manufacturer = "Porsche",
                carModel = "911",
                engineSize = 2.7,
                horsepower = 130

            cars.Add(new Cars()
                manufacturer = "Astin Martin",
                carModel = "Vanquish",
                engineSize = 6.0,
                horsepower = 520

            cars.Add(new Cars()
                manufacturer = "Lamborghini",
                carModel = "LP700-4",
                engineSize = 6.5,
                horsepower = 700

            return cars;


This is the running silverlight application which loads the list on the button click event:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s