Tip {How show the password on Xamarin.Forms with tapGesture}

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!.