En la entrada anterior vimos el TapGestureRecognizer y vimos algunas ideas de lo que podríamos hacer con él. También hicimos un ejemplo creando un botón de imagen. Hoy vamos a implementar un caso práctico y lo haremos de dos maneras ligeramente diferentes. Una utilizando un comando como respuesta y la otra con un controlador de eventos. Las imágenes fuero tomadas desde aquí.

Es posible que hayas visto aplicaciones que te dan la opción de mostrar los caracteres escritos en el campo de contraseña. Esta es una funcionalidad muy útil para evitar al usuario la molestia de volver a escribirla solo por algún error tipográfico. En este post aprenderás a hacer esta funcionalidad.

El resultado final será algo como lo siguiente

Vamos a comenzar

• Usando una imagen como elemento visual y respondiendo con un evento

El código

El XAML

 <Grid HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="50" />
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
          <RowDefinition Height="*" />
          <RowDefinition Height="*" />
     </Grid.RowDefinitions>
     <Entry Grid.Row="0" Grid.Column="0" IsPassword="true" x:Name="tbxPasswordEntry" Placeholder="Type your password" />
     <Image Source="view" Grid.Row="0" Grid.Column="1" x:Name="btnShowPassword">
         <Image.GestureRecognizers>
             <TapGestureRecognizer 
                         Tapped="ShowPassword"
                         NumberOfTapsRequired="1" />
        </Image.GestureRecognizers>  
    </Image>    
</Grid> 

El evento en el Page

public void ShowPassword(object sender, EventArgs args)
{
    if (tbxPasswordEntry.IsPassword)
    {
        tbxPasswordEntry.IsPassword = false;
        btnShowPassword.Source = "hide";
    }
    else
    {
        tbxPasswordEntry.IsPassword = true;
        btnShowPassword.Source = "view";
    }
}

Explicando el código

En primer lugar, estamos utilizando un diseño de cuadrícula (Grid Layout) para garantizar que los elementos estén alineados horizontalmente. Hemos nombrado el campo de entrada (Entry) como tbxPasswordEntry y la imagen (Image) como btnShowPassword para que podamos hacer referencia a ellos desde el código del evento. La entrada tiene la propiedad IsPassword establecida como true, esto convierte la entrada en un cuadro de contraseña. Agregamos un TapGestureRecognizer a la imagen configurado para lanzar el evento ShowPassword después de que la imagen sea tocada una vez.

En el código del evento se pregunta si tbxPasswordEntry está configurado como campo de contraseña y en consecuencia se modifica y se actualiza la imagen. Al final conseguimos lo siguiente:

• Usando una etiqueta(Label) como elemento visual y utilizando un comando en respuesta

El XAML

<Grid HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="50" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Entry Grid.Row="1" Grid.Column="0" IsPassword="{Binding IsPasswordHidden}" Placeholder="Binded field" />
    <Label Grid.Row="1" Grid.Column="1" Text="{Binding LabelText}" FontAttributes="Bold" TextDecorations="Underline">
        <Image.GestureRecognizers>
            <TapGestureRecognizer 
                Command="{Binding TogglePasswordShowCommand}"
                NumberOfTapsRequired="1" />
        </Image.GestureRecognizers>  
    </Label>
</Grid>

El ViewModel

[AddINotifyPropertyChangedInterface]
public class MainPageViewModel 
{
    public string LabelText { get; set; }
    public bool IsPasswordHidden { get; set; }
    public ICommand TogglePasswordShowCommand { get; set; }

    public MainPageViewModel()
    {
        TogglePasswordShowCommand = new Command(TogglePasswordShowCommandExecute);
        IsPasswordHidden = true;
        LabelText = "show";
    }

    public void TogglePasswordShowCommandExecute() 
    {
        if (IsPasswordHidden)
        {
            IsPasswordHidden = false;
            LabelText = "hide";
        }
        else
        {
            IsPasswordHidden = true;
            LabelText = "show";
        }
    }
}

Explicando el código

Aquí estamos utilizando un enfoque MVVM, donde cada página tiene un ViewModel asignado donde se ejecuta la lógica de negocio.

La interfaz de usuario es más o menos la misma, excepto que no estamos nombrando los controles y estamos usando una etiqueta (Label) en lugar de una imagen como control para lanzar el cambio. Algunas propiedades de los controles están vinculadas (Binded) a campos específicos del ViewModel.

La etiqueta AddINotifyPropertyChangedInterface proviene del paquete de nuget Fody.PropertyChanged. Pon atención al método TogglePasswordShowCommandExecute y nota las similitudes con el método ShowPassword del caso anterior. En resumen, cuando presionamos la etiqueta se llama al método TogglePasswordShowCommandExecute. Esto se obtiene vinculando la propiedad Command del TapGestureRecognizer al campo TogglePasswordShowCommand del ViewModel.

Ten en cuenta que estos son solo ejemplos y probablemente hay más y mejores implementaciones posibles para lograr estos resultados. ¿Te gustaron estos ejemplos? ¿Se te ocurren otras ideas de implementaciones? Mándame un tweet y comencemos una conversación.