I have got my model to display like below:
What I am trying to achieve is that instead of having the row details show up the way they do by default, I want them to be displayed aligned to the parent grid columns.I want the details grid to skip the first 3 columns (be blank),and then have details align with the 'street name', 'street number', column of the parent row.
If someone could point me to the properties I should look into to achieve this, that would be great.
Update:
I made some progress, but still not all the way through. I've got the rows displaying how I wanted, but it breaks when the column is resized. I didn't find any event related to Column width changed or similar to write a code behind to adjust the width. How is it done in WPF? Also, is there a better way to achieve this? 
The xaml code is:
<Window x:Class="AligningDetailsView.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:AligningDetailsView"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Window.Resources>
<CollectionViewSource x:Key="customerViewSource"
Source="{Binding Customers}"
d:DesignSource="{d:DesignInstance {x:Type local:Customer}, CreateList=True}" />
</Window.Resources>
<Grid>
<DataGrid x:Name="customerDataGrid"
ItemsSource="{Binding Source={StaticResource customerViewSource}}"
EnableRowVirtualization="True"
AutoGenerateColumns="False" RowDetailsVisibilityMode="VisibleWhenSelected"
Margin="0,27,0.4,-0.2">
<DataGrid.Columns>
<DataGridTextColumn x:Name="firstNameColumn"
Width="100"
Header="First Name"
Binding="{Binding FirstName}" />
<DataGridTextColumn x:Name="lastNameColumn"
Width="100"
Header="Last Name"
Binding="{Binding LastName}" />
<DataGridTextColumn x:Name="phoneColumn"
Width="100"
Header="Age"
Binding="{Binding Age}" />
<DataGridTextColumn x:Name="colStreetNumber"
Width="100"
Header="StreetNumber" />
<DataGridTextColumn x:Name="colStreetName"
Width="100"
Header="StreetNumber" />
<DataGridTextColumn x:Name="colState"
Width="100"
Header="State" />
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<DataGrid ItemsSource="{Binding Addresses}"
RowHeaderWidth="300"
HeadersVisibility="Row"
AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn x:Name="detail1"
Binding="{Binding StreetNumber}" Width="100" />
<DataGridTextColumn x:Name="detail2"
Width="100" Binding="{Binding StreetName}" />
<DataGridTextColumn x:Name="detail3"
Width="100" Binding="{Binding State}" />
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
</Grid>
and the code behind is:
public partial class MainWindow : Window
{
public MainWindow()
{
Customers = GetCustomers();
InitializeComponent();
}
private List<Customer> GetCustomers()
{
return new List<Customer>()
{
new Customer()
{
FirstName = "James",
LastName = "aka",
Age = 22,
Addresses = new List<Address>()
{
new Address()
{
StreetName = "abdf st",
StreetNumber = 123,
State = "OH"
},
new Address()
{
StreetName = "skdjf abdf st",
StreetNumber = 12233,
State = "OH"
}
}
}
};
}
public List<Customer> Customers { get; set; }
}
public class Customer
{
public string FirstName { get; set; }
public string LastName { get; set; }
public int Age { get; set; }
public List<Address> Addresses { get; set; }
}
public class Address
{
public int StreetNumber { get; set; }
public string StreetName { get; set; }
public string State { get; set; }
}
