CODEWITHSUNDEEP
xamarin.forms
Levesque Xylia
Levesque Xylia

Reputation: 369

Xamarin Show/Hide Password

I am trying to create a registration form in Xamarin Forms. And I'm trying to enable the user to see the text input in Password Entry.

I'm sorry for this question, but I am new to Xamarin.

I saw this solution : Entry show and hide password

But i don't know where to put the code.

I added it to the MainActivity.cs but it does not work when i debug it using my android Phone.

Can someone help me to implement this code to my RegisterPage.

this is my code for Entry Password.

<Entry Margin="20,0,20,0" 
       HeightRequest="50" IsPassword="true"
       Placeholder="Password"
       x:Name="txtPassword"
       Text="{Binding passWord}">
</Entry>

<Entry Margin="20,0,20,0" 
       HeightRequest="50" IsPassword="true"
       Placeholder="Confirm Password"
       x:Name="txtConfPassword"
       Text="{Binding passWord}">
</Entry>

Upvotes: 1

Views: 2961

Answers (2)

Junior Jiang
Junior Jiang

Reputation: 12723

The easy way to achieve that can custom a View with Entry and ImageButton in Xamarin Forms, then you will not need to use custom Effects in each platform.

For example, create a SecurityEntry ContentView.

Xaml code:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinForms20.SecurityEntry">
  <ContentView.Content>
      <RelativeLayout Margin="5">
            <Entry x:Name="MyEntry"
                   Text="123456789" 
                   MaxLength="18"
                   RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Constant=0}"
                   RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Constant=0}"
                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.9}"
                   RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant= 50}" />

            <ImageButton BackgroundColor="Transparent"
                         Source="eyeon.png" Clicked="ImageButton_Clicked"
                   RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-50}"
                   RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Constant = 0}"
                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.10}"
                   RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.10}" />

        </RelativeLayout>
  </ContentView.Content>
</ContentView>

.cs code:

public partial class SecurityEntry : ContentView
{
    public SecurityEntry()
    {
        InitializeComponent();
    }

    private void ImageButton_Clicked(object sender, EventArgs e)
    {
        var imageButton = sender as ImageButton;
        if(MyEntry.IsPassword)
        {
            imageButton.Source = ImageSource.FromFile("eyeon.png");
            MyEntry.IsPassword = false;
        }
        else
        {
            imageButton.Source = ImageSource.FromFile("eyeoff.png");
            MyEntry.IsPassword = true;
        }
    }
}

Then we can use it in Xaml of Some ContentPage.Xaml:

<local:SecurityEntry WidthRequest="100" HeightRequest="50"/>

Now we can see the effect as follows:

enter image description here

If need to get the Value of Entry, we bind model for it. Then we can get the value by MVVM.

For example, create a sample Model data in ContentPage:

public partial class MainPage : ContentPage
{
    public string TextValue { set; get; }
    public MainPage()
    {
        InitializeComponent();
        TextValue = "I come from model";
        BindingContext = this;
    }
 }

Then in SecurityEntry.Xaml modify as follow:

 ...
 <Entry x:Name="MyEntry"
        Text="{Binding TextValue}" 
 ...

The effect will show:

enter image description here

Upvotes: 3

George Isaac
George Isaac

Reputation: 589

You can show/hide the entry by changing the bool value of IsPassword of your entry. txtConfPassword.IsPassword = true or false according to your requirement in the Registration page.

Upvotes: 1

Related Questions