RadPasswordBox

The RadPasswordBox control is a control that masks the user’s characters.  It leverages features of the RadTextBox (Header, Watermark, ClearButton & ActionButton) but adds additional features:

• PeekButton (similar to the Windows 8 password peek feature)
• Checkbox (set to true will show text while typing)
• Validation (displays message for 4 different states: Valid, Invalid, Validating and NotValidated)

Getting Started

The first thing you need to do before using this control is add the following assemblies to your project:

• Telerik.Windows.Core.dll
• Telerik.Windows.Controls.Primitives.dll

Next, add the following namespace to your view’s page’s header you’ll be placing the PasswordBox:

xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"

Good, now you’re ready to place an instance of RadPasswordBox on your page. There are two ways to instantiate the control, from the XAML or from the code behind. I’ll focus mostly on the XAML route, but will mention the code behind methods as well.

Here is how to place the control:

<telerikPrimitives:RadPasswordBox x:Name="myRadPwdBox" />

or in c#

RadPasswordBox myRadPwdBox = new RadPasswordBox();

Now you have a default instance of the RadPasswordBox.

Using the Peek, Action and Clear buttons

There are some things you should know about the initial default state of a RadPasswordBox

• The PeekButton is set to Visible
• ActionButton and ClearButton are set to Collapsed
• The CheckBox is set to Collpased

The control was designed this way for you to get the most-used functionality without having to set any properties. However, there are many different ways to configure the control. I’ve written an example app that lets you manually toggle these properties to see what they look like. Watch this short demo:

As you can see, not all the buttons should be used at the same time. It depends on where you are using the PasswordBox and how the user will interact with it. Here are a few scenarios that make the most sense:

• PeekButton only- This is cleanest, most unobtrusive way to show the control.
• ClearButton & ActionButton with the CheckBox enabled – This scenario will give the user the ability to cancel their input in one click as well as display an inline icon (default is a theme aware arrow). The CheckBox gives the users the ability to show the text as they type.
• ActionButton and PeekButton

So what does this look like in the code? Take a look at this instance. I have toggled all of the buttons to Visible to demo their usage. I also enforce the length of the password with “MaxLentgh” property and set the header text with the “Header” property.

<telerikPrimitives:RadPasswordBox x:Name="radPasswordBox"
        Header="Enter your password"
        ActionButtonVisibility="Visible"
        ClearButtonVisibility="Visible"
        PeekButtonVisibility="Visible"
        MaxLength="16" />

You can also bind the properties to your view model like this instance:

<telerikPrimitives:RadPasswordBox x:Name="radPasswordBox"
           Header="This control's properties are bound to the VM"
           ActionButtonVisibility="{Binding Action, Converter={StaticResource BooleanToVisibilityConverter}}"
           ClearButtonVisibility="{Binding Clear, Converter={StaticResource BooleanToVisibilityConverter}}"
           PeekButtonVisibility="{Binding Peek, Converter={StaticResource BooleanToVisibilityConverter}}"
           MaxLength="16" />

You can customize the RadPasswordBox to fit your special design needs via a style binding, foreground/background properties and watermarking.

<telerikPrimitives:RadPasswordBox x:Name="customHeaderPwdBox"
        Style="{StaticResource MyCustomPwdBoxStyle}"
        Header="Custom Header Style"
        Watermark="watermark"
        BorderBrush="#BF0027FF"
        Foreground="#FFAE18BB" />

Download it the source code of the demo and explore my comments.

Before you can build or deploy it, you need to add the two Telerik references I mention at the top of this post. If you have any questions, please let me know.

HAPPY CODING!