WPF Datagrid Superheader

Question

I am using basic WPF datagrid. I need to add superheader. Each superheader has a span of two columns. Also, this has to be dynamically created because the number of columns is determined based upon the data in the database. I have got it to look like this: SuperHeader. The problem is, if I resize the columns, the superheader is not moving as expected. Below is the code: MainWindow.xaml:

 <TabItem Header="Tab4">
                <StackPanel>
                    <Grid Name="grdSuperHeader"/>
                    <DataGrid Name="grdSample" ScrollViewer.HorizontalScrollBarVisibility="Disabled" AutoGenerateColumns="False">
                    <DataGrid.Columns>
                            <DataGridTextColumn x:Name="SampleColumn1" Header="Column 1"></DataGridTextColumn>
                            <DataGridTextColumn x:Name="SampleColumn2" Header="Column 2"></DataGridTextColumn>
                            <DataGridTextColumn x:Name="SampleColumn3" Header="Column 3" ></DataGridTextColumn>
                            <DataGridTextColumn x:Name="SampleColumn4" Header="Column 4"></DataGridTextColumn>
                            <DataGridTextColumn x:Name="SampleColumn5" Header="Column 5"></DataGridTextColumn>
                            <DataGridTextColumn x:Name="SampleColumn6" Header="Column 6"></DataGridTextColumn>
                        </DataGrid.Columns>
                    <TextBlock></TextBlock>
                    <TextBlock></TextBlock>
                    <TextBlock></TextBlock>
                    <TextBlock></TextBlock>
                    <TextBlock></TextBlock>
                </DataGrid>
                <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                        <TextBlock Width="{Binding ElementName=SampleColumn1,Path=ActualWidth}" Text="Footer1" Margin="5,0,0,0"></TextBlock>
                        <TextBlock Width="{Binding ElementName=SampleColumn2,Path=ActualWidth}" Text="Footer2" Margin="5,0,0,0"></TextBlock>
                        <TextBlock Width="{Binding ElementName=SampleColumn3,Path=ActualWidth}" Text="Footer3" Margin="5,0,0,0"></TextBlock>
                        <TextBlock Width="{Binding ElementName=SampleColumn4,Path=ActualWidth}" Text="Footer4" Margin="5,0,0,0"></TextBlock>
                        <TextBlock Width="{Binding ElementName=SampleColumn5,Path=ActualWidth}" Text="Footer5" Margin="5,0,0,0"></TextBlock>
                        <TextBlock Width="{Binding ElementName=SampleColumn6,Path=ActualWidth}" Text="Footer6" Margin="5,0,0,0"></TextBlock>
                    </StackPanel>
                </StackPanel>
            </TabItem>

Mainwindow.xaml.cs:

private void addSuperHeader()
{
    //Create the columns
    for (int i= 0;i< grdSample.Columns.Count;i++)
    {
        ColumnDefinition col = new ColumnDefinition();
        grdSuperHeader.ColumnDefinitions.Add(col);

        var binding = new Binding("ActualWidth")
        {
            ElementName = "SampleColumn" + i.ToString()
        };

        col.SetBinding(ColumnDefinition.WidthProperty, binding);

        if(i%2==0)
        {


            //Add header text
            TextBlock txtHeader = new TextBlock();
            txtHeader.Text = "Cols["+(i+1).ToString()+"-"+(i+2).ToString()+"]";
            txtHeader.Foreground = new SolidColorBrush(Colors.Green);
            txtHeader.HorizontalAlignment = HorizontalAlignment.Center;
            Grid.SetRow(txtHeader, 0);
            Grid.SetColumn(txtHeader, i);
            Grid.SetColumnSpan(txtHeader, 2);

            grdSuperHeader.Children.Add(txtHeader);
        }

    }

}

What am I doing wrong?

Answer 1

I think thats a problem with the GridSplitters and Binding of ActualWidth to Width. But you can use the following workaround for your Binding.

    ColumnDefinition col = new ColumnDefinition {Width = GridLength.Auto};
    grdSuperHeader.ColumnDefinitions.Add(col);

    var binding = new Binding("ActualWidth")
    {
        ElementName = "SampleColumn" + i.ToString()
    };

    col.SetBinding(ColumnDefinition.MaxWidthProperty, binding);
    col.SetBinding(ColumnDefinition.MinWidthProperty, binding);

Bind the ActalWidth to MinWidth and MaxWidth and set ColumnDefinition Width="Auto". This worked in my example.