TextBox control styling tips

Ee371168.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(en-us,Expression.40).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:

Ee371168.f77261da-feb5-4693-b764-582a9cc93c12(en-us,Expression.40).png

Parts of the TextBox template

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

tip noteTip

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.

tip noteTip

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 Ee371168.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(en-us,Expression.40).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.

  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 Ee371168.xtlink_newWindow(en-us,Expression.40).png on MSDN.

See also

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.
Show: