PasswordBox control styling tips
.png "Ee341382.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(en-us,Expression.30).png")
The PasswordBox control represents an object that can obtain input from a user while masking the characters that are being typed.
As with all controls, the PasswordBox control can be modified to look very different from its default appearance. By default, the PasswordBox control looks like the following:
.png "Ee341382.4e1556e5-03f0-4881-8283-8281cb11c978(en-us,Expression.30).png")
PasswordBox control properties of interest
The PasswordBox control is a text control. If you want to present the PasswordBox control with characters in it, you can modify the Password property under Common Properties in the Properties panel. The Password property will hold the text that the user types.
You can change the masking character that appears when users enter text into the PasswordBox control by changing the PasswordChar property, which appears when you click Show advanced properties .png "Ee341382.de239c9d-42ce-4f5e-83b9-5f9924c0431f(en-us,Expression.30).png")
at the bottom of the Text category of the Properties panel.
You can set these properties in the following ways:
Set the properties of the object After you draw a PasswordBox object on the artboard, you can set the properties of the object directly. If you want several PasswordBox objects to use the same values, set these properties in a style.
Set the properties in a style If you set these properties in the style
.png "Ee341382.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(en-us,Expression.30).png")
of the PasswordBox object, any PasswordBox object that uses that style will use those values. You can overwrite the values for a specific object.For more information, see Create a style.
To specify what happens when the user enters a password into the PasswordBox control, hook up the PasswordChanged event to an event handler.
For more information, see Writing code that will respond to events.
Parts of the PasswordBox template
The PasswordBox control uses one template to define its appearance: the PasswordBox Template. The single part of the template plays a role in the appearance and behavior of the PasswordBox object to which the template is applied.
Other objects can exist in the template to dress up the appearance of the PasswordBox control, but the part listed in the following table is tied to its behavior in a contract.
To view the parts of a template, open the Parts panel while modifying the template. In the Objects and Timeline panel, an icon .png "Ee341382.6cf58c39-edba-4a0e-acbc-1da272f9a387(en-us,Expression.30).png")
appears next to an object that is playing the role of a part in the Parts panel.
.png "Ee341382.5b6101ee-86c4-48c6-a025-664d28142285(en-us,Expression.30).png")
Part name |
Object type |
Description |
|---|---|---|
ContentElement |
FrameworkElement |
An object that displays masking characters as the user types a password. This part is mandatory. |
The other objects in the PasswordBox template are used to change the appearance of the PasswordBox control in various states.
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. |
Pressed |
The appearance of the PasswordBox control when the user clicks it, or when the control has focus and the user presses ENTER or SPACEBAR. |
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 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. |
Tip
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 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 recording button .png "Ee341382.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(en-us,Expression.30).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.
To convert objects into a PasswordBox control
To modify the template of a PasswordBox control, do one of the following:
Draw a PasswordBox
.png "Ee341382.343296b4-5c7d-4145-84cc-91b08ba67a1b(en-us,Expression.30).png")
on the artboard, and then create a copy of the default template.For more information, see Create or modify a template.
Design the look of your PasswordBox control by drawing objects or importing art, and then use the Make Into Control command.
If you use the Make Into Control command, follow these steps to make sure that you create all the objects that the PasswordBox control template requires:
Group your objects into a layout panel, select the layout panel, and then, on the Tools menu, click Make Into Control.
In the dialog box that appears, select PasswordBox, name your template, and select the location where the template will be stored.
For information about locations, see Create a resource.
After you click OK, Microsoft Expression Blend enters template-editing mode and displays the objects that make up your PasswordBox control.
If your template includes an object in which you want to display text, such as a TextBlock object, right-click the object, point to Make Into Part of PasswordBox, and then click ContentElement. Otherwise, in the Parts panel, double-click the ContentElement part to create a Grid object in your template to serve as the ContentElement part. Modify the properties in the Layout category of the Properties panel to display the new Grid object where you want it to be.
You can continue to modify your template in template-editing mode. For example, add or modify objects, or select a state in the States panel to modify the appearance of your template in that state.
Consider binding some of the brush properties of objects in your template to the following properties of the PasswordBox object that will eventually use your template:
Background
BorderBrush
Foreground
BorderThickness
For more information, see Carry object properties through to the template.
To exit template-editing mode, click [PasswordBox] in the breadcrumb bar at the top of the artboard, or click Return scope to
.png "Ee341382.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png")
in the Objects and Timeline panel.
For information about applying your new PasswordBox template to other PasswordBox objects, see Apply or remove a resource.
References
You can find detailed information about the properties and events of the Microsoft Silverlight PasswordBox control at the Silverlight Control Gallery on MSDN.
See also
Concepts
Styling tips for common Silverlight controls