RadDataForm: Styling

If you followed the getting started article, you now know how to edit an object's properties with DataForm for NativeScript. You can change the style of each editor, its label or the groups if grouping is enabled.

NativeScriptUI-DataForm-Styling-Android NativeScriptUI-DataForm-Styling-iOS

Styling Properties

The styling of the editors is done with PropertyEditorStyle objects and the styling of the group headers is done with GroupTitleStyle objects. They can be used in a similar way since they share most of their properties like strokeColor, strokeWidth, fillColor, labelTextColor, labelTextSize, labelFontName and labelFontStyle. Additionally, the PropertyEditorStyle provides the following: labelHidden, editorHorizontalOffset, editorVerticalOffset, labelHorizontalOffset and labelVerticalOffset

Styling example

Here's a snippet that demonstrates the usage of some of the above mentioned styling properties:

<df:EntityProperty name="name" >
    <df:EntityProperty.editor>
        <df:PropertyEditor type="Text" >
            <df:PropertyEditor.propertyEditorStyle>
                <df:PropertyEditorStyle
                        strokeColor="#6A1B9A"
                        strokeWidth="2"
                        fillColor="#E040FB"
                        labelHidden="false"
                        labelTextSize="18"
                        ios:labelFontName="Times New Roman"
                        android:labelFontName="sans-serif-light"
                        labelFontStyle="Italic"
                        labelTextColor="#6A1B9A"/>
            </df:PropertyEditor.propertyEditorStyle>
        </df:PropertyEditor>
    </df:EntityProperty.editor>
</df:EntityProperty>

Styling advanced

If you need to provide a more customized styling which is not covered by the above properties, you can always fine-tune the native editors for each platform. Here's an example of changing the style of the Slider editor independently on each platform:

export function editorSetupSliderAndroid(editor) {
    editor.getEditorView().getThumb().setColorFilter(new android.graphics.PorterDuffColorFilter(colorDark.android, android.graphics.PorterDuff.Mode.SRC_IN));
    editor.getEditorView().getProgressDrawable().setColorFilter(new android.graphics.PorterDuffColorFilter(colorLight.android, android.graphics.PorterDuff.Mode.SRC_IN));
}

export function editorSetupSliderIOS(editor) {
    var coreEditor = <UISlider>editor.editor;
    coreEditor.tintColor = colorLight.ios;
    coreEditor.thumbTintColor = colorDark.ios;
}

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful: