WPF dataGrid super Header for multiple columns
I want to do Header for multiple columns in WPF DataGrid. I tried with Header template but it will display Header for one column.
Below XAML I have tried:
<DataGrid>
<DataGrid.Columns>
<DataGridTextColumn>
<DataGridTextColumn.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock>Column 1</TextBlock>
<TextBlock>xyz</TextBlock>
</StackPanel>
</DataTemplate>
</DataGridTextColumn.HeaderTemplate>
</DataGridTextColumn>
<DataGridTextColumn Header="Header" />
</DataGrid.Columns>
</DataGrid>
I am also attaching the My expected result screen shoot:
<Grid Width="Auto">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<toolkit:DataGrid x:Name="problemsList"
MinHeight="205"
MaxHeight="205"
Margin="3"
VerticalAlignment="Top"
AutoGenerateColumns="False"
CanUserAddRows="False"
CanUserDeleteRows="False"
CanUserReorderColumns="False"
CanUserResizeColumns="True"
CanUserResizeRows="False"
ColumnHeaderStyle="{StaticResource GridColumnHeaderStyle}"
HorizontalScrollBarVisibility="Visible"
ItemsSource="{Binding FisapCorrections}"
MouseLeftButtonUp="problemsList_MouseLeftButtonUp"
SelectionMode="Single"
Sorting="problemsList_Sorting"
VerticalScrollBarVisibility="Auto">
<toolkit:DataGrid.Columns>
<toolkit:DataGridTemplateColumn MinWidth="50"
CellTemplate="{StaticResource RowSelected}"
Header="Select" />
<toolkit:DataGridTextColumn MinWidth="88"
Binding="{Binding StudentName}"
Header="Student Name"
IsReadOnly="True" />
<toolkit:DataGridTextColumn x:Name="dgtcSSN"
MinWidth="50"
Binding="{Binding SSN}"
Header="SSN"
IsReadOnly="True" />
<toolkit:DataGridTextColumn x:Name="dgtcStuNum"
MinWidth="50"
Binding="{Binding StuNum}"
Header="StuNum"
IsReadOnly="True" />
<toolkit:DataGridTextColumn MinWidth="80"
Binding="{Binding Campus}"
Header="Campus"
IsReadOnly="True" />
<toolkit:DataGridTextColumn Width="50"
MinWidth="50"
Binding="{Binding BadModel,
Converter={StaticResource ToEmptyStringConverter}}"
Header="BadModel"
HeaderTemplate="{StaticResource DepModelHeaderTemplate}"
IsReadOnly="True" />
<toolkit:DataGridTextColumn Width="72"
MinWidth="72"
Binding="{Binding BadPellEnrollStatus,
Converter={StaticResource ToEmptyStringConverter}}"
CanUserReorder="False"
Header="BadPellEnrollStatus"
HeaderTemplate="{StaticResource EnrollStatusHeaderTemplate}"
IsReadOnly="True" />
<toolkit:DataGridTextColumn Width="75"
MinWidth="75"
Binding="{Binding DupePell,
Converter={StaticResource ToEmptyStringConverter}}"
Header="DupePell"
HeaderTemplate="{StaticResource DupStudentPellHeaderTemplate}"
IsReadOnly="True" />
<toolkit:DataGridTextColumn Width="80"
MinWidth="80"
Binding="{Binding BadTransactionId,
Converter={StaticResource ToEmptyStringConverter}}"
Header="BadTransactionId"
HeaderTemplate="{StaticResource InvTransactionIDHeaderTemplate}"
IsReadOnly="True" />
<toolkit:DataGridTextColumn Width="40"
MinWidth="40"
Binding="{Binding HasNoISIR,
Converter={StaticResource ToEmptyStringConverter}}"
Header="HasNoISIR"
HeaderTemplate="{StaticResource NoISIRHeaderTemplate}"
IsReadOnly="True" />
<toolkit:DataGridTextColumn Width="75"
MinWidth="75"
Binding="{Binding GradWithSEOG,
Converter={StaticResource ToEmptyStringConverter}}"
Header="GradWithSEOG"
HeaderTemplate="{StaticResource NotEligxSEOGHeaderTemplate}"
IsReadOnly="True" />
<toolkit:DataGridTextColumn Width="100"
MinWidth="100"
Binding="{Binding GradIsDependent,
Converter={StaticResource ToEmptyStringConverter}}"
Header="GradIsDependent"
HeaderTemplate="{StaticResource GradWithDepModelHeaderTemplate}"
IsReadOnly="True" />
<toolkit:DataGridTextColumn Width="60"
MinWidth="60"
Binding="{Binding NoClasses,
Converter={StaticResource ToEmptyStringConverter}}"
Header="NoClasses"
HeaderTemplate="{StaticResource NoClassesHeaderTemplate}"
IsReadOnly="True" />
<toolkit:DataGridTextColumn Width="65"
MinWidth="65"
Binding="{Binding Ineligible}"
Header="Ineligible"
HeaderTemplate="{StaticResource SchoolStatusHeaderTemplate}"
IsReadOnly="True" />
<toolkit:DataGridTemplateColumn IsReadOnly="True">
<toolkit:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="Main Header Text" Grid.columnSpan="3" Grid.Row="0" Grid.Column="0"/>
<TextBlock Text="Text 1" grid.Column="0" grid.Row="1"/>
<TextBlock Text="Text 2" grid.Column="1" grid.Row="1"/>
<TextBlock Text="Text 3" grid.Column="2" grid.Row="1"/>
</DataTemplate>
</toolkit:DataGridTemplateColumn.CellTemplate>
<toolkit:DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<TextBlock Text="Missing from FISAP Summary Part II Section F"
TextWrapping="Wrap"
Width="200"/>
</DataTemplate>
</toolkit:DataGridTemplateColumn.HeaderTemplate>
</toolkit:DataGridTemplateColumn>
</toolkit:DataGrid.Columns>
</toolkit:DataGrid>
<CmcControls:WaitingControl x:Name="waitingControlOnGrid"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
I want to add the Expected result in the Last of the Grid
Answer
Try This;->
You Just need to use 2 Rows and 3 Columns if you want the way your ScreenShot depicts. In First Row define your TextBlock with Grid.ColumnsSpan="3" which will take space for 3 Columns and In Second Row define each TextBlock in each Different Column:
<DataGrid ItemsSource="{Binding FisapCorrections,RelativeSource={RelativeSource AncestorType=Window},UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}">
<DataGrid.Columns>
<DataGridTemplateColumn Width="200">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition Height="150"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Main Header Text" Height="100" Grid.ColumnSpan="3" Grid.Row="0" Grid.Column="0"/>
<TextBlock Text="Text 1" Height="100" Grid.Column="0" Grid.Row="1"/>
<TextBlock Text="Text 2" Grid.Column="1" Grid.Row="1"/>
<TextBlock Text="Text 3" Grid.Column="2" Grid.Row="1"/>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>