En este pequeño tutorial aprenderemos a mostrar la contraseña en Xamarin.Forms mediante un tapGesture en un icono:
Lo primero que debemos de hacer en nuestra Page (por lo regular es en la de LoginPage) es agregar la imagen de default (puede ser un ojo o un candado cerrado), al cual le asignaremos un Binding y un TapGesture, cabe destacar que el Entry y la imagen estarán en un mismo StackLayout:
var slPassword = new StackLayout { HorizontalOptions = LayoutOptions.FillAndExpand, Padding = new Thickness(20, 5, 20, 5), Spacing = 15, Orientation = StackOrientation.Horizontal, }; var Entry_Psw = new CustomEntry { IsPassword = true, HorizontalOptions = LayoutOptions.FillAndExpand, Placeholder = AppResources.PageLoginPasswordPlaceholder, }; Entry_Psw.SetBinding(Entry.TextProperty, "TextEntryPass"); Entry_Psw.SetBinding(Entry.IsPasswordProperty, "IsPassEntry"); var imgPassword = new Image { Source = ImageSource.FromResource("icon_lock.png"), HorizontalOptions = LayoutOptions.Start, Aspect = Aspect.AspectFit, WidthRequest = 20, HeightRequest = 20 }; imgPassword.SetBinding(Image.SourceProperty, "SourceImageLockUnLock"); var tapGestureRecognizer = new TapGestureRecognizer(); tapGestureRecognizer.SetBinding( TapGestureRecognizer.CommandProperty, "CommandShowPass"); imgPassword.GestureRecognizers.Add(tapGestureRecognizer);
No olvidemos agregar nuestro elemento al StackLayout:
slPassword.Children.Add(imgPassword);
Ahora en nuestro ViewModel definamos los Binding:
string textEntryPass; public const string TextEntryPassPropertyName = "TextEntryPass"; public string TextEntryPass { get { return textEntryPass; } set { textEntryPass = value; } } Command commandShowPass; public const string CommandShowPassPropertyName = "CommandShowPass"; public Command CommandShowPass { get { return commandShowPass ?? (commandShowPass = new Command(async () => await ExecuteCommandShowPass())); } } ImageSource sourceImageLockUnLock; public const string SourceImageLockUnLockPropertyName = "SourceImageLockUnLock"; public ImageSource SourceImageLockUnLock { get { return sourceImageLockUnLock; } set { sourceImageLockUnLock = value; } } bool isPassEntry; public const string IsPassEntryPropertyName = "IsPassEntry"; public bool IsPassEntry { get { return isPassEntry; } set { isPassEntry = value; } }
Por último definamos en nuestro método el comportamiento:
/// <summary> /// Método para mostrar la contraseña y mostrar el candado abierto /// </summary> async Task ExecuteCommandShowPass() { try { if (!IsPassEntry) { SourceImageLockUnLock = ImageSource.FromResource("icon_lock.png"); OnPropertyChanged(SourceImageLockUnLockPropertyName); IsPassEntry = true; OnPropertyChanged(IsPassEntryPropertyName); } else { SourceImageLockUnLock = ImageSource.FromResource("icon_unlock.png"); OnPropertyChanged(SourceImageLockUnLockPropertyName); IsPassEntry = false; OnPropertyChanged(IsPassEntryPropertyName); } } catch (Exception ex) { await ExceptionControl.ManagerException(ex); } }
Y con esto seria todo, veamos el resultado:
Espero esto les haya ayudado, y recuerden, cualquier duda o comentario relacionado al desarrollo de aplicaciones con Xamarin.Forms, usen el #DevXamBlack en Twitter.
Hasta la próxima!.