See password

1 Answer 1776 Views
Entry
Daniel
Top achievements
Rank 1
Silver
Bronze
Daniel asked on 26 Apr 2022, 05:42 AM

Hi, 

Do you have this option ?

thanks,

1 Answer, 1 is accepted

Sort by
0
Lance | Senior Manager Technical Support
Telerik team
answered on 26 Apr 2022, 12:30 PM

Hello Daniel,

What you are showing in that screenshot is known as a PasswordTextBox or PasswordEntry. Although RadEntry supports entering passwords by using the IsPassword property, it is not a dedicated PasswordBox/PasswordEntry control that has an integrated toggle button.

To get such a thing, you can just put a button next to the RadEntry

<HorizontalStackLayout>
  <RadEntry/>
  <RadButton Text="Your Eye Font Icon" />
</HorizontalStackLayout>

then in the button's click event, toggle the IsPassword value

private void ButtonClick(...)
{
    MyEntry.IsPassword = !MyEntry.IsPassword;
}

 

Regards,
Lance | Manager Technical Support
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Lance | Senior Manager Technical Support
Telerik team
commented on 26 Apr 2022, 01:22 PM

As a follow up note, if you are not familiar with how to find emoji characters, here is a tip:

The eye icon is the following character 👁, which you can directly in your XAML (if you're using a modern code editor).

<telerik:RadButton Text="👁" />

 

Finally, if you want the button to be "inside" the same drawn border line, then you can wrap everything inside a RadBorder and hide the RadEntry's border. 

You may need to experiment for a bit to get it exactly the way you want, but here is a head start:

<telerik:RadBorder BorderThickness="1" BorderColor="Gray" CornerRadius="3">
    <HorizontalStackLayout Spacing="5">
        <telerik:RadEntry IsPassword="True" BorderThickness="0" />
        <telerik:RadButton Text="👁" TextColor="Gray" Clicked="ToggleIsPassword_OnClicked"/>
    </HorizontalStackLayout>
</telerik:RadBorder>

 

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 26 Apr 2022, 01:37 PM | edited

Hi,

I used this code , I tried also without validation and password not change


 <HorizontalStackLayout Grid.Row="3" Grid.Column ="0">
                <telerikMauiControls:RadEntry   x:Name="txtPassword" FontSize="14" Margin="0,15,0,0" Placeholder="Password"  HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="280" IsPassword="{Binding IsPassword, Mode=TwoWay}"  Text="{Binding Password, Mode=TwoWay}" 
                                              ValidationErrorMessage="{Binding PasswordValidationErrorMessage, Mode=TwoWay}" IsValueValid="{Binding PasswordIsValueValid, Mode=TwoWay}"/>
                    <telerik:RadButton  ImageSource="eye_blue.png" Command="{Binding PasswordCommand, Mode=TwoWay}" BackgroundImage="White" BorderThickness="0" InputTransparent="True" HorizontalContentAlignment="Center" VerticalOptions="CenterAndExpand" />
                </HorizontalStackLayout>

public LoginViewModel()
        {
            try
            {
                IsPassword = true;


private bool _isPassword
   public bool IsPassword
        {
            get { return _isPassword; }
            set
            {
                if (_isPassword != value)
                {
                    _isPassword = value;
                    OnPropertyChanged();
                }
            }
        }


        PasswordCommand = new Command(
              execute: () =>
              {
                  IsPassword = !IsPassword;

              });


Lance | Senior Manager Technical Support
Telerik team
commented on 26 Apr 2022, 04:06 PM

Hi Daniel,

It works for me, I recommend debugging the MVVM implementation itself. You can verify the problem is not related to the RadEntry or RadButton  this by doing the following:

  1. Replace RadButton with Button
  2. Replace RadEntry with Entry
  3. Re-run your tests and observe the same behavior

Here are some ideas to move forward

  • Make sure you are invoking any logic that is bound to the UI on the UI thread
  • Why is the Button command is using TwoWay databinding? This doesn't make sense for commands.
  • Switch to a Button clicked event and toggle MyViewModel.IsPassword to see if your data bindings are working

Debugging Pro Tip

Most of all use the debugger, this is your biggest friend! About 90% of the problems I see you having can be resolved with breakpoints. You've tried things and just give up when it isn't working and open a forum post... when placing a breakpoint in the code would have explained everything.

In today's case, put a breakpoint here:

Is it being hit?

  • No? then there is problem with the command binding
  • Yes? then there's a problem with the other bindings or the command was executed form a non-UI thread.

 

Here is the code I use to test




Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 27 Apr 2022, 07:10 AM

The problem was InputTransparent="True" that not fire the command.
Tags
Entry
Asked by
Daniel
Top achievements
Rank 1
Silver
Bronze
Answers by
Lance | Senior Manager Technical Support
Telerik team
Share this question
or