Search code examples
c#wpfdatagrid

WPF DataGrid Header Text Background Fill


I can't get the Header background filled in DataGrid, as below on screenshot. I've tried stretching the Header and Summary text to fill the the Header space etc. There is a white background above the Summary world (this goes for every Header in the grid). How do I get rid of the white space?

enter image description here

                    <DataGrid x:Name="DisplayGrid" Grid.Row="2" IsReadOnly="False" SelectionMode="Single"  SelectionUnit="Cell" CanUserAddRows="False" CanUserDeleteRows="False" CanUserSortColumns="False" ScrollViewer.VerticalScrollBarVisibility="Visible"
                      AutoGenerateColumns="False" HorizontalAlignment="Stretch" VerticalAlignment="Top" >

                    <DataGrid.ColumnHeaderStyle>
                        <Style TargetType="DataGridColumnHeader">
                            <Setter Property="HorizontalContentAlignment" Value="Center" />
                            <Setter Property="VerticalContentAlignment" Value="Stretch" />
                            <Setter Property="TextBlock.FontWeight" Value="Bold" />
                            <Setter Property="ContentTemplate">
                                <Setter.Value>
                                    <DataTemplate>
                                        <TextBlock TextWrapping="Wrap" Text="{Binding Mode=OneWay}" ></TextBlock>
                                    </DataTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </DataGrid.ColumnHeaderStyle>

and the Summary column:

                            <DataGridTemplateColumn x:Name="SummaryTextBox" Header="Summary" IsReadOnly="True" MinWidth="100" Width="*" MaxWidth="450">
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock 
                                        Text="{Binding Summary}" 
                                        TextWrapping="Wrap"
                                        TextAlignment="Justify"
                                        VerticalAlignment="Stretch"
                                        />
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

Edit 1: Adding Background removes the Grid lines from the header. It doesn't look good after that (using different background colors as well).

<Setter Property="Background" Value="Gray"></Setter>

enter image description here


Solution

  •         <DataGrid.ColumnHeaderStyle>
                <Style TargetType="DataGridColumnHeader">
                    <Setter Property="HorizontalContentAlignment" Value="Center" />
                    <Setter Property="VerticalContentAlignment" Value="Stretch" />
                    <Setter Property="TextBlock.FontWeight" Value="Bold" />
                    <Setter Property="Background" Value="Gray"></Setter>
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <TextBlock TextWrapping="Wrap" Text="{Binding Mode=OneWay}" ></TextBlock>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </DataGrid.ColumnHeaderStyle>