Styles in Xamarin DataGrid (SfDataGrid)
9 Aug 202324 minutes to read
The data grid applies style for all of its elements by setting desired values to the style properties in SfDataGrid.GridStyle or writing a Style class overriding from DataGridStyle, and assigning it to the SfDataGrid.GridStyle property.
To apply style in xaml, follow the code example:
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrdersInfo}" >
<syncfusion:SfDataGrid.GridStyle>
<syncfusion:DefaultStyle HeaderBackgroundColor="{Binding BackgroundColor}" HeaderForegroundColor="White"
RowBackgroundColor="Black" RowForegroundColor="White"
SelectionBackgroundColor="LightSkyBlue" SelectionForegroundColor="White"
CaptionSummaryRowBackgroundColor="Black" CaptionSummaryRowForegroundColor="White"
GridCellBorderColor="{Binding BorderColor}" LoadMoreViewBackgroundColor="Gray"
LoadMoreViewForegroundColor="Black" AlternatingRowColor="Yellow"/>
</syncfusion:SfDataGrid.GridStyle>
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public Mainpage()
{
InitializeComponent();
this.dataGrid.GridStyle.HeaderBackgroundColor = Color.FromRgb(15, 15, 15);
this.dataGrid.GridStyle.HeaderForegroundColor = Color.FromRgb(255, 255, 255);
this.dataGrid.GridStyle.RowBackgroundColor = Color.FromRgb(43, 43, 43);
this.dataGrid.GridStyle.RowForegroundColor = Color.FromRgb(255, 255, 255);
this.dataGrid.GridStyle.SelectionBackgroundColor = Color.FromRgb(42, 159, 214);
this.dataGrid.GridStyle.SelectionForegroundColor = Color.FromRgb(255, 255, 255);
this.dataGrid.GridStyle.CaptionSummaryRowBackgroundColor = Color.FromRgb(02, 02, 02);
this.dataGrid.GridStyle.CaptionSummaryRowForegroundColor = Color.FromRgb(255, 255, 255);
this.dataGrid.GridStyle.GridCellBorderColor = Color.FromRgb(81, 83, 82);
this.dataGrid.GridStyle.LoadMoreViewBackgroundColor = Color.FromRgb(242, 242, 242);
this.dataGrid.GridStyle.LoadMoreViewForegroundColor = Color.FromRgb(34, 31, 31);
this.dataGrid.GridStyle.AlternatingRowColor = Color.Yellow;
}
}To apply custom style, follow the code example:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:syncfusion="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms"
xmlns:local ="clr-namespace:DataGridSample;assembly=DataGridSample"
x:Class="DataGridSample.Sample">
<ContentPage.Resources>
<ResourceDictionary>
<local:Dark x:Key="dark" />
</ResourceDictionary>
</ContentPage.Resources>
<syncfusion:SfDataGrid x:Name="dataGrid"
GridStyle="{StaticResource dark}"
ItemsSource="{Binding OrdersInfo}" />
</ContentPage> //Apply custom style to SfDataGrid from code
SfDataGrid dataGrid = new SfDataGrid();
dataGrid.GridStyle = new Dark ();//Custom style class
public class Dark : DataGridStyle
{
public Dark ()
{
}
public override Color GetHeaderBackgroundColor()
{
return Color.FromRgb (15, 15, 15);
}
public override Color GetHeaderForegroundColor()
{
return Color.FromRgb (255, 255, 255);
}
public override Color GetRecordBackgroundColor ()
{
return Color.FromRgb (43, 43, 43);
}
public override Color GetRecordForegroundColor ()
{
return Color.FromRgb (255, 255, 255);
}
public override Color GetSelectionBackgroundColor ()
{
return Color.FromRgb (42, 159, 214);
}
public override Color GetSelectionForegroundColor ()
{
return Color.FromRgb (255, 255, 255);
}
public override Color GetCaptionSummaryRowBackgroundColor ()
{
return Color.FromRgb (02, 02, 02);
}
public override Color GetCaptionSummaryRowForeGroundColor ()
{
return Color.FromRgb (255, 255, 255);
}
public override Color GetBorderColor ()
{
return Color.FromRgb (81, 83, 82);
}
public override Color GetLoadMoreViewBackgroundColor ()
{
return Color.FromRgb(242, 242, 242);
}
public override Color GetLoadMoreViewForegroundColor ()
{
return Color.FromRgb(34, 31, 31);
}
public override Color GetAlternatingRowBackgroundColor()
{
return Color.Yellow;
}
}The following picture shows the grid loaded in a different style:
NOTE
Xamarin.Forms.Style which has specified target type, that will not be applied to the internal components used in the SfDataGrid.
Set datagrid style from application resources
You can write custom style for the properties in SfDataGrid.GridStyle class using application resource. To consume the custom style, set style target type as DataGrid, setter property as GridStyle and use custom style as static resource for the setter value. By consuming custom style like this will commonly change the GridStyle of all the DataGrid used in the application.
To apply custom style from application resources, follow the code example:
<Application.Resources>
<ResourceDictionary>
<!--Global Styles-->
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="BarTextColor" Value="White" />
</Style>
<syncfusion:DefaultStyle x:Key="customStyle"
CurrentCellBorderColor="Green"
CaptionSummaryRowForegroundColor="BlueViolet"
AlternatingRowColor="Yellow"
SelectionBackgroundColor="LightBlue"
SelectionForegroundColor="Black"
StackedHeaderBackgroundColor="Teal"
StackedHeaderForegroundColor="White"/>
<Style TargetType="syncfusion:SfDataGrid">
<Setter Property="GridStyle" Value="{StaticResource customStyle}"/>
</Style>
</ResourceDictionary>
</Application.Resources>Set datagrid style from page resources
You can write custom style for the properties in SfDataGrid.GridStyle class using page resource and consume the custom style as static resource to the GridStyle property for the required DataGrid used in that page.
To apply custom style from page resources, follow the code example:
<ContentPage.Resources>
<ResourceDictionary>
<syncfusion:DefaultStyle x:Key="customStyle"
CurrentCellBorderColor="Green"
CaptionSummaryRowForegroundColor="BlueViolet"
AlternatingRowColor="Yellow"
SelectionBackgroundColor="LightBlue"
SelectionForegroundColor="Black"
StackedHeaderBackgroundColor="Teal"
StackedHeaderForegroundColor="White"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<syncfusion:SfDataGrid x:Name="dataGrid1"
SelectionMode="Single"
AllowDraggingColumn="True"
AutoGenerateColumns="False"
ItemsSource="{Binding OrdersInfo}"
GridStyle="{StaticResource customStyle}"/>
</ContentPage.Content>Applying alternate row style
The SfDataGrid applies the alternative row style by setting desired color to the AlternatingRowColor property in DataGrid.GridStyle or by writing a Style class deriving from DataGridStyle, and assigning it to the SfDataGrid.GridStyle property.
To customize the alternate row style in xaml, follow the code example:
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrdersInfo}" >
<syncfusion:SfDataGrid.GridStyle>
<syncfusion:DefaultStyle AlternatingRowColor="{Binding RowColor}"/>
</syncfusion:SfDataGrid.GridStyle>
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public Mainpage()
{
InitializeComponent();
this.dataGrid.GridStyle.AlternatingRowColor = Color.Gray;
}
}To apply alternate row style, follow the code example:
//Apply alternative row style
dataGrid.GridStyle = new CustomStyle ();
// Custom style class
public class CustomGridStyle : DataGridStyle
{
public CustomGridStyle()
{
}
public override Color GetAlternatingRowBackgroundColor()
{
return Color.Gray;
}
}
Customizing the alternation count
The data grid customizes the alternate row count for applying the alternate row style using the SfDataGrid.AlternationCount property.
To set the alternate row count, follow the code example:
//Apply alternative row count
dataGrid.AlternationCount = 3;
Border customization
The data grid customizes the grid borders to vertical, horizontal, both, or none. Set desired value to GridLinesVisibility property in SfDataGrid.GridStyle or override the DataGridStyle.GetGridLinesVisibility method to customize borders in the data grid.
//Apply custom style to SfDataGrid from code
dataGrid.GridStyle = new CustomStyle ();//Custom Style class
public class CustomStyle : DataGridStyle
{
public CustomStyle ()
{
}
public override GridLinesVisibility GetGridLinesVisibility()
{
return base.GetGridLinesVisibility();
}
}Following are the list of options available to customize the grid borders:
- Both
- Horizontal
- Vertical
- None
Both
The GridLinesVisibility.Both displays the data grid with both horizontal and vertical borders.
To customize the grid lines visibility in xaml, follow the code example:
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrdersInfo}" >
<syncfusion:SfDataGrid.GridStyle>
<syncfusion:DefaultStyle GridLinesVisibility="Both"/>
</syncfusion:SfDataGrid.GridStyle>
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public Mainpage()
{
InitializeComponent();
this.dataGrid.GridStyle.GridLinesVisibility = Syncfusion.SfDataGrid.XForms.GridLinesVisibility.Both;
}
}To customize the grid lines visibility by writing a custom style, follow the code example:
public override GridLinesVisibility GetGridLinesVisibility()
{
return GridLinesVisibility.Both;
}The following screenshot shows the outcome upon execution of the above code:
Horizontal
The GridLinesVisibility.Horizontal allows displays the data grid with horizontal border only.
To customize the grid lines visibility in xaml, follow the code example:
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrdersInfo}" >
<syncfusion:SfDataGrid.GridStyle>
<syncfusion:DefaultStyle GridLinesVisibility="Horizontal"/>
</syncfusion:SfDataGrid.GridStyle>
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public Mainpage()
{
InitializeComponent();
this.dataGrid.GridStyle.GridLinesVisibility = Syncfusion.SfDataGrid.XForms.GridLinesVisibility.Horizontal;
}
}To customize the grid lines visibility by writing a custom style, follow the code example:
public override GridLinesVisibility GetGridLinesVisibility()
{
return GridLinesVisibility.Horizontal;
}The following screenshot shows the outcome upon execution of the above code:
Vertical
The GridLinesVisibility.Vertical displays the data grid with vertical border only.
To customize the grid lines visibility in xaml, follow the code example:
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrdersInfo}" >
<syncfusion:SfDataGrid.GridStyle>
<syncfusion:DefaultStyle GridLinesVisibility="Vertical"/>
</syncfusion:SfDataGrid.GridStyle>
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public Mainpage()
{
InitializeComponent();
this.dataGrid.GridStyle.GridLinesVisibility = Syncfusion.SfDataGrid.XForms.GridLinesVisibility.Vertical;
}
}To customize the grid lines visibility by writing a custom style, follow the code example:
public override GridLinesVisibility GetGridLinesVisibility()
{
return GridLinesVisibility.Vertical;
}The following screenshot shows the outcome upon execution of the above code:
None
GridLinesVisibility.None allows you to display the data grid without borders.
To customize the grid lines visibility in xaml, follow the code example:
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrdersInfo}" >
<syncfusion:SfDataGrid.GridStyle>
<syncfusion:DefaultStyle GridLinesVisibility="None"/>
</syncfusion:SfDataGrid.GridStyle>
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public Mainpage()
{
InitializeComponent();
this.dataGrid.GridStyle.GridLinesVisibility = Syncfusion.SfDataGrid.XForms.GridLinesVisibility.None;
}
}To customize the grid lines visibility by writing a custom style, follow the code example:
public override GridLinesVisibility GetGridLinesVisibility()
{
return GridLinesVisibility.None;
}The following screenshot shows the outcome upon execution of the above code:
Header border color customization
The data grid customizes the header border color for different DataGridStyle.GridLinesVisibility by setting desired color to the HeaderCellBorderColor property in SfDataGrid.GridStyle or by writing a custom style class deriving from DataGridStyle, and assigning it to the SfDataGrid.GridStyle property. Override the GetHeaderBorderColor method in the custom style to customize color of the column header and row header.
To customize the header border color in xaml, follow the code example:
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrdersInfo}" >
<syncfusion:SfDataGrid.GridStyle>
<syncfusion:DefaultStyle HeaderCellBorderColor="{Binding BorderColor}"/>
</syncfusion:SfDataGrid.GridStyle>
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public Mainpage()
{
InitializeComponent();
this.dataGrid.GridStyle.HeaderCellBorderColor = Color.Red;
}
}To customize the header border color by writing a custom style, follow the code example:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:syncfusion="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms"
xmlns:local ="clr-namespace:DataGridSample;assembly=DataGridSample"
x:Class="DataGridSample.Sample">
<ContentPage.Resources>
<ResourceDictionary>
<local:CustomStyle x:Key="customStyle" />
</ResourceDictionary>
</ContentPage. mResources>
<syncfusion:SfDataGrid x:Name="dataGrid"
GridStyle="{StaticResource customStyle}"
ItemsSource="{Binding OrdersInfo}" />
</ContentPage> //Applying custom style to SfDataGrid from code to customize header border color
SfDataGrid dataGrid = new SfDataGrid();
dataGrid.GridStyle = new customStyle ();//Custom style class
public class CustomStyle : DataGridStyle
{
Public CustomStyle()
{
}
Public override color GetHeaderBorderColor()
{
return Color.Red;
}
}The following screenshot shows the final outcome upon execution of the above code:
Summary row border customization
SfDataGrid allows you to show or hide the vertical border lines in summary rows when ShowSummaryInRow is false. Set desired value to SummaryVerticalLineVisibility property in SfDataGrid.GridStyle or override the DataGridStyle.GetSummaryVerticalLineVisibility method to customize summary row borders in SfDataGrid.
To customize the summary vertical line visibility in xaml, follow the code example:
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrdersInfo}" >
<syncfusion:SfDataGrid.GridStyle>
<syncfusion:DefaultStyle SummaryVerticalLineVisibility="True"/>
</syncfusion:SfDataGrid.GridStyle>
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public Mainpage()
{
InitializeComponent();
this.dataGrid.GridStyle.SummaryVerticalLineVisibility = true;
}
}To customize the summary vertical line visibility by writing a custom style, follow the code example:
//Apply custom style to SfDataGrid from code
dataGrid.GridStyle = new CustomStyle ();//Custom Style class
public class CustomStyle : DataGridStyle
{
public CustomStyle ()
{
}
public override bool GetSummaryVerticalLineVisibility()
{
return true;
}
}The following screenshot shows the final outcome upon execution of the above code:
Customizing sort icons in the header
Any desired image can be loaded as the sort indicator by setting the desired image source value to the SortDescendingIcon and SortAscendingIcon in SfDataGrid.GridStyle or by using the GetHeaderSortIndicatorDown and GetHeaderSortIndicatorUp overriding from the DataGridStyle class. To change the sort indicators, follow the code example:
To customize the sort icons in xaml, follow the code example:
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrdersInfo}" >
<syncfusion:SfDataGrid.GridStyle>
<syncfusion:DefaultStyle SortDescendingIcon="SfDataGrid_Sample.SortDown.png"
SortAscendingIcon="SfDataGrid_Sample.SortUp.png"/>
</syncfusion:SfDataGrid.GridStyle>
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public Mainpage()
{
InitializeComponent();
this.dataGrid.GridStyle.SortDescendingIcon = ImageSource.FromResource("SfDataGrid_Sample.SortDown.png");
this.dataGrid.GridStyle.SortAscendingIcon = ImageSource.FromResource("SfDataGrid_Sample.SortUp.png");
}
}To customize the sort icons by writing a custom style, follow the code example:
//Apply custom style to SfDataGrid from code
dataGrid.GridStyle = new Custom();
public class Custom : DataGridStyle
{
public override ImageSource GetHeaderSortIndicatorDown()
{
return ImageSource.FromResource("SfDataGrid_Sample.SortDown.png");
}
public override ImageSource GetHeaderSortIndicatorUp()
{
return ImageSource.FromResource("SfDataGrid_Sample.SortUp.png");
}
}The following screenshots shows the final outcome of the above code:
NOTE
The BuildAction image must be set to EmbeddedResource in order to access the image as resource as shown in above code.
Customizing resizing indicator
The color of the resizing indicator can be changed by setting desired color to the ResizingIndicatorLineColor property in SfDataGrid.GridStyle or by using the GetResizingIndicatorColor overriding from the DataGridStyle class. To change the color of the resizing indicator, follow the code example:
To customize the resizing indicator line color in xaml, follow the code example:
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrdersInfo}" >
<syncfusion:SfDataGrid.GridStyle>
<syncfusion:DefaultStyle ResizingIndicatorLineColor="Blue"/>
</syncfusion:SfDataGrid.GridStyle>
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public Mainpage()
{
InitializeComponent();
this.dataGrid.GridStyle.ResizingIndicatorLineColor = Color.Blue;
}
}To customize the resizing indicator line color by writing a custom style, follow the code example:
//Apply custom style to SfDataGrid from code
dataGrid.GridStyle = new Custom();
public class Custom : DataGridStyle
{
public override Color GetResizingIndicatorColor()
{
return Color.Blue;
}
}Border width customization
SfDataGrid allows you to customize the border width of the grid cells and the header cells.
The default border width of the grid cell and the header cell for Forms.iOS and Forms.UWP is 0.5f and 1f for Forms.Android.
Refer the below code snippet to customize the width of the grid cells and header cells in xaml.
<syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding OrdersInfo}" >
<syncfusion:SfDataGrid.GridStyle>
<syncfusion:DefaultStyle GridCellBorderWidth="5"
HeaderCellBorderWidth="5"/>
</syncfusion:SfDataGrid.GridStyle>
</syncfusion:SfDataGrid>public partial class MainPage : ContentPage
{
public Mainpage()
{
InitializeComponent();
this.dataGrid.GridStyle.GridCellBorderWidth = 5;
this.dataGrid.GridStyle.HeaderCellBorderWidth = 5;
}
}Refer the below code snippet to customize the width of the grid cells and header cells using custom style.
//Apply custom style to SfDataGrid from code
dataGrid.GridStyle = new CustomStyle();
public class CustomStyle : DataGridStyle
{
public CustomStyle()
{
}
// Customize border width for grid cells
public override float GetBorderWidth()
{
return 5;
}
// Customize border width for header cells
public override float GetHeaderBorderWidth()
{
return 5;
}
}Customize border of a particular cell
SfDataGrid allows you to customize the border color and border thickness of a particular cell using the QueryCellStyleEventArgs. This event will be fired for each cell. Using the Style.BorderColor and Style.BorderThickness properties through the QueryCellStyleEventArgs in its EventHandler, you can customize borders of an individual cell.
this.dataGrid.QueryCellStyle += DataGrid_QueryCellStyle;
private void DataGrid_QueryCellStyle(object sender, QueryCellStyleEventArgs e)
{
if (e.ColumnIndex == 1 && e.RowIndex == 1)
{
e.Style.BorderColor = Color.Red;
e.Style.BorderThickness = new Thickness(10);
}
else if (e.ColumnIndex == 3 && e.RowIndex == 5)
{
e.Style.BorderColor = Color.Blue;
e.Style.BorderThickness = new Thickness(0, 10, 0, 10);
}
e.Handled = true;
}
NOTE
You can refer to our Xamarin DataGrid feature tour page for its groundbreaking feature representations. You can also explore our Xamarin.Forms DataGrid example to knows various chart types and how to easily configured with built-in support for creating stunning visual effects.
See also
How to apply the row background color when mouse hover on SfDataGrid in UWP
How to customize the expander icon for each level of group in Xamarin.Forms DataGrid(SfDataGrid)
How to change header background dynamically in the SfDataGrid control
How to load multiple SfDataGrid’s to a layout
How to display custom font in GridCell
How to modify the cell borders in SfDataGrid
How to bind a view model property to header template
How to load grid without borders
How to load a button in Header using HeaderTemplate in code-behind
How to add multiple views in a grid cell in SfDataGrid
How to set different background color for each column header in SfDataGrid
How to display an animation while loading the data in the SfDataGrid