App Hub
Hi, VisitorSign In

Visuals & Media

Make your applications visually appealing with images, animations, and media.

Sensors & Other Phone Specific Features

Use unique features of the phone, such the accelerometer, GPS, and camera, in your applications.

Beyond the QuickStarts

Working with Text on the Windows Phone
Silverlight quickstart for Windows Phone development

Silverlight for Windows Phone provides several controls for rendering text, along with a set of properties for formatting the text. The text-based controls available in Silverlight are TextBlock, TextBox, and PasswordBox. This QuickStart shows you how you can use these text controls to display and enter text.

This QuickStart contains the following sections:

TextBlock

The TextBlock is the primary control for displaying read-only text in Windows Phone applications. You can display text in a TextBlock control by using its Text property.

The following XAML shows how to define a TextBlock control and set its Text property to a string.

XAML

<TextBlock Text="Hello, world!" />

The following illustration displays the result of the previous XAML.

TextBlock

You can also display a series of strings in a TextBlock, where each string has a different formatting. You can do this by using a Run element to display each string with its formatting and by separating each Run element with a LineBreak element.

The following XAML shows how to define several differently formatted text strings in a TextBlock by using Run objects separated with a LineBreak.

XAML

<Grid>
<TextBlock FontFamily="Arial" Width="400" >
<LineBreak/>
<Run Foreground="Maroon" FontFamily="Courier New" FontSize="40">
Courier New 24
</Run>
<LineBreak/>
<Run Foreground="Teal" FontFamily="Times New Roman" FontSize="30" FontStyle="Italic">
Times New Roman Italic 18
</Run>
<LineBreak/>
<Run Foreground="SteelBlue" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
Verdana Bold 14
</Run>
</TextBlock>
</Grid>

The following illustration shows the result of the previous XAML.

Adding the Text Property

For more information about TextBlock, see Text and Fonts and TextBlock.

TextBox

You can use a TextBox control to enter and edit single-format and multi-line text. You can use the TextBox.Text property to set the text in a TextBox. In the following live sample, there are three text boxes. When you enter text in the first TextBox, the same text is displayed in the second TextBox. This is implemented by using the TextChanged event. The third TextBox displays a watermark text. To implement the watermark text, you can use various font properties, such as Foreground and FontSize, and events, such as GotFocus and LostFocus.

To try this live sample, click and type in the first and third text boxes.

Note: The live samples in this QuickStart use Silverlight running in the browser to simulate the behavior in Silverlight for Windows Phone. The actual behavior may be slightly different in the Windows Phone emulator or on a Windows Phone device.

Get Microsoft Silverlight

XAML

<StackPanel Background="Transparent">
<TextBlock Text="Type Text Here" />
<TextBox x:Name="ReadWriteTB" TextChanged="ReadWriteTB_TextChanged"
IsReadOnly="False" />
<TextBlock Text="Read Only TextBox" />
<TextBox x:Name="ReadOnlyTB" IsReadOnly="True" />
<TextBlock Text="Search Type TextBox" />
<TextBlock FontSize="17" TextWrapping="Wrap">
When you click inside the text box the watermark text is removed and the
cursor appears ready for input.
</TextBlock>
<TextBox x:Name="WatermarkTB" Text="Search"
Foreground="Gray" GotFocus="WatermarkTB_GotFocus"
LostFocus="WatermarkTB_LostFocus" />
</StackPanel>

C#

//The following method displays the text entered in ReadWriteTB in ReadOnlyTB.
private void ReadWriteTB_TextChanged(object sender, RoutedEventArgs e)
{
ReadOnlyTB.Text = ReadWriteTB.Text;
}
//The foreground color of the text in WatermarkTB is set to Magenta when WatermarkTB
//gets focus.
private void WatermarkTB _GotFocus(object sender, RoutedEventArgs e)
{
if (WatermarkTB.Text == "Search")
{
WatermarkTB.Text = "";
SolidColorBrush Brush1 = new SolidColorBrush();
Brush1.Color = Colors.Magenta;
WatermarkTB.Foreground = Brush1;
}
}
//The foreground color of the text in WatermarkTB is set to Blue when WatermarkTB
//loses focus. Also, if SearchTB loses focus and no text is entered, the
//text "Search" is displayed.
private void WatermarkTB _LostFocus(object sender, RoutedEventArgs e)
{
if (WatermarkTB .Text == String.Empty)
{
WatermarkTB.Text = "Search";
SolidColorBrush Brush2 = new SolidColorBrush();
Brush2.Color = Colors.Blue;
WatermarkTB.Foreground = Brush2;
}
}

Visual Basic

'The foreground color of the text in WatermarkTB is set to Magenta when WatermarkTB
'gets focus.
privateDim WatermarkTB As System.Void
_GotFocus(object, sender, RoutedEventArgs, e)
{If (WatermarkTB.Text = "Search") Then
WatermarkTB.Text = ""
Dim Brush1 As SolidColorBrush = New SolidColorBrush
Brush1.Color = Colors.Magenta
WatermarkTB.Foreground = Brush1
End If
'The foreground color of the text in WatermarkTB is set to Blue when WatermarkTB
'loses focus. Also, if SearchTB loses focus and no text is entered, the
'text "Search" is displayed.
privateDim WatermarkTB As System.Void
_LostFocus(object, sender, RoutedEventArgs, e)
{If (WatermarkTB.Text = String.Empty) Then
WatermarkTB.Text = "Search"
Dim Brush2 As SolidColorBrush = New SolidColorBrush
Brush2.Color = Colors.Blue
WatermarkTB.Foreground = Brush2
End If
'The following method displays the text entered in ReadWriteTB in ReadOnlyTB.
Private Sub ReadWriteTB_TextChanged(ByVal sender As Object, ByVal e As RoutedEventArgs)
ReadOnlyTB.Text = ReadWriteTB.Text
End Sub

SIP Layout in a TextBox

The main way by which you enter text in a Windows Phone application is by using a small onscreen keyboard, which is called a software input panel or SIP. The SIP keyboard opens by sliding up automatically from the bottom of the screen when an editable control such as a TextBox becomes active. When a user taps outside of the edit control, scrolls a list, or presses the Back Button, it closes by sliding down off the bottom of the screen. If a phone has a hardware keyboard (which is a phone manufacturer option) and it is deployed, the SIP keyboard will automatically close. You can specify the keyboard layout for the SIP, which provides you with easy access to the expected input characters based on the application context. For example, when you use the SIP to enter a postal code, you only want to see numeric keys. You can specify the keyboard layout for a TextBox by using the InputScope property.

The following table lists some of the commonly used SIP layout and the associated InputScopeNameValue that you specify in XAML or code.

Input Scope Description Illustration
Default This is the default layout when no input scope is specified. This displays the standard QWERTY layout and auto-capitalizes the first letter of a sentence. Adding the Text Property
Text Use this layout when the user will mostly type standard text. This layout provides text suggestions, auto-correction, auto-apostrophe, auto-accent, and auto-capitalization. This layout also has access to letters, numbers, symbols, and ASCII-based emoticons. You can use this layout in fields such as email and documents. Adding the Text Property
Chat Use this layout when the user uses this to type standard words, slang, and abbreviations. This layout provides text suggestions while typing and tapping on a word, auto-correction, auto-apostrophe, auto-accent, and auto-capitalizes the first letter of a sentence. This layout also has access to letters, numbers, symbols, and rich emoticons. You can use this layout in fields such as SMS, IM, and Twitter clients.Use this layout when the user will mostly type standard words, slang, and abbreviations. This layout provides text suggestions, auto-correction, auto-apostrophe, auto-accent, and auto-capitalization. This layout also has access to letters, numbers, symbols and rich emoticons. You can use this layout in fields such as SMS, IM, and Twitter clients. Adding the Text Property
URL Use this layout when the user must type an URL. This layout turns off all auto correct features and provides a web layout with .com and Go keys. Adding the Text Property
TelephoneNumber Use this 12-key layout for phone numbers. Adding the Text Property
EmailSmtpAddress Use this layout for email addresses. This layout includes @ and .com keys, and easy access to phone number layout. Adding the Text Property
CurrencyAmount Use this layout for currency input. Adding the Text Property

There are more than 60 different input scopes. For a complete list of InputScope values supported in Windows Phone, see the InputScopeNameValue topic.

The following example shows how you can set the input scope for a TextBox control by using XAML and C#.

XAML

<TextBox Text="HelloWorld">
<TextBox.InputScope>
<InputScope>
<InputScopeName NameValue="Chat" />
</InputScope>
</TextBox.InputScope>
</TextBox>

C#

InputScope IPChat = new InputScope();
InputScopeName IPNChat = new InputScopeName();
IPNChat .NameValue= InputScopeNameValue.Chat;
IPChat.Names.Add(IPNChat);
TBChatWindow.InputScope = IPChat;

Visual Basic

Dim IPChat As InputScope = New InputScope
Dim IPNChat As InputScopeName = New InputScopeName
IPNChat.NameValue = InputScopeNameValue.Chat
IPChat.Names.Add(IPNChat)
TBChatWindow.InputScope = IPChat

PasswordBox

You can use the PasswordBox control to enter passwords. The user can't see the entered text; only password characters that represent the text are displayed. You can use the Password property to get or set the password and use the PasswordChar property to specify the password character.

For more information on PasswordBox control see, PasswordBox topic.

See Also

What's Next

Now that you're familiar with the basic UI components of controls and text, it's time to position them where you want in your application: Layout QuickStart.

var gDomain='m.webtrends.com'; var gDcsId='dcschd84w10000w4lw9hcqmsz_8n3x'; var gTrackEvents=1; var gFpc='WT_FPC'; /*<\/scr"+"ipt>");} /*]]>*/
DCSIMG