UI Customaizations needed in Maskedit control

[Krunal]

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]

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. 

https://help.syncfusion.com/xamarin/sfmaskededit/basic-features#setting-prompt-character  

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 

http://www.syncfusion.com/downloads/support/directtrac/217096/ze/MaskedEdit_UG1513033667  

Please let us know if you have any other queries. 

Regards, 

Vignesh.