Groups Styling

The RadDataForm group headers appearance can be customized with the GroupHeaderStyle property of type DataFormGroupHeaderStyle.

The DataFormGroupHeaderStyle class exposes the following properties:

  • Background (Color): Gets or sets the background of the group header.
  • BackgroundImageSource (ImageSource): Gets or sets a background image for the group header.
  • Foreground (Color): Gets or sets the group header text color.
  • Height (double): Gets or sets the group header height.
  • IsCollapsible (bool): Gets or sets a value that indicates whether the group will be collapsible.
  • Padding (Thickness): Gets or sets the group header content padding.
  • TextAlignment (TextAlignment): Gets or sets the group header text alignment.


Here is an example that demonstrates how to style the data form group headers.

<telerikInput:RadDataForm Source="{Binding}">
        <telerikDataForm:DataFormGroupHeaderStyle Background="#FFC300" Foreground="Black" Height="60" Padding="20" TextAlignment="Center" />
var groupHeaderStyle = new DataFormGroupHeaderStyle
    Background = Color.FromHex("#FFC300"),
    Foreground = Color.Black,
    Height = 60,
    Padding = new Thickness(20),
    TextAlignment = TextAlignment.Center

var dataForm = new RadDataForm
    Source = new Customer(),
    GroupHeaderStyle = groupHeaderStyle

Don't forget to add the following namespaces:

using Telerik.XamarinForms.Input;
using Telerik.XamarinForms.Input.DataForm;

Here is the source item class:

public class Customer
    [DisplayOptions(Group = "Basic Info", Header = "First Name")]
    public string FirstName { get; set; } = "John";

    [DisplayOptions(Group = "Basic Info", Header = "Last Name")]
    public string LastName { get; set; } = "Doe";

    [DisplayOptions(Group = "Additional Info", Header = "Age")]
    public int Age { get; set; } = 24;

    [DisplayOptions(Group = "Additional Info", Header = "Is New")]
    public bool IsNew { get; set; } = true;

    [DisplayOptions(Group = "Additional Info", Header = "Country")]
    public string Country { get; set; } = "unknown";

And this is how the DataForm Group Styling looks:

In this article
Not finding the help you need? Improve this article