Visual Customization in Xamarin Masked Entry (SfMaskedEdit)

17 May 20212 minutes to read

The appearance of SfMaskedEdit can be customized using the following properties:

BorderColor

Sets the custom BorderColor to SfMaskedEdit.

<syncmaskededit:SfMaskedEdit x:Name="maskedEdit" MaskType="Text" Mask="00/00/0000" BorderColor="Green"/>
SfMaskedEdit maskedEdit = new SfMaskedEdit();
maskedEdit.MaskType = MaskType.Text;
maskedEdit.Mask = "00/00/0000";
maskedEdit.BorderColor = Color.Green;

BorderColor customization in Xamarin.Forms masked edit

ErrorBorderColor

Sets the custom ErrorBorderColor to SfMaskedEdit. Error border color indicates the color to be used when the validation fails for your input with respect to the mask used.

Validation triggers based on ValidationMode property.
Refer this link to know more about the ValidationMode property of SfMaskedEdit control.

<syncmaskededit:SfMaskedEdit x:Name="maskedEdit" MaskType="Text" Mask="00/00/0000" BorderColor="Green" ErrorBorderColor="Yellow"/>
SfMaskedEdit maskedEdit = new SfMaskedEdit();
maskedEdit.MaskType = MaskType.Text;
maskedEdit.Mask = "00/00/0000";
maskedEdit.ErrorBorderColor = Color.Yellow;

ErrorBorderColor customization in Xamarin.Forms masked edit

Setting Appearance of Text

You can customize the display text appearance of SfMaskedEdit control using the following properties:

<syncmaskededit:SfMaskedEdit x:Name="maskedEdit" MaskType="Text" Mask="00/00/0000" TextColor="Brown" HorizontalTextAlignment="Center" FontFamily="Arial" FontAttributes="Bold" FontSize="20"/>
SfMaskedEdit maskedEdit = new SfMaskedEdit();
maskedEdit.MaskType = MaskType.Text;
maskedEdit.Mask = "00/00/0000";
maskedEdit.TextColor = Color.Brown;
maskedEdit.HorizontalTextAlignment = TextAlignment.Center;
maskedEdit.FontFamily = "Arial";
maskedEdit.FontAttributes = FontAttributes.Bold;
maskedEdit.FontSize = 20;

TextColor customization in Xamarin.Forms masked edit