How to set the different color for each column header in SfDataGrid?

1 min read

SfDataGrid allows you to customize the header text of each column header with different colors by using the SfDataGrid.HeaderTemplate.

The below code example illustrates how to customize the header text of a grid column with different colors using GridColumn.HeaderTemplate.

<ContentPage.Content>
<sfGrid:SfDataGrid x:Name ="dataGrid"
                         ColumnSizer="Auto"
                         AutoGenerateColumns="False"
                         ItemsSource="{Binding OrdersInfo}">
 
       <sfGrid:SfDataGrid.Columns>
          <sfGrid:GridTextColumn  MappingName="OrderID">
               <sfGrid:GridTextColumn.HeaderTemplate>
                    <DataTemplate>
                        <Label Text="OrderID" TextColor="Blue" HorizontalOptions="Center" VerticalOptions="Center"/>
                   </DataTemplate>
               </sfGrid:GridTextColumn.HeaderTemplate>
           </sfGrid:GridTextColumn>
           <sfGrid:GridTextColumn  MappingName="CustomerID">
                 <sfGrid:GridTextColumn.HeaderTemplate>
                      <DataTemplate>
                           <Label Text="CustomerID" TextColor="Pink" HorizontalOptions="Center" VerticalOptions="Center"/>
                        </DataTemplate>
                </sfGrid:GridTextColumn.HeaderTemplate>
            </sfGrid:GridTextColumn>
            <sfGrid:GridTextColumn  MappingName="Freight">
                 <sfGrid:GridTextColumn.HeaderTemplate>
                       <DataTemplate>
                            <Label Text="Freight" TextColor="Green" HorizontalOptions="Center" VerticalOptions="Center"/>
                        </DataTemplate>
                  </sfGrid:GridTextColumn.HeaderTemplate>
            </sfGrid:GridTextColumn>
            <sfGrid:GridTextColumn  MappingName="Country">
                  <sfGrid:GridTextColumn.HeaderTemplate>
                        <DataTemplate>
                             <Label Text="Country" TextColor="Red" HorizontalOptions="Center" VerticalOptions="Center"/>
                        </DataTemplate>
                  </sfGrid:GridTextColumn.HeaderTemplate>
            </sfGrid:GridTextColumn>
     </sfGrid:SfDataGrid.Columns>
</sfGrid:SfDataGrid>
    </ContentPage.Content>

On executing the above code example, the below output is obtained.

$C:\Users\pavithra.sivakumar\AppData\Local\Microsoft\Windows\INetCacheContent.Word\Screenshot_2017-03-01-13-47-10.png$