Before continuing this article, I highly recommend reading these previous parts:
Data Template
The DataGrid control not only displays data in a row and column format but it can also be used to display data in a templated format. The template is used to display a row data grouped into a template. You can define a data template as either XAML or as a resource. Imagine you need to display 50 fields in a DataGrid but a row can only display up to 10 columns. So how do you display more columns? You can use a DataTempate to do so.
If you look at Figure 13, you will see the DataGrid row has 5 columns but 3 additional columns are displayed as a part of the data template.
![]()
Figure 13
RowDetailsTemplate
The RowDetailsTemplate property represents the DataTemplate that is used to display a row details. The LoadingRowDetails and UnloadingRowDetails events are used to load and unload the data template or making changes.
A DataTemplate value is set as the RowDetailsTemplate of the DataGrid. The DataTemplate defines the vsual representation of all XAML elements of a row.
Listing 34 shows how to set the RowDetailsTemplate property of the DataGrid.
- <DataGrid x:Name="McDataGrid"
- <DataGrid.RowDetailsTemplate>
- <DataTemplate>
- </DataTemplate>
- </DataGrid.RowDetailsTemplate>
- </DataGrid>
Listing 34Earlier in this chapter in Listing 3 the Author class is defined. Now, let's add three more properties to the Author class, City, Country and Zip. The new Author class is listed in Listing 35.
- public class Author
- {
- public int ID { get; set; }
- public string Name { get; set; }
- public DateTime DOB { get; set; }
- public string BookTitle { get; set; }
- public bool IsMVP { get; set; }
- public string Email { get; set; }
- public string City { get; set; }
- public string Country { get; set; }
- public int Zip { get; set; }
- }
Listing 35Listing 36 is the new DataGrid XAML with a DataTemplate value.
- <DataGrid x:Name="McDataGrid" Margin="0" AutoGenerateColumns="False">
- <DataGrid.Columns>
- <DataGridTextColumn Binding="{Binding ID}" Header="Author ID" IsReadOnly="True"/>
- <DataGridTextColumn Header="Name" Width="140" Binding="{Binding Name}" >
- <DataGridTextColumn.ElementStyle>
- <Style TargetType="TextBlock">
- <Setter Property="TextWrapping" Value="Wrap"/>
- </Style>
- </DataGridTextColumn.ElementStyle>
- <DataGridTextColumn.EditingElementStyle>
- <Style TargetType="TextBox">
- <Setter Property="Foreground" Value="Blue"/>
- </Style>
- </DataGridTextColumn.EditingElementStyle>
- </DataGridTextColumn>
-
- <DataGridTemplateColumn Header="DOB" Width="80">
- <DataGridTemplateColumn.CellTemplate>
- <DataTemplate>
- <TextBlock Text="{Binding DOB}" Margin="4"/>
- </DataTemplate>
- </DataGridTemplateColumn.CellTemplate>
- <DataGridTemplateColumn.CellEditingTemplate>
- <DataTemplate>
- <DatePicker SelectedDate="{Binding DOB, Mode=TwoWay}" />
- </DataTemplate>
- </DataGridTemplateColumn.CellEditingTemplate>
- </DataGridTemplateColumn>
-
- <DataGridTextColumn Header="Book Title" Width="240" Binding="{Binding BookTitle}" >
- <DataGridTextColumn.ElementStyle>
- <Style TargetType="TextBlock">
- <Setter Property="TextWrapping" Value="Wrap"/>
- </Style>
- </DataGridTextColumn.ElementStyle>
- <DataGridTextColumn.EditingElementStyle>
- <Style TargetType="TextBox">
- <Setter Property="Foreground" Value="Blue"/>
- </Style>
- </DataGridTextColumn.EditingElementStyle>
- </DataGridTextColumn>
- <DataGridCheckBoxColumn Header="MVP" Binding="{Binding IsMVP}" IsThreeState="True" />
- </DataGrid.Columns>
-
- <DataGrid.RowDetailsTemplate>
- <DataTemplate>
- <Border BorderThickness="0" Background="Beige" Padding="10">
- <Grid Margin="5,0,0,0" MinWidth="650" HorizontalAlignment="Left">
- <Grid.ColumnDefinitions>
- <ColumnDefinition Width="125"></ColumnDefinition>
- <ColumnDefinition Width="*"></ColumnDefinition>
- <ColumnDefinition Width="125"></ColumnDefinition>
- <ColumnDefinition Width="*"></ColumnDefinition>
- </Grid.ColumnDefinitions>
- <Grid.RowDefinitions>
- <RowDefinition Height="Auto"></RowDefinition>
- <RowDefinition Height="Auto"></RowDefinition>
- <RowDefinition Height="Auto"></RowDefinition>
- <RowDefinition Height="Auto"></RowDefinition>
- </Grid.RowDefinitions>
-
- <TextBlock Text="City" Margin="10,0,0,0" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left"/>
- <TextBox Margin="3" Grid.Row="0" Grid.Column="1" Text="{Binding Path=City}" MaxHeight="35" />
- <TextBlock Text="Country" Margin="10,0,0,0" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left" />
- <TextBox Margin="3" Grid.Row="1" Grid.Column="1" Text="{Binding Path=Country}" MaxHeight="35"/>
- <TextBlock Text="Zip" Margin="10,0,0,0" Grid.Row="2" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left"/>
- <TextBox Margin="3" Grid.Row="2" Grid.Column="1" Text="{Binding Path=Zip}" MaxHeight="35"/>
- </Grid>
- </Border>
- </DataTemplate>
- </DataGrid.RowDetailsTemplate>
- </DataGrid>
Listing 36The new AuthorCollection with updated Author objects is listed in Listing 37.
- public class AuthorCollection : CollectionBase
- {
-
-
-
-
- public List<Author> LoadAuthors()
- {
- List<Author> authors = new List<Author>();
- authors.Add(new Author() { ID = 101, Name = "Mahesh Chand",
- BookTitle = "Graphics Programming with GDI+",
- DOB = new DateTime(1975, 2, 23), IsMVP = false,
- City = "Philadelphia", Country="USA", Zip = 19060
- });
- authors.Add(new Author()
- {
- ID = 201, Name = "Mike Gold",
- BookTitle = "Programming C#",
- DOB = new DateTime(1982, 4, 12), IsMVP = true,
- City = "Austin",
- Country = "USA", Zip = 23020
- });
- authors.Add(new Author()
- {
- ID = 244, Name = "Praveen Kumar",
- BookTitle = "ADO.NET Development",
- DOB = new DateTime(1985, 9, 11), IsMVP = true,
- City = "New Delhi",
- Country = "India", Zip = 201301
- });
-
- return authors;
- }
- }
Listing 37Now build and run the project. When you click on a row, the additional Author properties are listed below the row. See Figure 14.
Figure 14
Get Selected ItemsThe SelectedItems property returns all selected items in a DataGrid. Each selected item represents an object bound to a row. For example, in our case, an Author object and its properties are bound to the DataGrid rows.
The code snippet in Listing 38 uses the DataGrid.SelectedItems property and displays a number of selected items and then displays the Name column values of the selected items.
- var AuthorInfo = new System.Text.StringBuilder();
- MessageBox.Show(McDataGrid.SelectedItems.Count.ToString() + "items selected.");
-
- foreach (Author author in McDataGrid.SelectedItems)
- {
- AuthorInfo.AppendLine(author.Name);
- }
- MessageBox.Show(AuthorInfo.ToString());
Listing 38
Summary
In this article of the Mastering WPF DataGrid series, we saw how to use a DataTemplate to format a DataGrid row data.
In the next and final article of this series, I will discuss how to implement CRUD functionality in a DataGrid.
<<Previous Article Next Article>>