We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

UI Customaizations needed in Maskedit control

Thread ID:

Created:

Updated:

Platform:

Replies:

147540 Sep 15,2019 08:56 AM UTC Sep 17,2019 02:00 PM UTC Xamarin.Forms 1
loading
Tags: SfMaskedEdit
Krunal
Asked On September 15, 2019 08:56 AM UTC

I have put up following code

namespace :
             xmlns:sfLayout="clr-namespace:Syncfusion.XForms.TextInputLayout;assembly=Syncfusion.Core.XForms"
             xmlns:sfMaskedEdit="clr-namespace:Syncfusion.XForms.MaskedEdit;assembly=Syncfusion.SfMaskedEdit.XForms"    

Xaml :
                    <sfLayout:SfTextInputLayout Grid.Row="1" Hint="Enter OTP" HorizontalOptions="FillAndExpand" ContainerType="Outlined">
                        <sfLayout:SfTextInputLayout.Triggers>
                            <DataTrigger TargetType="sfLayout:SfTextInputLayout" Binding="{Binding Mode}" Value="{x:Static helper:LoginMode.Email}">
                                <Setter Property="IsVisible" Value="False"/>
                            </DataTrigger>
                        </sfLayout:SfTextInputLayout.Triggers>
                        <sfMaskedEdit:SfMaskedEdit Mask="0  0  0  0  0  0" BackgroundColor="Transparent" x:Name="otpEntry"/>
                    </sfLayout:SfTextInputLayout>

Above code results in UI look n feel as shown in image below :



I need following changes to UI :

1. Masked text entry should be shown in center of the outline laid out by TextInputLayout. I tried adding horizontaloptions = Center but in that case it stops showing the masked input control itself. (This could be bug which you can investigate)
2. I want dashes where nos. will be entered evenly spaced in available space and dashes I want of bigger width.
3. I want to hide entered value same like password field.

Above implementation I need for OTP entry as hint text suggest. Can you pls let me know how above mentioned UI customisations can be achieved?

Thanks


Vignesh Ramesh [Syncfusion]
Replied On September 17, 2019 02:00 PM UTC

Hi Krunal, 

Greetings from Syncfusion. 

Query 1: I tried adding horizontaloptions = Center but in that case, it stops showing the masked input control itself 
While setting HorizontalOptions as Center, the control is rendered at the center of the TextInputLayout. It is a default behavior of SfMaskedEdit. Also, we have checked with Xamarin.Forms Entry control, it is also having same behavior. Please refer the below screenshot. 

 

If you need to display the Value in center of the SfMaskedEdit, you can use HorizontalTextAlignment property as like the below snippet. 

[XAML]: 
 
<maskededit:SfMaskedEdit Mask="0  0  0  0  0  0" 
                         PromptChar="_" 
                         PasswordChar="*" 
                         BackgroundColor="Transparent" 
                         x:Name="otpEntry" 
                         HorizontalTextAlignment="Center"/> 
 

Query 2: I want dashes where nos. will be entered evenly spaced in available space and dashes, I want of bigger width 
We would like to inform that, “_” displayed in SfMaskedEdit are prompt characters, which is used to indicate the absence of your input in Mask. In source level, we have displayed prompt character for the provided Mask. While entering input, we have replaced the PromptChar with the typed input. There is no support for changing the width of the PromptChar. 

To know more information about PromptChart. Please refer the below user guide link. 

Query 3: I want to hide entered value same as password field 
You can achieve this by setting PasswordChar property of MaskedEdit as per the below snippet. 

[XAML]: 
 
<maskededit:SfMaskedEdit Mask="0  0  0  0  0  0" 
                         PromptChar="_" 
                         PasswordChar="*" 
                         BackgroundColor="Transparent" 
                         x:Name="otpEntry" 
                         HorizontalOptions="Center"/> 
 

To know more information about PasswordChar. Please refer the below document 

Please let us know if you have any other queries. 

Regards, 
Vignesh. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon