DataGrid in WPF

In this article, we will discuss the DataGrid Control In WPF. In this example, we fill the data in the DataGrid with the help of a XML file. For this, follow these steps:

Step 1: Download the WPF Toolkit from the following Link:

http://wpf.codeplex.com/releases/view/40535

Step 2: Now we add the reference of this Toolkit in our WPf Project Like this:

Click on the Project Menu and then click on the Add Reference. The following window will be appear:

Now we add the reference from the window. The following code will be added in the .xaml page:

<Window x:Class="Binding_Data_In_WPF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300"  xmlns:my1="http://schemas.microsoft.com/wpf/2008/toolkit">
</Window>

Step 3: After that, we will add the XML file (Students.xml) to our project. This file is used to fill the data in the DataGrid.

<?xml version='1.0'?>
<Data>
  <Student>
    <Id>1</Id>
    <Name>Mahak</Name>
    <Subject1>90</Subject1>
    <Subject2>80</Subject2>
    <Subject3>95</Subject3>
    <Subject4>70</Subject4>
    <Subject5>85</Subject5>
  </Student>
  <Student>
    <Id>2</Id>
    <Name>Juhi</Name>
    <Subject1>75</Subject1>
    <Subject2>95</Subject2>
    <Subject3>75</Subject3>
    <Subject4>65</Subject4>
    <Subject5>75</Subject5>
  </Student>
  <Student>
    <Id>3</Id>
    <Name>Pihu</Name>
    <Subject1>77</Subject1>
    <Subject2>95</Subject2>
    <Subject3>78</Subject3>
    <Subject4>69</Subject4>
    <Subject5>80</Subject5>
  </Student>
</Data>

Step 4: After that, we write the following code in the .xaml page.

<Window.Resources>

        <XmlDataProvider x:Key="StudentData" Source="C:\Users\dell\Desktop\Binding Data In WPF\Binding Data In WPF\Students.xml"
             XPath="Data"/>
    </Window.Resources>

Step 5: Now we add the DataGrid in our Page. Since it is part of the WPF toolkit, we write the following code in it:

<StackPanel>
        <my1:DataGrid
            DataContext="{StaticResource StudentData}"
            ItemsSource="{Binding XPath=Student}"
            AutoGenerateColumns="False" Height="Auto"
            Name="dataGrid1" Margin="0,25,0,0"
            VerticalAlignment="Top" HorizontalAlignment="Stretch">

            <my1:DataGrid.Columns>
                <my1:DataGridTextColumn
                    Header="Id"
                    Binding="{Binding XPath=Id}"/>
                <my1:DataGridTextColumn

                    Header="Name"
                    Binding="{Binding XPath=Name}"/>
                <my1:DataGridTextColumn
                    Header="Subject1"
                    Binding="{Binding XPath=Subject1}"/>
                <my1:DataGridTextColumn
                    Header="Subject2"
                    Binding="{Binding XPath=Subject2}" />
                <my1:DataGridTextColumn
                    Header="Subject3"
                    Binding="{Binding XPath=Subject3}" />
                <my1:DataGridTextColumn
                    Header="Subject4"
                    Binding="{Binding XPath=Subject4}" />
                <my1:DataGridTextColumn
                    Header="Subject5"
                    Binding="{Binding XPath=Subject5}" />

            </my1:DataGrid.Columns>

        </my1:DataGrid>

    </StackPanel>

Note: Here we create the column on the basis of our XML file.

The output will be: