.NET MAUI DataForm Header Styling

The DatePicker control for .NET MAUI provides styling options for customizing the appearance of the header label or image above each editor.

The style of the Header message can be set individually for each editor or directly to the DataForm control using the following styling properties:

• HeaderImageSource(ImageSource)—Specifies the ImageSource of the image displayed in the header.
• HeaderImageStyle(of type Style with target type Image)—Defines the header image style.
• HeaderLabelStyle(of type Style with target type Label)—Defines the header label style.

Common Header Styling

1. Define a common HeaderLabelStyle

<Style x:Key="CommonHeaderLabelStyle" TargetType="Label">
    <Setter Property="TextColor" Value="RoyalBlue" />
    <Setter Property="VerticalOptions" Value="Center" />
    <Setter Property="HorizontalOptions" Value="Center" />
</Style>

1. Apply the common HeaderLabelStyle to all editors in the DataForm

<telerik:RadDataForm x:Name="dataForm" 
                     Grid.Row="1" 
                     HeaderLabelStyle="{StaticResource CommonHeaderLabelStyle}">
    <telerik:RadDataForm.BindingContext>
        <local:DataTypeEditorsModel/>
    </telerik:RadDataForm.BindingContext>
</telerik:RadDataForm>

Individual Header Styling

1. Define two different HeaderLabelStyle

<Style x:Key="HeaderLabelStyle" TargetType="Label">
    <Setter Property="TextColor" Value="#FF734C" />
    <Setter Property="VerticalOptions" Value="Center" />
    <Setter Property="HorizontalOptions" Value="Start" />
</Style>

<Style x:Key="HeaderLabelStyleAlternative" TargetType="Label">
    <Setter Property="TextColor" Value="#9A4CFF" />
    <Setter Property="VerticalOptions" Value="Center" />
    <Setter Property="HorizontalOptions" Value="Start" />
</Style>

1. Apply a style to each editor in the DataForm individually

<telerik:RadDataForm x:Name="dataForm2" 
                     AutoGenerateItems="False" 
                     Grid.Row="3">
    <telerik:DataFormRadEntryEditor PropertyName="FirstName" 
                                HeaderText="Name" 
                                HeaderLabelStyle="{StaticResource HeaderLabelStyle}" />
    <telerik:DataFormRadNumericEditor PropertyName="People" 
                                   HeaderText="People" 
                                   Minimum="1" 
                                   HeaderLabelStyle="{StaticResource HeaderLabelStyleAlternative}" />
    <telerik:DataFormRadComboBoxEditor PropertyName="Accommodation" 
                                    HeaderText="Accomodation options" 
                                    HeaderLabelStyle="{StaticResource HeaderLabelStyle}" />
    <telerik:DataFormDatePickerEditor PropertyName="StartDate" 
                                      HeaderText="From:" 
                                      HeaderLabelStyle="{StaticResource HeaderLabelStyleAlternative}" />
    <telerik:DataFormRadTimeSpanPickerEditor PropertyName="Duration" 
                                          HeaderText="Duration" 
                                          HeaderLabelStyle="{StaticResource HeaderLabelStyle}" />
    <telerik:DataFormRadCheckBoxEditor PropertyName="Visited" 
                                    HeaderText="Visited before" 
                                    HeaderLabelStyle="{StaticResource HeaderLabelStyleAlternative}" />
    <telerik:RadDataForm.BindingContext>
        <local:DataTypeEditorsModel />
    </telerik:RadDataForm.BindingContext>
</telerik:RadDataForm>

1. 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
• Groups Styling
• Error Message Styling
• Validation Styling