Trabajando con texto en Windows Phone

Trabajando con texto en Windows Phone

Este artículo es una traducción del artículo original encontrado en: http://create.msdn.com/en-US/education/quickstarts/Working_with_Text_on_the_Windows_Phone.

Silverlight para Windows Phone te ofrece varios controles para el renderizado de texto, junto con un conjunto de propiedades para darle formato. Los controles basados ​​en texto disponibles en Silverlight son TextBlock, TextBox y PasswordBox. Este tutorial te muestra cómo puedes utilizar estos controles para mostrar e introducir texto. 

Este artículo contiene las siguientes secciones:

• TextBlock
• TextBox
• Distribución del SIP en un TextBox
• PasswordBox

TextBlock

El TextBlock es el control principal para mostrar texto de sólo lectura en aplicaciones de Windows Phone. Puedes mostrar texto en un control TextBlock mediante el uso de su propiedad  Text.

El siguiente  XAML te muestra cómo definir un TextBlock y establecer una cadena como la propiedad Text.

XAML

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

La siguiente ilustración muestra el resultado del XAML anterior.

También puedes mostrar una serie de cadenas en un TextBlock, donde cada una tiene un formato diferente. Puedes hacer esto utilizando el elemento Run para mostrar cada cadena con su formato y separando cada elemento Run con el elemento LineBreak.

El siguiente XAML muestra cómo definir varias cadenas de texto con formato diferentes en un TextBlock, mediante el objeto Run, separado con un 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>

En la siguiente ilustración se muestra el resultado del XAML anterior:

TextBox

Puedes utilizar un TextBox (cuadro de texto) para introducir y editar texto de un solo formato y texto de múltiples líneas. En el siguiente ejemplo, hay tres cuadros de texto. Al introducir texto en el primer TextBox, este mismo texto es mostrado en el segundo TextBox. Esto se implementa mediante el evento TextChanged. El tercer TextBox muestra los datos con marca de agua. Para implementar el texto con marca de agua, puedes utilizar diversas propiedades de las fuentes tales como  Foreground y FontSize, y eventos tales como GotFocus y LostFocus.

Para probar este ejemplo, haz clic, y escribe en la primera y tercera caja de texto.

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

Al hacer clic en el TextBox la marca de agua se quita y aparece el cursor listo para la entrada de datos.

</TextBlock>

<TextBox x:Name="WatermarkTB" Text="Search"

Foreground="Gray" GotFocus="WatermarkTB_GotFocus"

LostFocus="WatermarkTB_LostFocus" />

</StackPanel>

C#

// El siguiente método muestra el texto introducido de ReadWriteTB en ReadOnlyTB.

private void ReadWriteTB_TextChanged(object sender, RoutedEventArgs e)

{

  ReadOnlyTB.Text = ReadWriteTB.Text;

}

// El foreground del texto en WatermarkTB se establece en Magenta cuando WatermarkTB obtiene el 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;

  }

}

// El foreground del texto en WatermarkTB se establece en azul cuando WatermarkTB pierde el focus. Además, si SearchTB pierde el focus y no hay texto escrito, se muestra el texto "Search" en la pantalla.

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;

}

}

Distribución del SIP en un TextBox

La manera principal en la que se escribe texto en una aplicación de Windows Phone es usando un pequeño teclado en pantalla llamado SIP. El teclado SIP se abre deslizándose de forma automática desde la parte inferior de la pantalla cuando un control modificable, como un cuadro de texto es activado. Cuando un usuario pulsa fuera del control de edición, se desplaza una lista, o si presiona el botón atrás, el teclado es cerrado deslizándose hacia abajo en la parte inferior de la pantalla. Si el teléfono tiene un teclado de hardware (que es una opción del fabricante del teléfono) y es desplegado, el teclado SIP se cerrará automáticamente. Puedes especificar la distribución del teclado SIP, que te proporciona acceso de entrada fácil a los caracteres esperados por la aplicación según el contexto. Por ejemplo, cuando utilizas el SIP para introducir un código postal sólo querrás ver las teclas numéricas. Puedes especificar la distribución del teclado para un TextBox utilizando la propiedad InputScope.

En la siguiente tabla se muestran algunos de los diseños comúnmente utilizados en el SIP y el correspondiente InputScopeNameValue que se especifica en el XAML o código.

Hay más de 60 ámbitos de entrada diferentes. Para obtener una lista completa de los valores InputScope compatibles con Windows Phone 7, consulta el tema InputScopeNameValue.

El siguiente ejemplo muestra cómo se puede establecer el ámbito de entrada para un TextBox mediante el uso de XAML y 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;

PasswordBox

Puedes utilizar el PasswordBox para introducir contraseñas. El usuario no puede ver el texto escrito; solo los caracteres claves que se muestran en el texto. Puedes utilizar la propiedad Password para obtener o establecer la contraseña, y usar la propiedad PasswordChar para especificar el carácter para la contraseña. 

Para obtener más información sobre el control PasswordBox consulta el tema PasswordBox.

¿Qué sigue?

Ahora que estás familiarizado con los componentes básicos de la interfaz de usuario de los controles y el texto, es el momento de posicionarlos en donde quieras en tu aplicación: Distribución en la pantalla.