Extending Controls with Gesture Recognizers (part 2) – Adding a show password option

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

In the previous entry we were introduced the TapGestureRecognizer and saw an example of an image button and got a few ideas of what we could do with it. Today we are checking a practical use for it and see an implementation using a Command instead of an event handler. The Images are taken from here.

You may have seen apps that give you the option to show the characters typed in the password field. This is a very useful functionality to avoid the user the annoyance of writing the password again just because of some typo. On this post you will learn how to do that same thing.

The final result will look something like this:

Let’s just jump right into it

  • Using an Image as visual element and an event handler

Here is the code

The 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> 

The codebehind

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

Explaining the code

First of all we are using a Grid layout to ensure the elements are aligned horizontally. We have named both the Entry (tbxPasswordEntry) and the Image (btnShowPassword) so we can reference them from the Page. The Entry has the property IsPassword set to true. We added a TapGestureRecognizer to the image configured to launch the ShowPassword event handler after the image has been tapped once.

The event handler asks if the Entry is set as a Password, changes it and updates the image accordingly. In the end we get the following:

  • Using a Label as a visual element and a Command in response

The 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>

The 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";
        }
    }
}

Explaining the code

Here we are using an MVVM approach, where each Page has a ViewModel assigned to it and all business the logic is executed in it.

The user interface is more or less the same, except we are not naming the controls and we are using a Label instead of an Image to take action. Some control properties are binded to specific ViewModel fields.

The AddINotifyPropertyChangedInterface comes from the nuget package Fody.PropertyChanged but don’t focus on that, let’s continue on the other stuff. Look at the TogglePasswordShowCommandExecute and notice the similarities with the ShowPassword method from the previous case. In short the TogglePasswordShowCommandExecute method is called when we Tap the label that has the Command property binded to the TogglePasswordShowCommand field and that is what makes things work.

Keep in mind these are just examples and there are probably other implementations possible to achieve this “show password functionality”. Did you like these? Can you come up with other implementations ideas? Hit me up and let’s start a conversation.

Did you like the post and Wanna leave a reply? You can mention me on twitter @eatskolnikov so we can have a conversation about it

Share it with your friends

Share on facebook
Share on twitter
Share on linkedin

Want to get these post in your inbox?

Type your email down here and you will get a weekly digest of the post here

Other articles on the site

Enmanuel Toribio hablando sobre Xamarin en codecamsdq 2019
codecampsdq

The CodecampSDQ experience

Last Saturday, June 1st I had the privilege of participating as both staff and speaker for a little-known tech event called CodecampSDQ. It was held in the premises of INTEC University here in Santo Domingo. This event has been going on for many years and it has become a sort

Read More »