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.

clip_image002

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:

clip_image004

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.

clip_image006

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.

Entrada

Descripción

Ilustración

Default

Es la distribución por defecto cuando no se especifica un ámbito de entrada. Muestra el diseño estándar QWERTY y convierte a mayúscula automáticamente la primera letra en una oración.

clip_image008

Text

Utiliza este diseño para el uso de todo tipo de texto estándar. Este diseño proporciona sugerencias de texto,  auto-corrección, apóstrofe automático, acentos automáticos y conversión automática a mayúsculas. Este diseño también tiene acceso a letras, números, símbolos y emoticonos basados ​​en ASCII. Puedes utilizar este diseño en campos como el correo electrónico y documentos. 

clip_image010

Chat

Utiliza este diseño cuando el usuario necesita escribir palabras estándar, jergas y abreviaturas. Este diseño proporciona sugerencias de texto mientras escribes y tocando en una palabra, auto-corrección, apóstrofe automático, acento automático, y auto-mayúscula en la primera letra de una oración. También tiene acceso a letras, números, símbolos y emoticones. Puedes utilizar este diseño en campos tales como SMS, mensajería instantánea y clientes Twitter.

clip_image012

URL

Utiliza este diseño cuando el usuario desee escribir una dirección URL. Este diseño desactiva todas las características de auto corrección, y proporciona una distribución de teclado Web con teclas “.com” e “Ir”

clip_image014

TelephoneNumber

Utiliza este diseño de 12 teclas para números de teléfono.

clip_image016

EmailSmtpAddress

Utiliza el diseño para las direcciones de correo electrónico. Incluye @ y .com,  y fácil acceso a números telefónicos.

clip_image018

CurrencyAmount

Utiliza este diseño para la entrada de cifras monetarias.

clip_image020

 

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.

9 thoughts on “Trabajando con texto en Windows Phone

  1. escrono

    en mi constructor de la pagina hice lo siguiente:
    textBox1.InputScope = new InputScope();
    textBox1.InputScope.Names.Add(new InputScopeName { NameValue = InputScopeNameValue.Number });

    por que al implementarlo en otro evento o función fuera del constructor no aplica?
    Gracias :D

  2. ANGELICA

    Este código:
    InputScope IPChat = new InputScope();
    InputScopeName IPNChat = new InputScopeName();
    IPNChat .NameValue= InputScopeNameValue.Chat;
    IPChat.Names.Add(IPNChat);
    TBChatWindow.InputScope = IPChat;

    va dentro de alguna función? o en que parte del código lo tenemos que poner?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">