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. Image for the cookie policy date

UI Customaizations needed in Maskedit control

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


1 Reply

VR Vignesh Ramesh Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon