How to customize the headers of a RadGridView?

Question

I am creating a WPF project using Telerik controls. I need to create a GridView to display some data, only the column headings should be different colors. I have this but does not work:

<telerik:RadGridView x:Name="dtgResum" VerticalAlignment="Stretch" AutoGenerateColumns="False" HorizontalAlignment="Stretch" FontSize="18" Margin="10,10,10,10" 
                      RowIndicatorVisibility="Collapsed" 
                      IsReadOnly="True" 
                      ShowGroupPanel="False"      
                      CanUserFreezeColumns="False" 
                      CanUserReorderColumns="False" 
                      CanUserResizeColumns="False" 
                      CanUserSortColumns="False" 
                      IsFilteringAllowed="True" 
                      ColumnWidth="*" 
                      AlternationCount="2" 
                      AlternateRowBackground="#EFEFEF">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn x:Name="colEstatus" Header="ESTATUS" Background="#538DD5"/>
                <telerik:GridViewDataColumn x:Name="colId" Header="ID" Background="#D9D9D9"/>
                <telerik:GridViewDataColumn x:Name="colMza" Header="MZA" Background="#D9D9D9"/>
                <telerik:GridViewDataColumn x:Name="colLot" Header="LOT" Background="#D9D9D9"/>
                <telerik:GridViewDataColumn x:Name="colNo" Header="No" Background="#D9D9D9"/>
                <telerik:GridViewDataColumn x:Name="colInt" Header="INT" Background="#D9D9D9"/>
                <telerik:GridViewDataColumn x:Name="colEdif" Header="EDIF" Background="#D9D9D9"/>
                <telerik:GridViewDataColumn x:Name="col1" Header="SOME LONG HEADER" Background="#538DD5"/>
                <telerik:GridViewDataColumn x:Name="col2" Header="OTHER LONG HEADER" Background="#538DD5"/>
                <telerik:GridViewDataColumn x:Name="col3" Header="THIS IS A LONG HEADER OF THE COLUMN" Background="#D86B0A"/>
                <telerik:GridViewDataColumn x:Name="col4" Header="THIS IS A LONG HEADER OF THE COLUMN" Background="#D86B0A"/>
                <telerik:GridViewDataColumn x:Name="col5" Header="THIS IS A LONG HEADER OF THE COLUMN" Background="#D86B0A"/>
                <telerik:GridViewDataColumn x:Name="col6" Header="THIS IS A LONG HEADER OF THE COLUMN" Background="#D86B0A"/>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

The designer gives me this result and rather ugly:

And I need the headers have different colors and can show a lot of text, as in the following image::

Thank you very much in advance!

Answer 1

There is a property HeaderCellStyle that can be used to set the style of the Header cell for each column. You can find your theme's XAML within the install folder. For a minor tweak, like background and font size, you could just use a 'based on' style and change those properties, rather than editing the Template.

Ex:

<telerik:GridViewDataColumn x:Name="colEstatus" Header="ESTATUS">
    <telerik:GridViewDataColumn.HeaderCellStyle>
        <Style TargetType="telerik:GridViewHeaderCell" BasedOn="{StaticResource {x:Type telerik:GridViewHeaderCell}}">
            <Setter Property="Background" Value="#538DD5" />
        </Style>
    </telerik:GridViewDataColumn.HeaderCellStyle>
</telerik:GridViewDataColumn>