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.
- Launch Visual Studio 2010 and create a WPF
4 application named DataGridXML.
- 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>
- 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>
- 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.