Quickstart: Text for Windows Phone

July 21, 2014

Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

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.

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.

TextBlock - Hello World sample

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.

TextBlock - Text formatting

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

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 following illustration shows the result of the previous XAML.

TextBox

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.

Show:
© 2014 Microsoft