Reader Level:
Articles

DataGrid in WPF

By Mahak Gupta on May 10, 2012
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.
  • 0
  • 0
  • 5633
Download Files:
 

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:

DatGrdWPF1.jpg

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:

DatGrdWPF2.jpg

Mahak Gupta

My name is Mahak Gupta. I am a C# Corner MVP.

COMMENT USING

Trending up