Xamarin Show / Hide Password

Oct 08 2020

Saya mencoba membuat formulir pendaftaran di Formulir Xamarin. Dan saya mencoba untuk memungkinkan pengguna melihat input teks di Entri Kata Sandi.

Saya minta maaf untuk pertanyaan ini, tapi saya baru mengenal Xamarin.

Saya melihat solusi ini: Masuk tampilkan dan sembunyikan kata sandi

Tetapi saya tidak tahu di mana harus meletakkan kode.

Saya menambahkannya ke MainActivity.cs tetapi tidak berfungsi ketika saya men-debugnya menggunakan Ponsel Android saya.

Adakah yang bisa membantu saya menerapkan kode ini ke RegisterPage saya.

ini adalah kode saya untuk Kata Sandi Masuk.

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

Jawaban

JuniorJiang-MSFT Oct 09 2020 at 08:14

Cara mudah untuk mencapai yang dapat menyesuaikan Tampilan dengan Entrydan ImageButtondi Formulir Xamarin, maka Anda tidak perlu menggunakan Efek khusus di setiap platform.

Misalnya, buat SecurityEntry ContentView.

Kode Xaml :

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

kode .cs :

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

Kemudian kita bisa menggunakannya di Xaml dari Some ContentPage.Xaml :

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

Sekarang kita bisa melihat efeknya sebagai berikut:

Jika perlu mendapatkan Nilai Entry, kami mengikat model untuk itu. Kemudian kita bisa mendapatkan nilainya dengan MVVM .

Misalnya, buat contoh data Model di ContentPage:

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

Kemudian di SecurityEntry.Xaml modifikasi sebagai berikut:

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

Efeknya akan menunjukkan:

1 George Oct 08 2020 at 14:34

Anda dapat menampilkan / menyembunyikan entri dengan mengubah nilai bool dari IsPassword entri Anda. txtConfPassword.IsPassword = benar atau salah sesuai dengan kebutuhan Anda di halaman Pendaftaran.