Xamarin 显示/隐藏密码

Question

我正在尝试在 Xamarin Forms 中创建注册表单。我正在尝试让用户看到密码输入中的文本输入。

对于这个问题，我很抱歉，但我是 Xamarin 的新手。

我看到了这个解决方案：Entry show and hide password

但我不知道把代码放在哪里。

我将它添加到 MainActivity.cs，但是当我使用我的 android 手机调试它时它不起作用。

有人可以帮我将这段代码实现到我的 RegisterPage。

这是我输入密码的代码。

<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

实现这一点的简单方法是在 Xamarin Forms 中使用 Entry 和 ImageButton 自定义视图，然后您无需在每个平台中使用自定义效果。

例如，创建一个 SecurityEntry ContentView。

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>

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

然后我们可以在一些ContentPage.Xaml的Xaml中使用它：

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

现在我们可以看到效果如下：

如果需要获取Entry的Value，我们为它绑定模型。然后我们就可以通过MVVM得到值了。

例如，在 ContentPage 中创建示例 Model 数据：

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

然后在SecurityEntry.Xaml中修改如下：

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

效果会显示：

Answer 2

您可以通过更改条目的 IsPassword 的布尔值来显示/隐藏条目。 txtConfPassword.IsPassword = true or false 根据您在注册页面的要求。