I am trying to make a DataGrid with a nested DataGrid similar to the following where I have a column that is shared among some rows (Column C should look like merged cells). I can display the data correctly, however I dont know how to add the headers for Column A/B. I have searched all over and the I tried using a grid with the column names as a header, but I cant get the size of the column headers to match the size of the columns. I have read that the datagrid columns are not in the visual tree so I assume that is why I cannot get their width to bind to. Any help would be appreciated, I am open to any options and I really appreciate the help
Column A | Column B | Column C |
---|---|---|
Cell 1 | Cell 2 | Shared |
Cell 3 | Cell 4 | Data 1 |
-------- | -------- | -------- |
Cell 1 | Cell 2 | Shared |
Cell 3 | Cell 4 | Data 2 |
Here is my simplified classes
public class TradeGroup : ViewModelBase
{
private string colC;
private ObservableCollection<TradeItem> tradeList = new ObservableCollection<TradeItem>();
public string ColC
{
get { return colC; }
set
{
colC= value;
NotifyPropertyChanged("ColC");
}
}
public ObservableCollection<TradeItem> TradeList
{
get { return tradeList; }
set
{
tradeList = value;
NotifyPropertyChanged("TradeList");
}
}
}
public class TradeItem
{
private string colA;
private string colB;
public string ColA
{
get { return colA; }
set
{
colA= value;
NotifyPropertyChanged("ColA");
}
}
public string ColB
{
get { return colB; }
set
{
colB= value;
NotifyPropertyChanged("ColB");
}
}
}
Here is my UserControl to display all of the data
<UserControl x:Class="Test.TradeControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:Icon="http://metro.mahapps.com/winfx/xaml/iconpacks"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Background="Transparent">
<UserControl.Resources>
</UserControl.Resources>
<DataGrid ItemsSource="{Binding Trades}"
RowDetailsVisibilityMode="Collapsed"
RowStyle="{DynamicResource DataGridRowStyle1}"
ColumnHeaderStyle="{DynamicResource DataGridColumnHeaderStyle1}"
CellStyle="{DynamicResource DataGridCellStyle1}"
Style="{DynamicResource DataGridStyle1}"
ScrollViewer.CanContentScroll="True">
<DataGrid.Columns>
<DataGridTemplateColumn IsReadOnly="True" Width="Auto">
<DataGridTemplateColumn.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ActualWidth, ElementName=ButtonColumn}"/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="Column A" Grid.Column="0"/>
<TextBlock Text="Column B" Grid.Column="1"/>
</Grid>
</DataGridTemplateColumn.Header>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<DataGrid ItemsSource="{Binding TradeList}"
RowStyle="{DynamicResource innerDataGridRowStyle}"
CellStyle="{DynamicResource DataGridCellStyle1}"
Style="{DynamicResource innerDataGridStyle}"
ScrollViewer.CanContentScroll="True"
Margin="5 0">
<DataGrid.Columns>
<DataGridTextColumn Header="Column A" Binding="{Binding ColA}" IsReadOnly="True" Width="Auto"/>
<DataGridTextColumn Header="Column B" Binding="{Binding ColB}" IsReadOnly="True" Width="Auto"/>
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Column C" Binding="{Binding ColC}" IsReadOnly="True" Width="Auto"/>
</DataGrid.Columns>
</DataGrid>
</UserControl>
I have tried binding by naming the datagrid columns and using ElementName, as well as x:Reference but neither find the width for me to bind to