New to Telerik UI for Xamarin? Download free 30-day trial

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: Specifies the background of the group headers.
  • BackgroundImageSource (ImageSource): Sets a background image for the group header.
  • Foreground: Determines the group header text color.
  • Height: Specifies the group header height.
  • IsCollapsible: Indicates whether the group will be collapsible.
  • IsCollapsed: Specifies whether the group is collapsed. When setting it to "False", the groups will be collapsed by default.
  • Padding: Sets the group header content padding.
  • TextAlignment: Specifies 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="#90C9E9" 
                                                  TextAlignment="Center" />
var groupHeaderStyle = new DataFormGroupHeaderStyle
    Background = Color.FromHex("#90C9E9"),
    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:

Sample examples demonstrating groups styling of DataForm control can be found inside the RadDataForm -> Styling section within the SDK Samples Browser application.

See Also

In this article