Quickstart: Text for Windows Phone

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

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

This topic contains the following sections.

• TextBlock
• TextBox
• PasswordBox
• Related Topics

TextBlock

The TextBlock is the primary control for displaying read-only text in Windows Phone apps. 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.

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

The following illustration displays the result of the previous XAML.

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.

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

For more information about TextBlock, see Text and fonts for Windows Phone and TextBlock.

TextBox

You can use a TextBox control to enter and edit single-format and multi-line text. You can use the Text property to set the text in a TextBox. In the following code 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.

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

//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;
    }
}

'The foreground color of the text in WatermarkTB is set to Magenta when WatermarkTB
'gets focus.
Private Sub WatermarkTB_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.
Private WatermarkTB_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

The following illustration shows the result of the previous XAML.

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.

See Also

Other Resources

Quickstart: Creating a user interface with XAML for Windows Phone 8

Layout for Windows Phone 8

How to change the on-screen keyboard input scope for Windows Phone 8

Speech recognition for Windows Phone 8