Easily Show/Hide Password in Xamarin.Forms

jquery-bootstrap-show-hide-password

Screen: CheckBox Screen

3

Description:

1. Use two image one for eye.png and another for eyeicon.png .

2. Write a code in View folder xaml part.

4

<Grid HorizontalOptions=”FillAndExpand” VerticalOptions=”Center” BackgroundColor=”#ffffff” Margin=”15,0″ Padding=”8″>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”*”/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height=”50″/>

<RowDefinition Height=”1″/>

<RowDefinition Height=”50″/>

</Grid.RowDefinitions>

<local:CustomEntryRegular Grid.Column=”0″ Grid.Row=”0″ TextColor=”Black” Placeholder=”Username” PlaceholderColor=”#9A9A9A” HorizontalOptions=”FillAndExpand” VerticalOptions=”Center”/>

<BoxView Grid.Column=”0″ Grid.Row=”1″ HeightRequest=”1″ BackgroundColor=”Black” HorizontalOptions=”FillAndExpand” VerticalOptions=”Center”/>

<Grid Grid.Column=”0″ Grid.Row=”2″ HorizontalOptions=”FillAndExpand” BackgroundColor=”Transparent” RowSpacing=”0″ VerticalOptions=”CenterAndExpand” >

<Grid.RowDefinitions>

<RowDefinition Height=”Auto” />

<RowDefinition Height=”Auto” />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”*” />

<ColumnDefinition Width=”35″ />

</Grid.ColumnDefinitions>

<local:CustomEntryRegular x:Name=”txtPassword” IsPassword=”True” Grid.Row=”0″ Grid.Column=”0″ Grid.ColumnSpan=”2″ TextColor=”Black” Placeholder=”Password” PlaceholderColor=”#9A9A9A” HorizontalOptions=”FillAndExpand” VerticalOptions=”Center”>

</local:CustomEntryRegular>

<ContentView Grid.Row=”0″ Grid.Column=”1″ HorizontalOptions=”FillAndExpand” VerticalOptions=”FillAndExpand”>

<Image x:Name=”eye” Source=”eyeicon.png” VerticalOptions=”Center” HorizontalOptions=”Center” />

<ContentView.GestureRecognizers>

<TapGestureRecognizer Tapped=”ShowPassword_Tapped” />

</ContentView.GestureRecognizers>

</ContentView>

</Grid>

</Grid>

3. Write a code in View folder xaml.cs file.

5

private void ShowPassword_Tapped(object sender, EventArgs e)

{

if (txtPassword.IsPassword == true)

{

txtPassword.IsPassword = false;

eye.Source = “eye”;

}

else

{

txtPassword.IsPassword = true;

eye.Source = “eyeicon”;

}

}

Hopefully this will help you to understand and we have successfully created a Show/Hide Password in Xamarin.Forms .

Author – Ayaz Shaikh ( Xamarin Developer )

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>