Xamarin 显示/隐藏密码

问题描述

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

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

我看到了这个解决方案:

如果需要获取Entry的Value，我们为其绑定model.然后我们可以通过MVVM得到这个值.

例如，在 ContentPage 中创建示例模型数据:

公共部分类 MainPage : ContentPage{公共字符串 TextValue { 设置；得到;}公共主页(){初始化组件();TextValue = "我来自模型";BindingContext = this;}}

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

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

效果会显示:

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>

解决方案

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:

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:

这篇关于Xamarin 显示/隐藏密码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！