How to customize the header text of a grid column with different colors?

SfDataGrid allows you customize the header text of a grid column with different colors using the SfDataGrid.HeaderTemplate. You can load two labels inside a StackLayout with horizontal orientation and customize the text color of the Labels to achieve the requirement.

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

<sfGrid:SfDataGrid x:Name ="dataGrid"
                         ColumnSizer="Star"
                         AutoGenerateColumns="False"
                         ItemsSource="{Binding OrdersInfo}">
 <sfGrid:SfDataGrid.Columns>
     <sfGrid:GridTextColumn MappingName="OrderID">
       <sfGrid:GridTextColumn.HeaderTemplate>
           <DataTemplate>
             <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
                <Label Text="Order" TextColor="Purple" />
                <Label Text="ID" TextColor="Blue" />
             </StackLayout>
           </DataTemplate>
     </sfGrid:GridTextColumn.HeaderTemplate>
    </sfGrid:GridTextColumn>
   <sfGrid:GridTextColumn MappingName="CustomerID"/>
    <sfGrid:GridTextColumn MappingName="Freight"/>
    <sfGrid:GridTextColumn MappingName="Country"/>
  </sfGrid:SfDataGrid.Columns>
</sfGrid:SfDataGrid>

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

$C:\Users\pavithra.sivakumar\AppData\Local\Microsoft\Windows\INetCacheContent.Word\Screenshot_2017-02-28-16-52-58.png$

Sample Link:

How to customize the header text with different colors?

Did you find this information helpful?

Yes

Comments (0)

How to customize the header text of a grid column with different colors?

Access denied