TextBox control styling tips

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

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:

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

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

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.

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 **, 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:

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.

1. 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"/>
   

2. 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>
   

3. Add a closing Grid tag (</Grid>) after the code that you just pasted.

4. 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.

5. 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