0

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

burnsi
  • 6,194
  • 13
  • 17
  • 27
patrick
  • 1
  • 1
  • https://stackoverflow.com/questions/9313586/binding-datagrid-column-width – Andy Feb 07 '23 at 18:42
  • I've actually looked at that page. x:Reference gives me an System.Windows.Markup.XamlParseException due to Unresolved Reference. I even tried the binding proxy on there with no luck – patrick Feb 11 '23 at 15:11

0 Answers0