TextBox control styling tips

Article
02/19/2013

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

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

JJ170878.f77261da-feb5-4693-b764-582a9cc93c12(fr-fr,VS.110).png

Parts of the TextBox template

The TextBox 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 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.
ReadOnly	The appearance of the TextBox control when the IsReadOnly property is set to True.
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 is 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.

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 ** JJ170878.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, and Padding properties. For more information, see Carry object properties through to the template.

To convert objects into a TextBox control

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

TextBox

This example uses the XAML code in step 2 of the following procedure, which corresponds to the preceding graphic to create a custom text box by using the TextBox 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="Lorem" 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 TextBox, and then click OK.
Build your project (Ctrl+Shift+B), and then test your project by pressing F5.

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 Silverlight TextBox control at the Silverlight Control Gallery on MSDN.

Voir aussi

Concepts

Styling tips for common Silverlight controls

Styling a control that supports templates

Drawing text

Partager via