1 Answer, 1 is accepted
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.
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>
Rank 1
Silver
Bronze
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;
});
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:
- Replace RadButton with Button
- Replace RadEntry with Entry
- 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
Rank 1
Silver
Bronze