How to change column header's background color when using WPF datagrid

Question

How to change column header's background color when using WPF datagrid? Need to modify xaml directly?

Solution 1

Use a style with a setter targeted at DataGridColumnHeader:

<DataGrid>
    <DataGrid.Resources>
        <Style BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="Background" Value="Blue" />
        </Style>
    </DataGrid.Resources>
</DataGrid>

Solution 2

Try this:

  <windows.Resources>
      <LinearGradientBrush x:Key="HeaderBrush" StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="#FF6B8E95" Offset="0"/>
                <GradientStop Color="#FF14A7C1" Offset="1"/>
                <GradientStop Color="#FF1E424E" Offset="0.509"/>
                <GradientStop Color="#FF1D4855" Offset="0.542"/>
                <GradientStop Color="#FF1D4855" Offset="0.542"/>
                <GradientStop Color="#FF193A44" Offset="0.526"/>
            </LinearGradientBrush>

            <LinearGradientBrush x:Key="HeaderBorderBrush" StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Color="#FF1D1D1D" Offset="0.614"/>
                <GradientStop Color="#FF007F96" Offset="0.853"/>
                <GradientStop Color="#FF0AEAFA" Offset="1"/>
            </LinearGradientBrush>

            <Style x:Key="HeaderStyle" TargetType="DataGridColumnHeader">
                <Setter Property="Background" Value="{StaticResource HeaderBrush}" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="SnapsToDevicePixels" Value="True" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="MinWidth" Value="0" />
                <Setter Property="MinHeight" Value="30" />
                <Setter Property="Cursor" Value="Hand" />
            </Style>
    </Windows.Resources>

<Grid>
<DataGrid Name="dataGrid1" ColumnHeaderStyle="{StaticResource HeaderStyle}"/>
</Grid>

This is the result:

Solution 3

<DataGridTextColumn Header="ID">
    <DataGridTextColumn.HeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="Background" Value="Green"/>
        </Style>
    </DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>

Solution 4

Style style = new Style(typeof(System.Windows.Controls.Primitives
    .DataGridColumnHeader));
style.Setters.Add(new Setter(ToolTipService.ToolTipProperty
    ,"Your tool tip here"));
style.Setters.Add(new Setter { Property = BackgroundProperty, Value 
    = Brushes.Yellow });


dgExcelSheet.Columns[1].HeaderStyle = style;

Solution 5

I found out that for me, it is not possible to change only background color without loosing other styles (paddig/borders/...)

So i wrote some style which is simillar to original in: aero2.normalcolor.xaml

Style contains mouseover, press and sort effect

Here is result

You can also create your own colors

    <!--DATAGRID-->
    <LinearGradientBrush x:Key="ThemeDGHeader_Background" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="White" Offset="0.42"/>
        <GradientStop Color="#FFEAEAEA" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ThemeDGHeader_Border" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFF7F8FA" Offset="0"/>
        <GradientStop Color="#FFD5D5D5" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ThemeDGHeader_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFDAF4FF" Offset="0.42"/>
        <GradientStop Color="#FFACE2F9" Offset="0.6"/>
        <GradientStop Color="#FFA1DCF5" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ThemeDGHeader_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFBCE4F9" Offset="0.42"/>
        <GradientStop Color="#FF8CD5F7" Offset="0.6"/>
        <GradientStop Color="#FF77C6EE" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="ThemeDGHeader_Sorted" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE7F8FF" Offset="0.42"/>
        <GradientStop Color="#FFDEF5FF" Offset="0.6"/>
        <GradientStop Color="#FFBCE8FB" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ThemeDGHeader_MouseOverBorder" Color="#FF76C8F0"/>
    <SolidColorBrush x:Key="ThemeDGHeader_PressedBorder" Color="#FF7EC2E2"/>
    <SolidColorBrush x:Key="ThemeDGHeader_SortedBorder" Color="#FF9DD8F5"/>
    <SolidColorBrush x:Key="ThemeDG_Border" Color="#FF688CAF"/>
    <!--DATAGRID HEADER-->
    <Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
        <Setter Property="Width" Value="8"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Cursor" Value="SizeWE"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type DataGridColumnHeader}" x:Key="DCHS">
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                    <Grid>
                        <Border x:Name="BR" 
                                BorderThickness="1,0,1,1"  
                                Padding="0,0,2,0"
                                BorderBrush="{StaticResource ThemeDGHeader_Border}"
                                Background="{StaticResource ThemeDGHeader_Background}">
                            <Border x:Name="BRIN" 
                                    CornerRadius="1"
                                    Padding="4,4,4,2"
                                    BorderThickness="0,0,0,0"
                                    BorderBrush="{StaticResource ThemeDGHeader_PressedBorder}"
                                    >
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                />
                            </Border>

                        </Border>
                        <Path x:Name="SortArrow"
                                        HorizontalAlignment="Center" VerticalAlignment="Top"                                           
                                        Width="7" Height="4" Margin="0,1,0,0"
                                        Stretch="Fill"
                                        RenderTransformOrigin="0.5,0.5"
                                        Visibility="Visible"
                                        Data="M0,0 L1,0 0.5,1 z" >
                            <Path.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0,0">
                                    <GradientStop Color="#FF9DC3D8" Offset="1"/>
                                    <GradientStop Color="#FF7AA8C4" Offset="0.403"/>
                                    <GradientStop Color="#FF4B7085" Offset="0.017"/>
                                </LinearGradientBrush>
                            </Path.Fill>
                        </Path>
                        <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                        <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="SortDirection" Value="{x:Null}">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="SortDirection" Value="Ascending">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="SortArrow" Property="RenderTransform">
                                <Setter.Value>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="-1"/>
                                    </TransformGroup>
                                </Setter.Value>
                            </Setter>
                            <Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Sorted}"/>
                            <Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_SortedBorder}"/>
                        </Trigger>
                        <Trigger Property="SortDirection" Value="Descending">
                            <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Sorted}"/>
                            <Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_SortedBorder}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_MouseOver}"/>
                            <Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_MouseOverBorder}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="BR" Property="Border.Padding" Value="0,0,0,0"/>
                            <Setter TargetName="BRIN" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Pressed}" />
                            <Setter TargetName="BRIN" Property="Border.BorderThickness" Value="1,1,1,0"/>
                            <Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDG_Border}"/>
                            <Setter TargetName="BR" Property="Border.BorderThickness" Value="1,0,1,0"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Using:

<DataGrid ColumnHeaderStyle="{StaticResource DCHS}"/>

View more solutions