Desarrollador y especialista en tecnologías .Net

Extendiendo controles usando Gesture Recognizers (parte 2) – Agregando una opción de mostrar contraseña

Screen Shot 2019-02-23 at 1.24.38 PM
Share on facebook
Share on twitter
Share on linkedin

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.

¿quieres recibir mis artículos en tu correo?

Suscribete a mi boletín de correos y enterate desde que se publiquen los artículos

Comparte este post con tus amigos

Share on linkedin
Share on twitter
Share on facebook

¿Te gustó el artículo o tienes algún comentario? Puedes darme mention en twitter @eatskolnikov

Otros artículos

Xamarin

Extendiendo controles usando Gesture Recognizers (parte 1)

En esta serie de artículos vamos a ver como extender controles en Xamarin.Forms utilizando Reconocedores de Gestos, como los objetos están nombrados en inglés usaré el termino Gesture Recognizer de ahora en adelante. Este artículo en particular se enfocará en el reconocedor de gestos de toque (Tap Gesture Recognizer) y

Leer más »
Cinco preguntas

Cinco preguntas sobre ser un Microsoft Certified Trainer (MCT)

Recientemente he obtenido mi certificación de MCT y quería compartir un resumen de qué es, cómo funciona y por qué quisieras obtener esta certificación. Nunca he creído que las certificaciones sean 100% necesarias. Creo que la mejor prueba de conocimiento es la experiencia, pero tener una validación de tus aptitudes

Leer más »