TextBox control styling tips
.png "Ee371168.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(en-us,Expression.30).png")
The TextBox control can be used to obtain input from a user, or to display text. It is generally used for editable text, although it can also be set to read-only. TextBox objects can display multiple lines and wrap text to the size of the control.
As with all controls, the TextBox control can be modified to look very different from its default appearance. By default, the TextBox control looks like the following:
.png "Ee371168.f77261da-feb5-4693-b764-582a9cc93c12(en-us,Expression.30).png")
TextBox control properties of interest
The TextBox control is a text control, so you can display text in the TextBox control by setting the Text property under Common Properties in the Properties panel.
You can make the TextBox control read-only by selecting the IsReadOnly property.
You can let users add new line characters to text they enter by selecting the AcceptsReturn property. If you do this, you might also want to enable scroll bars by setting the HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties.
To specify font size, font face, and so on, set the properties under Text in the Properties panel. You can even add custom fonts to your project and embed them to be used in your text controls.
For more information, see Drawing text.
You can set these properties in the following ways:
Set the properties of the object After you draw a TextBox object on the artboard, you can set the properties of the object directly. If you want several TextBox 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 "Ee371168.94fa7fc4-4f3e-4e84-9ba1-287f1b894371(en-us,Expression.30).png")
of the TextBox object, any TextBox object that uses that style will use those values by default. You can overwrite the values for a specific object.For more information, see Create a style.
Parts of the TextBox template
The TextBox control uses one template to define its appearance: the TextBox Template. The single part of the template plays a role in the appearance and behavior of the TextBox object to which the template is applied.
Other objects can exist in the template to dress up the appearance of the TextBox control, but the part listed in the following table is tied to its behavior in a contract.
To view the parts of the template, open the Parts panel while modifying the template. In the Objects and Timeline panel, an icon .png "Ee371168.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 "Ee371168.62c81ec5-2055-4556-a068-2dc300675ac9(en-us,Expression.30).png")
Part name |
Object type |
Description |
|---|---|---|
ContentElement |
FrameworkElement |
An object that displays text. This part is mandatory. |
The other objects in the TextBox template are used to change the appearance of the TextBox control in various states.
States of the TextBox control
By default, the TextBox 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 TextBox template:
State name |
Description |
|---|---|
Normal |
The appearance of the TextBox control when there is no interaction with the control. |
MouseOver |
The appearance of the TextBox control when the user moves the pointer over it. |
Pressed |
The appearance of the TextBox control when the user clicks it, or when the control has focus and the user presses ENTER or SPACEBAR. |
Disabled |
The appearance of the TextBox control when the IsEnabled property is set to False. |
The TextBox control can be in one of the following two states of the FocusStates state group:
State name |
Description |
|---|---|
Unfocused |
The appearance of the TextBox control when it does not have keyboard focus. |
Focused |
The appearance of the TextBox 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 TextBox control. |
The TextBox control can be in one of the following three states of the ValidationStates state group:
State name |
Description |
|---|---|
Valid |
The appearance of the TextBox control when it valid. |
InvalidUnfocused |
The appearance of the TextBox control when it is invalid and does not have keyboard focus. |
InvalidFocused |
The appearance of the TextBox 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 "Ee371168.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 TextBox control
To modify the template of a TextBox control, do one of the following:
Draw a TextBox
.png "Ee371168.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 TextBox 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 TextBox template requires:
To display text in your TextBox control, include a TextBlock
.png "Ee371168.42165963-00f7-4a33-abcd-b0849edebada(en-us,Expression.30).png")
with the objects that will make up the appearance of your TextBox control.When you convert artwork that contains a TextBlock object into a template for a TextBox control, the Make Into Control command does the following:
Puts a ScrollViewer object that represents the ContentElement part into the template in the place of the TextBlock control.
Copies layout properties from the TextBlock control to the ContentElement object.
Copies typographical properties from the TextBlock control to the style of the TextBox control. (The style wraps around the template.)
Copies the Text property from the TextBlock control to the TextBox object to which the template is applied.
Alternatively, you can assign an object to the ContentElement part after you convert your objects into a control template. For more information, see Assign template parts to objects.
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 TextBox, name your template, and select the location where the template will be stored.
After you click OK, Microsoft Expression Blend enters template-editing mode and displays the objects that make up your TextBox control. You can continue to modify your template in this 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 TextBox 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 [TextBox] in the breadcrumb bar at the top of the artboard, or click Return scope to
.png "Ee371168.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.30).png")
in the Objects and Timeline panel.
For information about applying your new TextBox template to other TextBox objects, see Apply or remove a resource.
References
You can find detailed information about the properties and events of the Microsoft Silverlight TextBox control at the Silverlight Control Gallery on MSDN.
See also
Concepts
Styling tips for common Silverlight controls