WPF Datagrid Superheader

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?

1 Answer

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.