Visual Customization in Xamarin Masked Entry (SfMaskedEdit)

17 Oct 20222 minutes to read

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

BorderColor

Sets the custom BorderColor to SfMaskedEdit.

XAML

<syncmaskededit:SfMaskedEdit x:Name="maskedEdit" MaskType="Text" Mask="00/00/0000" BorderColor="Green"/>

C#

SfMaskedEdit maskedEdit = new SfMaskedEdit();
maskedEdit.MaskType = MaskType.Text;
maskedEdit.Mask = "00/00/0000";
maskedEdit.BorderColor = Color.Green;

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.

XAML

<syncmaskededit:SfMaskedEdit x:Name="maskedEdit" MaskType="Text" Mask="00/00/0000" BorderColor="Green" ErrorBorderColor="Yellow"/>

C#

SfMaskedEdit maskedEdit = new SfMaskedEdit();
maskedEdit.MaskType = MaskType.Text;
maskedEdit.Mask = "00/00/0000";
maskedEdit.ErrorBorderColor = Color.Yellow;

Setting Appearance of Text

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

• TextColor: Changes the color of the text.
• HorizontalTextAlignment: Changes the horizontal alignment of the text.
• FontFamily: Changes the font family of the text.
• FontAttributes: Sets font attributes(bold/italic/none) of the text.
• FontSize: Sets font size of the text.

XAML

<syncmaskededit:SfMaskedEdit x:Name="maskedEdit" MaskType="Text" Mask="00/00/0000" TextColor="Brown" HorizontalTextAlignment="Center" FontFamily="Arial" FontAttributes="Bold" FontSize="20"/>

C#

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;