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:
