.NET MAUI DataForm Group Styling

The DataForm control for .NET MAUI provides styling options for customizing the apperance of its group headers. You can apply a style to the whole header, or only to the header label.

The DataFormGroup class exposes the following Style properties:

• HeaderStyle(of type Style with target type DataFormGroupHeaderView)—Defines the header view style.
• HeaderLabelStyle(of type Style with target type Label)—Defines the header label style.

HeaderStyle

To style the DataFormGroupHeaderView use the following properties:

• BackgroundColor—Defines the background color of the header.
• BorderColor—Defines the border color of the header.
• BorderThickness—Specifies the border thickness of the header.
• HeaderLabelStyle (of type Style with target type Label)—Defines the header label style.

Example

The following examples demonstrate how to use the styling properties of the DataFormGroup.

Define the RadDataForm and the groups

<telerik:RadDataForm x:Name="dataForm" 
                     AutoGenerateItems="False" 
                     Grid.Column="1">
    <telerik:RadDataForm.BindingContext>
        <local:DataTypeEditorsModel/>
    </telerik:RadDataForm.BindingContext>
    <telerik:RadDataForm.Items>
        <telerik:DataFormGroup HeaderText="Group 1" 
                               HeaderLabelStyle="{StaticResource GroupHeaderLabelStyle}"
                               HeaderStyle="{StaticResource GroupHeaderViewStyle}">
            <telerik:DataFormRadEntryEditor PropertyName="FirstName" />
            <telerik:DataFormRadNumericEditor PropertyName="People" 
                                              Minimum="1" />
            <telerik:DataFormRadComboBoxEditor PropertyName="Accommodation" 
                                            HeaderText="Accomodation options" />
            <telerik:DataFormDatePickerEditor PropertyName="StartDate" 
                                              HeaderText="From:" />
        </telerik:DataFormGroup>
        <telerik:DataFormGroup HeaderText="Group 2" 
                               HeaderLabelStyle="{StaticResource GroupHeaderLabelStyleAlt}">
            <telerik:DataFormDatePickerEditor PropertyName="EndDate" 
                                              HeaderText="To:" />
            <telerik:DataFormRadTimeSpanPickerEditor PropertyName="Duration" 
                                                  HeaderText="Duration" />
            <telerik:DataFormRadCheckBoxEditor PropertyName="Visited" 
                                            HeaderText="Visited before" 
                                            IsThreeState="True" />
        </telerik:DataFormGroup>
    </telerik:RadDataForm.Items>
</telerik:RadDataForm>

Define the HeaderStyle

<Style x:Key="GroupHeaderViewStyle" TargetType="telerik:DataFormGroupHeaderView">
    <Setter Property="BorderColor" Value="Black" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="BackgroundColor" Value="LightGray" />
</Style>

Define the HeaderLabelStyle of the first DataForm group

<Style x:Key="GroupHeaderLabelStyle" TargetType="Label">
    <Setter Property="TextColor" Value="ForestGreen" />
    <Setter Property="FontSize" Value="22" />
    <Setter Property="VerticalTextAlignment" Value="Center" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>

Define the HeaderLabelStyle of the second DataForm group

<Style x:Key="GroupHeaderLabelStyleAlt" TargetType="Label">
    <Setter Property="TextColor" Value="White" />
    <Setter Property="FontSize" Value="22" />
    <Setter Property="BackgroundColor" Value="#8660C5" />
    <Setter Property="VerticalTextAlignment" Value="Center" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>

Add the following namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

The following image shows what the DataForm control looks like when the styles described above are applied:

See Also

• Editors Styling
• Error Message Styling
• Validation Styling
• Header Styling