We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to apply Alternate Row Color in SfDataGrid?

Platform: Xamarin.Forms |
Control: SfDataGrid

SfDataGrid allows you to set alternate row color by setting the SfDataGrid.GridStyle.AlternatingRowColor property. The default value of this property is Color.Default and hence applies the record background color for all rows in that case. If a value is set for this property then the grid appears with the specified alternate row color.

Refer the following code example which illustrates how to set AlternatingRowColor in SfDatGrid.


SfDataGrid allows you to customize the rows for which the alternate row color needs to be updated based on the property SfDataGrid.AlternationCount.


SfDataGrid also allows you to customize the AlternatingRowColor when changing the themes in runtime. This can be achieved by writing a custom style class for the SfDataGrid overriding from DataGridStyle class and returning the color need to be applied for alternate rows in the GetAlternatingRowBackgroundColor() override.


Refer the below code example to know how to apply the custom style to SfDataGrid.


The following screenshot shows the final outcome upon execution of the above code

The working sample for this KB is available in the following location



2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
You must log in to leave a comment
Szántai László
May 04, 2020

Hi, How to do this in XAML ?

Best Regards, SzL

Pradeep Kumar Balakrishnan [Syncfusion]
May 04, 2020

Hi Szántai László,

XAML code snippet to achieve this requirement.

<sfgrid:sfdatagrid x:name="dataGrid" autogeneratecolumns="False" selectionmode="Single" columnsizer="Star" itemssource="{Binding OrdersInfo}">     
        <sfgrid:datagridstyle alternatingrowcolor="Fuschia">

Please refer this UG to know more about DataGrid styling.

UG link


Pradeep Kumar B

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile