Usando Controles

Usando Controles

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

Para la creación de interfaz de usuario (UI) de aplicaciones de Silverlight para Windows Phone 7, se utilizan controles tales como Buttons (botones), Text boxes (cuadros de texto), y Drop-down lists (listas desplegables). Los controles de Windows Phone están diseñados para compartir muchas características, normalmente, se utiliza las siguientes cuando se trabaja con controles:

• Se agrega un control a la aplicación de interfaz de usuario
• Se puede establecer propiedades, como Width, Height o Foreground
• Puede agregarse algo de código de modo que realice algo

Este tutorial describe este patrón de uso de los controles y contiene las siguientes secciones:

· Ejemplo de control

· Agregar un control

· Ajuste del nombre de un control

· Establecer las propiedades de control

· Creación de un controlador de eventos

· ¿Qué sigue?

Ejemplo de Control

En el siguiente ejemplo se muestra un TextBox (cuadro de texto) y un controlador de evento asociado TextChanged. Para probar este ejemplo, escribe algún dato en el cuadro de texto y un mensaje de texto aparecerá debajo del mismo.

Agregar un control

Tú puedes agregar un control a una aplicación de Windows Phone de varias maneras:

• Agregando el control de la caja de herramientas en Visual Studio.
• Agregando el control en la vista XAML.
• Agregando el control en el código.

La siguiente ilustración establece una muestra de cómo Visual Studio se utiliza para crear aplicaciones de Silverlight para Windows Phone. En Visual Studio, al agregar y manipular los controles de la aplicación, se pueden utilizar muchas de las características del programa, incluyendo la caja de herramientas, la vista diseño, la vista XAML, y la ventana de propiedades. Para obtener más información acerca de la vista de diseño de Visual Studio, consulta Diseñador de Silverlight para Visual Studio [http://msdn.microsoft.com/es-es/library/ff356887%28v=VS.95%29.aspx].

La caja de herramientas de Visual Studio, muestra muchos de los controles que se pueden utilizar en la aplicación. La siguiente ilustración señala algunos de los controles de Windows Phone en la caja de herramientas.

Consejo

El Silverlight Toolkit para Windows Phone contiene controles adicionales para el desarrollo del teléfono. El Silverlight Toolkit contiene controles que se encuentran en diversas etapas de desarrollo. A medida que maduran, algunos controles en toolkit se mueven al runtime y algunos controles se eliminan por completo. Para obtener más información y descargar estos controles adicionales, consulta el Silverlight Toolkit para Windows Phone http://silverlight.codeplex.com/.

Para agregar un control en la aplicación haz doble clic en la caja de herramientas. También puedes arrastrar el control a la vista Diseño. Al hacer doble clic en el cuadro de texto, se añadirá el siguiente XAML.

XAML

<TextBox Height="72" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBox1"

Text="TextBox" VerticalAlignment="Top" Width="460" />

Ajuste del nombre de un control

Para trabajar con un control en el código, se utiliza un nombre. Puedes cambiar el nombre de un control mediante el establecimiento de su propiedad, nombre. También puedes configurar el nombre en la ventana de propiedades de Visual Studio o en el XAML. En la siguiente imagen se muestra cómo cambiar el nombre del control seleccionado mediante el cuadro de texto en la parte superior de la ventana propiedades.

La siguiente ilustración muestra cómo puedes cambiar el nombre de un control en la vista XAML, cambiando el nombre de atributo.

Establecer las propiedades de control

Puedes utilizar las propiedades para especificar la apariencia, contenido, u otros atributos de los controles. Puedes también establecer las propiedades del control, en la ventana de propiedades, en XAML o en el código. Para cambiar el color de un cuadro de texto, se establece el control de propiedad Foreground. En la siguiente ilustración se muestra cómo establecer la propiedad Foreground utilizando la ventana de propiedades.

En la siguiente ilustración, se muestra cómo establecer el Foreground en la vista XAML. Observe la ventana de Visual Studio IntelliSense que se abre para ayudarle con la sintaxis.

A continuación se muestra el código XAML resultante después de que la propiedad Foreground es establecida.

XAML

<TextBox Height="72" HorizontalAlignment="Left" Margin="10,10,0,0"

Name="MyTB" Text="TextBox" VerticalAlignment="Top" Width="460"

Foreground="Red" />

El siguiente ejemplo muestra cómo establecer la propiedad Foreground en el código.

C#

SolidColorBrush scb = new SolidColorBrush(Colors.Red);

MyTB.Foreground = scb;

Algunas propiedades, tales como ancho, altura o margen de un elemento, pueden cambiar, simplemente seleccionando y manipulando el control en la vista diseño. La siguiente ilustración muestra algunas de las herramientas de cambio de tamaño disponibles en la vista diseño.

Creación de un controlador de eventos

Cada control tiene eventos que le permiten responder a las acciones del usuario. Por ejemplo, un botón contiene un clic, que le produce un evento cuando el botón es pulsado. Puedes crear un controlador de eventos en la ventana de propiedades o en el XAML. También puedes crear un controlador de eventos de forma manual en el código. Para obtener más información acerca de eventos, consulta Información general sobre eventos de Silverlight http://msdn.microsoft.com/es-es/library/cc189018%28v=VS.95%29.aspx.

Puedes crear un controlador de eventos utilizando la pestaña Eventos de la ventana propiedades. Para crear un controlador de eventos, selecciona el control y, a continuación, haz clic en la ficha de eventos en la parte superior de la ventana de propiedades. En la ventana de propiedades se enumeran todos los eventos disponibles para ese control. En la siguiente ilustración se muestran algunos de los eventos de un cuadro de texto.

Para crear un controlador de eventos con el nombre predeterminado, simplemente haz doble clic en el nombre del evento en la ventana de propiedades. El controlador de eventos se creará y el archivo de código subyacente se abrirá en el editor de código. El siguiente código se mostrará en el controlador de eventos TextChanged para un TextBox llamado MyTB. Cuando el texto en el cuadro de texto se cambie, el texto de propiedad de TextBlock denominado MyBlock se cambia a You entered text!.

C#

private void MyTB_TextChanged(object sender, TextChangedEventArgs e)

{

MyBlock.Text = "You entered text!";

}

También puedes crear un controlador de eventos en XAML. En la vista XAML, escribe el nombre del evento que deseas controlar, y se mostrará una ventana de IntelliSense al comenzar a escribir. En la siguiente ilustración se muestra cómo especificar el evento TextChanged en XAML.

Una vez que hayas especificado el evento, puedes hacer doble clic en <New Event Handler> en la ventana de IntelliSense que aparecerá para crear un nuevo controlador de eventos con el nombre predeterminado. La siguiente imagen muestra la ventana de IntelliSense que aparecerá, para ayudarle a crear un nuevo controlador de eventos.

A continuación se muestra el XAML del evento TextChanged que se asocia con un controlador de eventos denominado MyTB_TextChanged .

XAML

<TextBox Height="72" HorizontalAlignment="Left" Margin="10,10,0,0"

Name="MyTB" Text="TextBox" VerticalAlignment="Top" Width="260"

Foreground"Red"

TextChanged="MyTB_TextChanged" />

También puedes asociar un evento a su controlador en el código subyacente. El siguiente código muestra cómo hacer esto con C #.

C#

MyTB.TextChanged += new TextChangedEventHandler(MyTB_TextChanged);

¿Qué sigue?

Ahora conoces los aspectos básicos para agregar un control a tu aplicación, el establecimiento de las propiedades del control y la creación de controladores de eventos. A continuación aprenderás más sobre los controles que se pueden utilizar para un propósito determinado [Tipo de Controles.DOCX]