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

Customizing Data Fields

The RadDataForm control provides API for customizing the UI of the data fields.

The control allows you to replace the automatically created panel with data fields and also the labels of the fields.

Customizing Data Field Style

The auto-generated data fields can be customized using the DataFieldStyle property of RadDataForm.

Example 1: Setting DataFieldStyle

<telerik:RadDataForm> 
    <telerik:RadDataForm.DataFieldStyle> 
        <Style TargetType="telerik:DataFormDataField"> 
            <Setter Property="Foreground" Value="#F5CC84" /> 
            <Setter Property="LabelTemplate"> 
                <Setter.Value> 
                    <DataTemplate> 
                        <TextBlock Text="{Binding}" FontWeight="Bold" FontStyle="Italic"/> 
                    </DataTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
    </telerik:RadDataForm.DataFieldStyle> 
</telerik:RadDataForm> 

Customize Content

To control the UI shown on each page the RadDataForm control, set the ReadOnlyTemplate and EditTemplate properties. The ReadOnlyTemplate is used when the control is in normal state and EditTemplate is used when the current item is editing.

The following example shows one way to use the template properties.

Example 2: Setting ReadOnlyTemplate and EditTemplate

<telerik:RadDataForm AutoGenerateFields="False"> 
    <telerik:RadDataForm.ReadOnlyTemplate> 
        <DataTemplate> 
            <StackPanel> 
                <TextBlock Text="Personal information:" FontWeight="Bold" Margin="0 10 0 0" Foreground="#d1cab8"/> 
                <telerik:DataFormDataField Margin="15 0 0 0" Label="Name" LabelPosition="Beside" IsReadOnly="True" DataMemberBinding="{Binding Name, Mode=TwoWay}" /> 
                <TextBlock Text="Settings:" FontWeight="Bold" Margin="0 10 0 0" Foreground="#d1cab8"/> 
                <telerik:DataFormCheckBoxField  Margin="10 0 0 0" Label="Checked" IsReadOnly="True" LabelPosition="Beside" DataMemberBinding="{Binding IsChecked, Mode=TwoWay}" /> 
                <telerik:DataFormDateField Margin="15 0 0 0" Label="Date" IsReadOnly="True" LabelPosition="Beside" DataMemberBinding="{Binding Date, Mode=TwoWay}" /> 
            </StackPanel> 
        </DataTemplate> 
    </telerik:RadDataForm.ReadOnlyTemplate> 
    <telerik:RadDataForm.EditTemplate> 
        <DataTemplate> 
            <StackPanel> 
                <TextBlock Text="Personal information:" FontWeight="Bold" Margin="0 10 0 0" Foreground="#FBBC05"/> 
                <telerik:DataFormDataField Margin="15 0 0 0" Label="Name" LabelPosition="Beside" DataMemberBinding="{Binding Name, Mode=TwoWay}" /> 
                <TextBlock Text="Settings:" FontWeight="Bold" Margin="0 10 0 0" Foreground="#FBBC05"/> 
                <telerik:DataFormCheckBoxField  Margin="10 0 0 0" Label="Checked" LabelPosition="Beside" DataMemberBinding="{Binding IsChecked, Mode=TwoWay}" /> 
                <telerik:DataFormDateField Margin="15 0 0 0" Label="Date" LabelPosition="Beside" DataMemberBinding="{Binding Date, Mode=TwoWay}" /> 
            </StackPanel> 
        </DataTemplate> 
    </telerik:RadDataForm.EditTemplate> 
</telerik:RadDataForm> 

The data form's content when adding a new item can be replaced too. To do so, set the NewItemTemplate property in the same manner as ReadOnlyTemplate and EditTemplate.

Customize Labels

The data form control allows you to customize the labels of the data fields.

To customize all labels in the control on a global level, set the LabelPosition and LabelStyle properties of RadDataForm.

LabelPosition can be set to Above (default) and Beside.

Example 3: Setting label position

<telerik:RadDataForm LabelPosition="Beside"> 

Example 4: Setting label style

<telerik:RadDataForm> 
    <telerik:RadDataForm.LabelStyle> 
        <Style TargetType="TextBlock"> 
            <Setter Property="Foreground" Value="Green"/> 
        </Style> 
    </telerik:RadDataForm.LabelStyle> 
</telerik:RadDataForm> 
To customize a specific label, set its LabelPosition and LabelTemplate properties of the corresponding DataFormDataField.

Example 5: Setting label template

<telerik:DataFormDataField> 
    <telerik:DataFormDataField.LabelTemplate> 
        <DataTemplate> 
            <TextBlock Text="{Binding}" Foreground="Green"/> 
        </DataTemplate> 
    </telerik:DataFormDataField.LabelTemplate> 
</telerik:DataFormDataField> 

See Also

In this article
Not finding the help you need?