Home > MVA, Tutoriales, WP7 > Usando Controles

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.

image

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

image

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.  

image

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.

image

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

image

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.

image

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.

image

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.

image

 

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.

image

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.

image

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.

image

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, establecer las propiedades del control y la creación de manejadores de eventos.  A continuación aprenderás más sobre los controles que puedes utilizar para un propósito determinado: Tipo de Controles.

  1. Wpatricio70
    June 19th, 2011 at 07:59 | #1

    Hola

    Disculpen, qué control se usa para obtener una interfaz parecida a esta? http://www.templatehelp.com/preset/pr_preview.php?i=32363&pr_code=249mjr55y9sEMJY9s5P6i087t4KocU

  2. June 20th, 2011 at 14:44 | #2

    Qué tal, pues parece que ése es un custom control, hecho por la misma persona que te vende la plantilla. No parece muy complicado, sólo tendrías que hacer dos tipos de controles, los del inicio que te muestran la foto, con una animación cuando aparecen y otra en el mouse over y los que te muestran la página, donde parece que es una sola animación.

  3. Sh3y0
    May 6th, 2012 at 08:24 | #3

    Opino lo mismo que Arturo mas que todo es cuestion de diseño como que estuvieras trabajando con objetos en Flash y haces un nuevo elemento a tu gusto y con animacion a tugusto, solo es necesario especificarle si quieres que sea imagen, botton, etc. y luego agragas la funcionalidad que quieras que tenga tu objeto.

  4. ehsaenz
    May 31st, 2012 at 01:14 | #4

    Yo necesito implementar un datagrid, acabo de bajar el Silverligth 5 toolkit creo que trae uno.

  5. yefferson
    October 2nd, 2012 at 20:57 | #5

    Buenas, primero que todo, el curso es bueno, pero falta aclarar ciertas cosas, por ejemplo yo instale todas las herramientas y la primera ves no me funcionó, me generaba un error. Desinstalé todo y volví a instalar de nuevo y me funciono, muy bueno. realize varios ejemplos de los temas propuestos, luego fui al tema de controles y plantillas el video y me pidio actualizar el silverligth, Lo actualice y al momento de seguir con el proyecto en visual c# me volvio a generar el mismo error, no me carga el diseñador ni el codigo xaml. la verdad seria tedioso volver a instalar todo de nuevo y pues hacerlo cada ves que vaya a mirar un video y actualice silverligth y tener que volver a hacer lo mismo. muchas gracias espero que me ayuden y ojala haya una solucion y pues que mi comentario no sea borrado como el comentario que publique hace unos dias sobre el mismo error. muchas gracias

  6. david
    February 20th, 2013 at 08:24 | #6

    Buenas, estoy empezando este curso… cuando ejecuto las aplicaciones hasta ahora vistas, tanto en el emulador como en mi telefono me aparecen unos numeros y letras en la parte derecha del telefono, aparte del contenido de mi aplicacion,como hago para evitar eso