Binding XML to a WPF DataGrid

This article shows how to bind XML data to a WPF DataGrid and also style the DataGrid.

One of the new features in WPF 4 is the DataGrid control. In earlier versions of WPF, developers could only use the DataGrid present in the WPF Toolkit that was available at CodePlex. But now, with WPF 4, developers can make use of DataGrid directly without needing to install the WPF Toolkit. The new DataGrid control has many rich features to offer, especially that of data binding. If you have used Windows Forms (WinForms) and ASP.NET, you surely know the advantages of displaying many rows of data in a grid-like structure.

The DataGrid control is present in the Toolbox, as shown in Figure 1.



Figure 1

Some of the properties of this control are shown in Figure 2.



Figure 2

Let us now see how to use this control.

1. Launch Visual Studio 2010 and create a WPF 4 application named DataGridXML.
    
2. Add an XML file named Movies.xml with the following content to the project.
   
   <?xml version="1.0" encoding="utf-8" ?>
   <Movies xmlns="">
     <Movie Name="Seven Samurai" Id="101" Director="Akira Kurosawa" />
     <Movie Name="Happy Together" Id="102" Director="Wong Kar Wai"/>
     <Movie Name="Shoot The Piano Player" Id="103" Director="Francois Truffaut"/>
     <Movie Name="Roshomon" Id="104" Director="Akira Kurosawa" />
     <Movie Name="Dead Man" Id="105" Director="Jim Jarmusch"/>
     <Movie Name="Children of Heaven" Id="106" Director="Majid Majidi"/>
   </Movies>
    
3. From the Toolbox, drag and drop a DataGrid to the designer view. Configure the XAML as follows:
   
   <Window x:Class="DataGridXML.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           Title="MainWindow" Height="350" Width="525">
       <Grid>
           <Grid.Resources>
               <XmlDataProvider x:Key="MovieData" Source="Movies.xml" XPath="/Movies/Movie"/>
           </Grid.Resources>
           <DataGrid x:Name="dgridEmp" DataContext="{StaticResource MovieData}" ItemsSource="{Binding XPath=/Movies/Movie}"
    AutoGenerateColumns="False" Margin="52,89,31,50">
               <DataGrid.Columns>
                   <DataGridTextColumn Header="Name" Binding="{Binding XPath=@Name}" />
                   <DataGridTextColumn Header="Title" Binding="{Binding XPath=@Director}" />
               </DataGrid.Columns>
           </DataGrid>
       </Grid>
   </Window>
    
4. Save, build, and execute the application. The outcome is as follows:
   
   
   
   Figure 3
   
   But this DataGrid looks very bland and boring. Let's see how we can spice this up with some styles. Configure the XAML as follows to create styles for the header row and the individual TextBlock controls for each column.
   
   <Window x:Class="DataGridXML.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           Title="MainWindow" Height="255" Width="515">
       <Grid Height="165">
           <Grid.Resources>
               <Style TargetType="DataGridColumnHeader" x:Key="HeaderStyle" >
                   <Setter Property="Foreground" Value="DarkMagenta"/>
                   <Setter Property="FontSize" Value="16"/>
                   <Setter Property="Height" Value="23"></Setter>
               </Style>
               <XmlDataProvider x:Key="MovieData" Source="Movies.xml" XPath="/Movies/Movie"/>
           </Grid.Resources>
           <DataGrid x:Name="dgridEmp" DataContext="{StaticResource MovieData}" ItemsSource="{Binding XPath=/Movies/Movie}"
   AutoGenerateColumns="False" Margin="20,22,63,39">
               <DataGrid.Columns>
                   <DataGridTemplateColumn Header="MovieName" HeaderStyle="{StaticResource HeaderStyle}" >
                       <DataGridTemplateColumn.CellTemplate>
                           <DataTemplate>
                               <TextBlock Text="{Binding  XPath=@Name}" Background="LightYellow" Width="200" FontFamily="Georgia" FontSize="14" />
                           </DataTemplate>
                       </DataGridTemplateColumn.CellTemplate>
                   </DataGridTemplateColumn>
                   <DataGridTemplateColumn Header="Director" HeaderStyle="{StaticResource HeaderStyle}" >
                       <DataGridTemplateColumn.CellTemplate>
                           <DataTemplate>
                               <TextBlock Text="{Binding  XPath=@Director}" Background="LightYellow" Width="200" FontFamily="Georgia" FontSize="14"/>
                           </DataTemplate>
                       </DataGridTemplateColumn.CellTemplate>
                   </DataGridTemplateColumn>
               </DataGrid.Columns>
           </DataGrid>
       </Grid>
   </Window>

The outcome of this is as follows:



Figure 4

Conclusion: This article covered how to use XML binding with a WPF data grid and also showed how to style the data grid.