Xamarin Passwort ein- / ausblenden

Question

Ich versuche, ein Registrierungsformular in Xamarin Forms zu erstellen. Und ich versuche, dem Benutzer zu ermöglichen, die Texteingabe in Passworteingabe zu sehen.

Diese Frage tut mir leid, aber ich bin neu bei Xamarin.

Ich habe diese Lösung gesehen: Eintrag Passwort ein- und ausblenden

Aber ich weiß nicht, wo ich den Code platzieren soll.

Ich habe es zu MainActivity.cs hinzugefügt, aber es funktioniert nicht, wenn ich es mit meinem Android-Telefon debugge.

Kann mir jemand helfen, diesen Code auf meiner RegisterPage zu implementieren?

Dies ist mein Code für das Zugangskennwort.

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

Answer 1

Der einfache Weg, dies zu erreichen, besteht darin, eine Ansicht mit Entryund ImageButtonin Xamarin Forms anzupassen. Dann müssen Sie nicht auf jeder Plattform benutzerdefinierte Effekte verwenden.

Erstellen Sie beispielsweise eine 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;
        }
    }
}

Dann können wir es in Xaml von Some ContentPage.Xaml verwenden :

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

Jetzt können wir den Effekt wie folgt sehen:

Wenn Sie den Wert von erhalten möchten Entry, binden wir das Modell dafür. Dann können wir den Wert von MVVM erhalten .

Erstellen Sie beispielsweise ein Beispiel für Modelldaten in ContentPage:

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

Ändern Sie dann in SecurityEntry.Xaml wie folgt:

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

Der Effekt zeigt:

Answer 2

Sie können den Eintrag ein- / ausblenden, indem Sie den Bool-Wert von IsPassword Ihres Eintrags ändern. txtConfPassword.IsPassword = wahr oder falsch, je nach Ihren Anforderungen auf der Registrierungsseite.