DataGrid Control In Silverlight

Before we start we will discuss some basic about silverlight Datagrid. Column Collection If you want to have some additional control over the columns in silverlight DataGrid we want to use Column collection.But first you need to AutogenerateColumns property on grid to false (Otherwise you will get all the auto-generated columns with you define columns). After that you can generate the columns manually. In DataGrid columns are define using the Columns collection. In silverlight you can use three type of columns within a Columns collection and all of them are inherit from DataGridColumn.

DataGridTextColumn

DataGridCheckBoxColumn

DataGridTemplateColumn

Example :

            <sdk:DataGrid Name="grid" Margin="10" AutoGenerateColumns="False">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTextColumn Header="Name" Binding="{Binding FristName}" />
                    <sdk:DataGridTextColumn Header="Age" Binding="{Binding Age}"/>
                    <sdk:DataGridCheckBoxColumn Header="Male" Binding="{Binding Male}"/>

                    <sdk:DataGridTemplateColumn Header="TwoName">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Padding="5,0,5,0" Text="{Binding FristName,Mode=TwoWay}"/>
                                    <TextBlock Text="{Binding SecondName,Mode=TwoWay}"/>
                                </StackPanel>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Padding="5,0,5,0" Text="{Binding FristName,Mode=TwoWay}"/>
                                    <TextBlock Text="{Binding SecondName,Mode=TwoWay}"/>
                                </StackPanel>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                    </sdk:DataGridTemplateColumn>
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>

Now we will start our sample application. 1.Create a new Silverlight project and Name it as SilverlightDataGrid. 2. Add new class called Person to your silverlight project and implement the class as below.

    public class Person
    {
        public string FirstName { get; set; }
        public string SecondName { get; set; }
        public int Age { get; set; }
        public bool Male { get; set; }

        public static ObservableCollection<Person> GetData()
        {
            ObservableCollection<Person> data = new ObservableCollection<Person>();
            data.Add(new Person() { FirstName = "Erandika", SecondName = "Sandaruwan", Age = 25, Male = true});
            data.Add(new Person() { FirstName = "Sachinthana", SecondName = "Vidulakshi", Age = 23, Male = false});
            data.Add(new Person() { FirstName = "Chathura", SecondName = "Achini", Age = 27, Male = false});
            data.Add(new Person() { FirstName = "Niluka", SecondName = "Dilani", Age = 30, Male = false});
            data.Add(new Person() { FirstName = "Krishantha", SecondName = "Nawarathne", Age = 33, Male = true});
            data.Add(new Person() { FirstName = "Lahiru", SecondName = "Kariyawasam", Age = 30, Male = true});

            return data;
        }
    }

3. Add the DataGrid to the MainPage.xaml. And designed the DataGrid as below.

    <Grid x:Name="LayoutRoot" Background="White">

        <sdk:DataGrid Name="grid" Margin="10" AutoGenerateColumns="False">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" />
                <sdk:DataGridTextColumn Header="Second Name" Binding="{Binding SecondName}" />
                <sdk:DataGridTextColumn Header="Age" Binding="{Binding Age}"/>
                <sdk:DataGridCheckBoxColumn Header="Male" Binding="{Binding Male}"/>
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>

    </Grid>

4. We already implemented our Person class and designed our XAML. Now we need to bind the data to DataGrid.To do that we need to do some coding in MainPage.xaml.cs class. First We need to implement the Load event for the page.Then inside the Load event we will bind data to the DataGrid.

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            this.PersonGrid.ItemsSource = Person.GetData();
        }
    }

5. Now Run your application and you will see output like below. [caption id="attachment_79" align="aligncenter" width="557" caption="Final Output"][/caption] Download Source Code : Here