Styles

SfDataGrid allows you to apply style to all of its elements by writing a Style class overriding from DataGridStyle and assigning it to the SfDataGrid.GridStyle property.

The following example explains you how to apply custom style to SfDataGrid.

  • c#
  • //Apply custom style to SfDataGrid from code
    dataGrid.GridStyle = new Dark ();
  • c#
  • //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.Cyan;
        }
    }

    The following picture shows the grid loaded in different styles.

    Applying alternate row style

    SfDataGrid allows you to apply the alternative row style by writing a custom grid style deriving from DataGridStyle and assigning it to the SfDataGrid.GridStyle property.

  • c#
  • //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

    SfDataGrid allows you to customize the alternate row count for applying the alternate row style using the SfDataGrid.AlternationCount property.

    The below code illustrates how to set the alternate row count.

  • c#
  • //Apply alternative row count
    dataGrid.AlternationCount = 3;

    Border Customization

    • SfDataGrid allows you to customize the grid borders to vertical, horizontal, both or none based on requirements. Override the DataGridStyle.GetGridLinesVisibility method to customize the borders in SfDataGrid.
  • c#
  • //Apply custom style to SfDataGrid from code
    dataGrid.GridStyle = new CustomStyle ();
  • c#
  • //Custom Style class
    public class CustomStyle : DataGridStyle
    {
        public CustomStyle ()
        {
        }
        public override GridLinesVisibility GetGridLinesVisibility()
        {
            return base.GetGridLinesVisibility();
        }
    }

    Following are the lists of options available to customize the grid borders.

    • Both
    • Horizontal
    • Vertical
    • None

    Both

  • c#
  • public override GridLinesVisibility GetGridLinesVisibility()
    {
        return GridLinesVisibility.Both;
    }

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

    Horizontal

  • c#
  • public override GridLinesVisibility GetGridLinesVisibility()
    {
        return GridLinesVisibility.Horizontal;
    }

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

    Vertical

  • c#
  • public override GridLinesVisibility GetGridLinesVisibility()
    {
        return GridLinesVisibility.Vertical;
    }

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

    None

  • c#
  • public override GridLinesVisibility GetGridLinesVisibility()
    {
        return GridLinesVisibility.None;
    }

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

    Customizing the sort icons in header

    You can load any desired image as the sort icon in the SfDataGrid using the GetHeaderSortIndicatorDown and GetHeaderSortIndicatorUp overrides of the DataGridStyle class. The following code example illustrates how to change the SortIcon in SfDataGrid.

  • c#
  • //Apply custom style to SfDataGrid from code
    dataGrid.GridStyle = new Custom();
    
    public class Custom : DataGridStyle
    {
    
        public override int GetHeaderSortIndicatorUp()
        {
            return GettingStarted.Resource.Drawable.SortUp;
        }
    
        public override int GetHeaderSortIndicatorDown()
        {
            return GettingStarted.Resource.Drawable.SortDown;
        }
    
    }

    The following screenshots shows the final outcome of the above code

    NOTE

    The image’s BuildAction must be set to AndroidResource so that we can access the image via its generated ID value.

    Customizing resizing indicator

    You can change the color of the resizing indicator using the GetResizingIndicatorColor override of the DataGridStyle class. The following code example illustrates how to change the color of the ResizingIndicator in SfDataGrid.

  • c#
  • //Apply custom style to SfDataGrid from code
    dataGrid.GridStyle = new Custom();
    
    public class Custom : DataGridStyle
    {
        public override Color GetResizingIndicatorColor()
        {
            return Color.Blue;
        }
    }