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.