WPF: Show Each row details in DataGrid when we click on rows

Introduction

In this article i will explain how to bind the DataGrid with list, which is already bind with public class. Also explain, when we click on any row of DataGrid then it display detailed information of selected row. This things is possible through RowDetailsTemplate of DataGrid Template. In this DataGrid we have two TextColumn and one TextBlock.

Source Code

<Grid Name="grid1" Margin="0,10,0,0">
<DataGrid Name="dg" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="ID" Binding="{Binding Id}"/>
<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>

</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<TextBlock Text="{Binding Details}"/>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>

</Grid>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfApplication1
{
/// <summary>
/// Interaction logic for addcolumn.xaml
/// </summary>
public partial class addcolumn : Window
{
public addcolumn()
{
InitializeComponent();
List<student> students = new List<student>();
students.Add(new student() { Id = 1, Name = "Jacob" });
students.Add(new student() { Id = 2, Name = "Bill" });
students.Add(new student() { Id = 3, Name = "Ammey" });
students.Add(new student() { Id = 4, Name = "John" });
students.Add(new student() { Id = 5, Name = "kitty" });
dg.ItemsSource = students;

}
public class student
{
public int Id { get; set; }
public string Name { get; set; }
public string Details
{
get
{
return String.Format("{0}=>this is row id and {1}=> this is row name", Id, Name);
}
}
}

}
}

Code generate the following output