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.


    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.

    How to

    Change the Sorting Icon in column headers

    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.

    Change the color of the 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;
        }
    }