PasswordBox control in Silverlight using C#

In this article we will learn how to create and use PasswordBox control in the Silverlight 4.

PasswordBox control

PasswordBox control is used to hide the characters a user is typing for privacy and security reasons. It is essential to use this control whenever you are receiving a password from a user.

Creating a Password in XAML

<PasswordBox Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="PasswordBox1" VerticalAlignment="Top" Width="120" />

The Width and Height attributes of the PasswordBox element represent the width and the height of a Password. The Name attribute represents the name of the control, which is a unique identifier of a control.

The default view of the PasswordBox control looks like this.

Figure1

Creating a PasswordBox control at run time

       PasswordBox pwd = new PasswordBox();

        pwd.Height = 30

        pwd.Width = 200

        pwd.MaxLength = 25

        pwd.PasswordChar = "*"

        LayoutRoot.Children.Add(pwd)

Properties - These are the following properties of the PasswordBox control.

1. Width - The Width property of the Passwordbox control represent the width of a PasswordBox.
2. Height -  The Height property of the Passwordbox control represent the width of a PasswordBox.
3. MaxLength - The MaxLength property is used to get and set the maximum number of characters you can enter in a PasswordBox.
4. Password property - The Password property is used to get and set the current password in a PasswordBox.
5. PasswordChar - PasswordChar property is used to get and set the masking character for the PasswordBox. The default masking character is a dot(.).
6. VerticalAlignment - VerticalAlignment is used to Gets or sets the vertical alignment characteristics applied to this element when it is composed within a parent element such as a panel or items control.
7. HorizontalAlignment - HorizontalAlignment is used to Get or set the horizontal alignment characteristics applied to this element when it is composed within a parent element.
8. Name - Name property is used to Get and set the identifying name of the element.

Using the property PasswordChar

 

The default masking character is a dot(.) but we can change masking character . to * or other char.

Foe example we change property PasswordChar =* and then enter password in the box. It will looks like this.

Output looks like this.

Figure2

Using MaxLength property

The maxLenth property Defines the maximum number of character that we enter in the PasswordBox control.

For example - suppose we sets the MaxLenth property = 6 then it will take only 6 char after 6 char it will stop to take character automatically.

Output looks like this.

Figure3

Using Background property

Set the background property to display the background color of the control.

Output looks like this.

Figure4

We can also select a background image in PasswordBox control.

Figure5

XAML Code

<PasswordBox.Background>

<ImageBrush ImageSource="/SilverlightApplication34;component/Images/flowers-image.jpg" />

</PasswordBox.Background>

 

Using foreground property

Set the Foreground property to display the char color of the control.

Output looks like this.

Figure6