See password

[Daniel]

Hi, 

Do you have this option ?

thanks,

[Lance | Manager Technical Support]

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

[Lance | Manager Technical Support]

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]

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 | Manager Technical Support]

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]

The problem was InputTransparent="True" that not fire the command.