Editors Styling

RadDataForm editors appearance can be customized with the EditorStyle property of type DataFormEditorStyle. The DataFormEditorStyle exposes the following properties:

• Height: Sets the height of each editor.
• Background: Specifies the background color of the editors.
• HeaderForeground: Defines the foreground color of the editors header.
• HeaderFontSize: Specifies the font size of the editors header.

The properties below are related to the look &feel of the positive and negative feedback messages related to validating the input fields:

• FeedbackFontSize;
• FeedbackImageSize;
• PositiveFeedbackForeground;
• NegativeFeedbackForeground;
• PositiveFeedbackBackground;
• NegativeFeedbackBackground;
• PositiveFeedbackImage (of type ImageSource);
• NegativeFeedbackImage (of type ImageSource);

Example

<telerikInput:RadDataForm  x:Name="dataForm" BackgroundColor="#B7D8FF" Source="{Binding}">
    <telerikInput:RadDataForm.EditorStyle>
        <telerikDataForm:DataFormEditorStyle Height="70"
                                             HeaderFontSize="17"
                                             HeaderForeground="#505050"
                                             FeedbackFontSize="13"
                                             PositiveFeedbackImage="success.png"
                                             NegativeFeedbackImage="fail.png"
                                             NegativeFeedbackForeground="#F8082D">
            <telerikDataForm:DataFormEditorStyle.FeedbackImageSize>
                <Size Width="10" Height="10" />
            </telerikDataForm:DataFormEditorStyle.FeedbackImageSize>
            <telerikDataForm:DataFormEditorStyle.Background>
                <telerikCommon:Background Fill="#EBF4FF"
                                          StrokeColor="#B2DFF4"
                                          StrokeWidth="2"
                                          StrokeLocation="Bottom" />
            </telerikDataForm:DataFormEditorStyle.Background>
            <telerikDataForm:DataFormEditorStyle.NegativeFeedbackBackground>
                <telerikCommon:Background Fill="#EBF4FF" 
                                          StrokeColor="#F8082D"
                                          StrokeWidth="2"
                                          StrokeLocation="All" />
            </telerikDataForm:DataFormEditorStyle.NegativeFeedbackBackground>
        </telerikDataForm:DataFormEditorStyle>
    </telerikInput:RadDataForm.EditorStyle>
</telerikInput:RadDataForm>

var negative = "F8082D";

var style = new DataFormEditorStyle
{
    Background = new Background
    {
        Fill = Color.FromHex("EBF4FF"),
        StrokeColor = Color.FromHex("B2DFF4"),
        StrokeWidth = 2,
        StrokeLocation = Location.Bottom
    },
    HeaderFontSize = 17,
    HeaderForeground = Color.FromHex("505050"),
    FeedbackFontSize = 13,
    PositiveFeedbackImage = ImageSource.FromFile("success.png"),
    NegativeFeedbackImage = ImageSource.FromFile("fail.png"),
    NegativeFeedbackForeground = Color.FromHex(negative),
    NegativeFeedbackBackground = new Background
    {                  
        StrokeColor = Color.FromHex(negative),
        StrokeWidth = 2,
        StrokeLocation = Location.All
    },
    Height = 70,
    FeedbackImageSize = new Size(10, 10),

};

dataForm.EditorStyle = style;
dataForm.BackgroundColor = Color.FromHex("B7D8FF");

and add the following namespace:

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
xmlns:telerikDataForm="clr-namespace:Telerik.XamarinForms.Input.DataForm;assembly=Telerik.XamarinForms.Input"

Result:

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

See Also

• Editors
• Validate and Commit