PasswordBox control styling tips

Article
02/19/2013

JJ171030.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(fr-fr,VS.110).png

You can use the built-in PasswordBox control template to create a custom PasswordBox template. By default, the PasswordBox control looks like the following:

JJ171030.4e1556e5-03f0-4881-8283-8281cb11c978(fr-fr,VS.110).png

Parts of the PasswordBox template

The PasswordBox control has one part: the ContentElement part. This part is mandatory.

Conseil
To view the parts of the template, open the Parts panel while modifying the template.

States of the PasswordBox control

By default, the PasswordBox control can be in one of the following four states in the CommonStates state group, which you can view in the States panel when modifying a PasswordBox template:

State name	Description
Normal	The appearance of the PasswordBox control when there is no interaction with the control.
MouseOver	The appearance of the PasswordBox control when the user moves the pointer over it.
Disabled	The appearance of the PasswordBox control when the IsEnabled property is set to False.

The PasswordBox control can be in one of the following two states of the FocusStates state group:

State name	Description
Unfocused	The appearance of the PasswordBox control when it does not have keyboard focus.
Focused	The appearance of the PasswordBox control when it has keyboard focus. For example, a user might press the Tab key to cycle through the objects in your application until keyboard focus is on the PasswordBox control.

The PasswordBox control can be in one of the following three states of the ValidationStates state group:

State name	Description
Valid	The appearance of the PasswordBox control when it is valid.
InvalidUnfocused	The appearance of the PasswordBox control when it is invalid and does not have keyboard focus.
InvalidFocused	The appearance of the PasswordBox control when it is invalid and has keyboard focus.

Conseil
A state group contains the visual states that are part of the same logical category, and that cannot be displayed at the same time. For example, the CommonStates group includes states that relate to user interaction with an input device such as the mouse. Only one state in a state group can be displayed at a time, but a state from one state group can be displayed at the same time as a state in another state group.

A state group contains the visual states that are part of the same logical category, and that cannot be displayed at the same time. For example, the CommonStates group includes states that relate to user interaction with an input device such as the mouse. Only one state in a state group can be displayed at a time, but a state from one state group can be displayed at the same time as a state in another state group.

When you select a state, state recording is turned on, and any changes that you make will be recorded for that state. To turn off state recording, click the Record mode indicator JJ171030.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.110).png , or select Base in the States panel. To modify the appearance of your control when two separate states are active, you can pin a preview of a state in one state group while you modify a state in a different state group.

Template-binding

You can template-bind the Background, BorderBrush, Foreground, BorderThickness, or Padding properties. For more information, see Carry object properties through to the template.

To convert objects into a PasswordBox control

The following image is a design comprehensive (comp) of a PasswordBox:

PasswordBox

This example uses the XAML code in step 2 of the following procedure, which corresponds to the preceding graphic to create a custom password box by using the PasswordBox control template.

Open a new Microsoft Silverlight project. In Code view, locate the following code, and then delete the closing slash mark (/).
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

Copy and then paste the following code into your new project, after the code that you located in step 1.

<Grid Height="20" Width="120">
<Rectangle Fill="#FF333333" RadiusX="5" RadiusY="5"/>
<TextBlock Margin="5,0" Foreground="White" Text="*****" VerticalAlignment="Center"/>
</Grid>

Add a closing Grid tag (</Grid>) after the code that you just pasted.
In the Objects and Timeline panel, right-click Grid, and then click Make Into Control. In the Make Into Control dialog box, click PasswordBox, and then click OK.
In the Objects and Timeline panel, click Grid. In the Parts panel, double-click ContentElement.
Copy the VerticalAlignment and Margin properties of the TextBlock and paste them into the ContentElement. Click ContentElement in the Objects and Timeline panel, and then, in the Properties panel, do the following:
- **VerticalAlignment **Set to Center.
- **Margin **Set to the following:
  - Left 5
  - Right 5
  - Top 0
  - Bottom 0
In the Objects and Timeline panel, right-click TextBlock, and then click Delete.
In the Objects and Timeline panel, click Template, and then click **Return scope to **. With Style selected in the Objects and Timeline panel, in the Brushes category of the Properties panel, set Foreground to #FFFFFFFF.
In the Objects and Timeline panel, click **Return scope to **.
In the Properties panel, in the Password text box in the Common Properties category, type abcde.
In the Text category of the Properties panel, click Show advanced properties. In the PasswordChar text box, type *.
Build your project (Ctrl+Shift+B), and then test your project by pressing F5.