A functionality for showing the password when clicked on a button like facebook??

thewannabedeveloper

Is this even possible.
An icon(button) near the password label which shows the password when clicked.
Would love if someone can provide a solution or any suggestions for this.

thewannabedeveloper

Okay, I figured it out. Thank you so much @ClintStLaurent and @AlessandroCaliaro for your inputs. Here's the code that worked for me.

 ` <Entry x:Name="Email" Placeholder="Email" TextColor="Black" Grid.Row="1" Grid.Column="1"></Entry>
      <StackLayout Grid.Row="2" Grid.Column="1">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions >
          <Entry IsPassword="True" x:Name="Password" TextColor="Black" Placeholder="Password" Grid.Column="0" Grid.ColumnSpan="2"/>
          <Image Source="eye32.png" HorizontalOptions="End" VerticalOptions="Center" Grid.Column="1" >
            <Image.GestureRecognizers>
              <TapGestureRecognizer Tapped="ShowPass" NumberOfTapsRequired="1" />
            </Image.GestureRecognizers>
          </Image>
        </Grid>
</StackLayout> `

For the Tap Event on the Image:

 `  public void ShowPass(object sender, EventArgs args)
        {
         Password.IsPassword = Password.IsPassword ? false : true;
        } `

ClintStLaurent

IsPassword is a property of the Entry.
Have you tried toggling that bool from true to false ?

thewannabedeveloper

@ClintStLaurent Thanks for your reply. But that's not what I'm looking for.
I'm looking for an icon at the end of the password label, so when I click and hold on it, it shows the text I entered.

AlessandroCaliaro

use a horizontal stacklayout with an Entry and an Image. Attach a TapGestureRecognizer to the Image and on Tapped event do what @ClintStLaurent say.

thewannabedeveloper

Okay, I figured it out. Thank you so much @ClintStLaurent and @AlessandroCaliaro for your inputs. Here's the code that worked for me.

 ` <Entry x:Name="Email" Placeholder="Email" TextColor="Black" Grid.Row="1" Grid.Column="1"></Entry>
      <StackLayout Grid.Row="2" Grid.Column="1">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions >
          <Entry IsPassword="True" x:Name="Password" TextColor="Black" Placeholder="Password" Grid.Column="0" Grid.ColumnSpan="2"/>
          <Image Source="eye32.png" HorizontalOptions="End" VerticalOptions="Center" Grid.Column="1" >
            <Image.GestureRecognizers>
              <TapGestureRecognizer Tapped="ShowPass" NumberOfTapsRequired="1" />
            </Image.GestureRecognizers>
          </Image>
        </Grid>
</StackLayout> `

For the Tap Event on the Image:

 `  public void ShowPass(object sender, EventArgs args)
        {
         Password.IsPassword = Password.IsPassword ? false : true;
        } `

Gigex42

You can also write this to invert the IsPassword property

Password.IsPassword = !Password.IsPassword;

ferleal

thank you thewannabedeveloper!