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”
    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:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006
    mc:Ignorable=”d”
    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”>
        </data:DataGrid>
    </Grid>
</UserControl>

 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()
        {
            InitializeComponent();
        }

        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:

WordPress.com Logo

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

Google photo

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

Twitter picture

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

Facebook photo

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

Connecting to %s

%d bloggers like this: