Tipo de Controles

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

 

Hay varios tipos de controles que se pueden utilizar en tus aplicaciones de Silverlight en Windows Phone 7. Algunos de estos controles están disponibles para aplicaciones de escritorio de Silverlight y algunos otros para las aplicaciones de sólo Windows Phone. Este tutorial clasifica los diferentes tipos de controles disponibles de Silverlight para aplicaciones de Windows Phone 7 y en detalles de cómo agregar contenido a los controles. 

Este tutorial contiene las siguientes secciones:

Controles de navegación

Las aplicaciones de Silverlight para Windows Phone se basan en un modelo de página en la que los usuarios navegan hacia delante a través de diferentes páginas de contenido. Este modelo se basa en un control de marco de aplicación, que contiene controles de página, para que los usuarios puedan navegar a través de ella. Las páginas contienen controles de distribución, que a su vez contienen controles adicionales. Para obtener más información sobre el marco y la navegación de página, consulta Estructura y Navegación para Windows Phone [http://msdn.microsoft.com/en-us/library/ff402536%28v=VS.92%29.aspx]. La siguiente tabla muestra los controles utilizados para proporcionar la navegación para las aplicaciones de Windows Phone.

Control

Localización

Notas

 

PhoneApplicationFrame

 

Microsoft.Phone

Es el control principal de la aplicación de Silverlight para Windows Phone. Este control admite la navegación hacia y desde las páginas.

PhoneApplicationPage

Microsoft.Phone

Encapsula el contenido que se puede navegar por PhoneApplicationFrame.

La siguiente imagen muestra la estructura y modelo de la página

clip_image002

Controles de Agrupación y Distribución

Los controles que contienen a su vez otros controles, se refieren a menudo como controles de distribución. Estos son contenedores de otros controles y objetos visuales. Como su nombre lo indica, controles de distribución se utilizan para colocar los objetos contenidos en la pantalla. Un control de distribución sirve como la raíz de diseño de la aplicación dentro de una página. Todos los demás objetos en la interfaz de usuario figuran en esta raíz. Puedes utilizar los controles adicionales de distribución dentro de la raíz del mismo, según sea necesario. Cuando se crea una nueva aplicación de Windows Phone, un Grid sirve como la raíz de distribución, la cual contiene controles adicionales que servirán de título del panel de contenido. Vamos a añadir controles adicionales de distribución para el panel de contenido. Además, deberás considerar si la aplicación va a soportar la orientación horizontal o vertical cuando selecciones los controles de distribución para tu aplicación. Para obtener más información acerca de la orientación, consulta Orientaciones de la pantalla.

La mayoría de los controles de distribución derivan de la clase Panel. Algunos ejemplos de controles de distribución que derivan de Panel son el StackPanel, Canvas y Grid. Hay dos controles adicionales, Panorama y Pivot que se pueden utilizar para diseñar aplicaciones para el teléfono. Los controles Pivot y Panorama derivan de ItemsControl y fueron creados específicamente para su uso en aplicaciones de Silverlight para Windows Phone. Estos controles son diferentes a los elementos típicos ya que deben contener un número reducido de elementos, en comparación con un típico control de elementos, que puede contener una lista larga.  Estos controles permiten a los usuarios deslizar vertical y horizontalmente los elementos.

La siguiente tabla enlista los controles que son usados para la distribución y la agrupación de elementos en aplicaciones para Windows Phone. 

Control

Localización

Notas

Border

Microsoft.Phone.Controls

Proporciona un borde, un fondo, o ambas cosas a otro control.

 

Canvas

 

Microsoft.Phone.Controls

Proporciona una superficie para mostrar elementos hijos en coordenadas específicas en el Canvas.

 

ContentControl

 

Silverlight System.Windows

Representa un control contenedor con solo un elemento hijo.  El elemento hijo es un objeto, para que el hijo pueda contener un control de distribución con elementos hijos adicionales.

 

 

Grid

 

 

Silverlight System.Windows

Proporciona una superficie compuesta de filas y columnas para mostrar elementos hijos. Tú defines las filas y las columnas del grid y luego asignas los objetos a una fila y columna específicas dentro del grid.

 

Panorama

 

Microsoft.Phone.Controls

Crea una vista panorámica de los elementos que puede ser deslizada de lado a lado.  Silverlight para Windows Phone únicamente.

 

 

 

Pivot

 

 

 

Microsoft.Phone.Controls

Proporciona una forma rápida de administrar las vistas de grandes conjuntos de datos dentro de una aplicación. El control se puede utilizar como una interfaz de navegación para el filtrado de grandes conjuntos o cambiar entre las vistas.   Silverlight para Windows Phone únicamente.

 

StackPanel

 

 

Silverlight System.Windows

Proporciona una superficie para mostrar elementos secundarios en una línea, ya sea horizontal o verticalmente.

 

 

 

 

VirtualizingStackPanel

 

 

 

 

Silverlight System.Windows

Proporciona un control de panel para apilar que acomoda el contenido visible en la pantalla, creando elementos de la IU como sea necesario.  VirtualizingStackPanel tiene mejor rendimiento que un StackPanel cuando trabaja con un conjunto grande de elementos.

 

ScrollViewer

 

Silverlight System.Windows

Proporciona una superficie de desplazamiento para mostrar un elemento hijo.

Para obtener más información acerca de los controles de diseño de Silverlight, consulta Distribución de la pantalla.  Para obtener más información consulta:

Control Pivot

http://msdn.microsoft.com/en-us/library/microsoft.phone.controls.pivot%28VS.92%29.aspx

 

Control Panorama

http://msdn.microsoft.com/en-us/library/microsoft.phone.controls.panorama%28VS.92%29.aspx

 

 Control Pivot

[http://msdn.microsoft.com/en-us/library/ff941098%28VS.92%29.aspx]

 

Resumen general Panorama

[http://msdn.microsoft.com/en-us/library/ff941104%28VS.92%29.aspx]

La siguiente imagen muestra algunos de los controles utilizados en el diseño tanto de orientación vertical como horizontal. En esta imagen, un StackPanel y un Canvas se anidan en un Grid, que utiliza la columna y base de diseño del sistema de la fila.

clip_image004

 

 

 

 

 

La siguiente imagen muestra el panorama de control y cómo se puede utilizar para presentar una visión sobre el contenido horizontal.

clip_image006

Controles de Texto

Los controles de texto suelen mostrar contenidos de una cadena. Hay diferentes tipos de controles de texto para diferentes propósitos. Para obtener más información, consulta Trabajando con texto en Windows Phone.  La siguiente  tabla muestra los controles de texto  para las aplicaciones de Windows Phone.

Control

Localización

Notas

 

TextBlock

 

Silverlight System.Windows

Utilice esta opción para mostrar, fragmentos de sólo lectura del texto. El contenido se establece con la propiedad Text.

 

 

TextBox

 

 

Silverlight System.Windows

Normalmente se utiliza para las entradas de textos cortos. Sin embargo, también se pueden utilizar para la introducción de texto de varias líneas. El contenido se establece con la propiedad Text.

 

PasswordBox

 

Silverlight System.Windows

Enmascara el texto que un usuario introduce.  El contenido se establece con la propiedad Password y se enmascara con la propiedad PasswordChar.

 

La siguiente imagen muestra los controles de texto:

clip_image008

Botones y controles de Selección

Los botones y controles de Selección permiten al usuario elegir fácilmente los elementos, o navegar a través de la aplicación. La mayoría de los controles tipo botón y de Selección se derivan de ContentControl, lo que significa que agregan contenido a ellos con la propiedad Content. El contenido de la propiedad es de tipo Object, por lo que hay pocas restricciones en lo que un control de contenido puede contener. Debido a que muchas clases que derivan de Object pueden contener otros controles, pueden crear contenidos anidados en un ContentControl.  Por ejemplo, puede establecer el contenido de la propiedad de un botón a un StackPanel que contiene una imagen y un texto. En la siguiente tabla se muestran los controles de tipo botón:

Control

Localización

Notas

 

Button

 

Silverlight System.Windows

Un control que responde a la entrada del usuario y dispara un evento Click. El contenido es establecido con la propiedad Content.

 

 

 

 

HyperlinkButton

 

 

 

 

 

Silverlight System.Windows

Representa un control de botón que muestra un hipervínculo. Cuando haces clic, el HyperlinkButton permite a los usuarios moverse a una página web en la misma aplicación web o a una página web externa.  Su contenido se establece con la propiedad Content y el URL a navegar se establece con la propiedad NavigateUri.

 

En la siguiente tabla se muestran los controles que puedes utilizar para especificar selecciones:

Control

Localización

Notas

 

 

CheckBox

 

 

Silverlight System.Windows

Representa un control que puedes  activar o desactivar. La casilla de verificación ofrece opcionalmente un estado indeterminado.  Su contenido se establece con la propiedad Content.

 

 

RadioButton

 

 

Silverlight System.Windows

Te permite seleccionar una única opción de una lista. Cuando los botones de radio se agrupan son mutuamente excluyentes. Su contenido se establece con la propiedad Content.

 

 

Slider

 

 

Silverlight System.Windows

Representa un control que te permite seleccionar entre una gama de valores a lo largo de una pista. La propiedad Value determina la posición en la pista.

 

La siguiente imagen muestra los controles de tipo botón y Selección:

clip_image010

Controles de Lista

La siguiente tabla muestra el control que puedes utilizar para mostrar una lista de elementos. Para obtener más opciones para mostrar una lista de elementos, consulta la sección Controles del Toolkit más adelante en este tutorial.

Control

Localización

Notas

 

 

ListBox

 

 

Silverlight System.Windows

Muestra una lista de elementos que puedes seleccionar haciendo clic en él. Su contenido se establece con las propiedades Items o ItemsSource.  La apariencia de cada elemento puede ser personalizada utilizando un DataTemplate.

 

La siguiente imagen muestra el control ListBox desplegando una lista de elementos:

clip_image012

Imagen, mapa, y controles de medios

Desplegar recursos, como imágenes, mapas y medios son una parte importante de la construcción de una interfaz de usuario para las aplicaciones de Windows Phone. La siguiente tabla te muestra los controles para mostrar recursos como imágenes, mapas y archivos de medios.

Control

Localización

Notas

 

Image

 

Silverlight System.Windows

Muestra una imagen. El contenido se establece con la propiedad Source. Las aplicaciones de Windows Phone soportan formatos de imagen PNG y JPG.

 

 

 

 

 

Map

 

 

 

 

 

Bing

Muestra un mapa de Bing. Puedes arrastrar el control desde el cuadro de herramientas para tu aplicación. Debes obtener una clave de Bing Maps para tu aplicación. Se establece el tipo de mapa que se muestra mediante el uso de la propiedad Mode, y controlas cómo el mapa es ampliado mediante la propiedad ZoomLevel.

 

 

 

MediaElement

 

 

 

Silverlight System.Windows

Utiliza este control para reproducir audio y vídeo. El contenido se establece con la propiedad Source. Por motivos de rendimiento, no debes utilizar este control para reproducir efectos de sonido en tu aplicación. En su lugar, es mejor usar la clase SoundEffect del framework XNA.

La siguiente ilustración muestra los controles Image, Map, y MediaElement desplegando contenido.

clip_image014

Controles HTML

Puedes utilizar el control WebBrowser para mostrar HTML en tus aplicaciones. Hay diferencias entre el control WebBrowser para Silverlight y el control WebBrowser para Windows Phone.  Para obtener más información, consulta las Diferencias entre WebBrowser para Silverlight y WebBrowser para Windows Phone.  La siguiente tabla te muestra el control para la visualización de HTML. 

Control

Localización

Notas

 

WebBrowser

 

Microsoft.Phone.Controls

Muestra código HTML renderizado.  Su contenido se establece con la propiedad Source.

 

Control WebBrowser

La siguiente imagen muestra el control WebBrowser para visualizar contenido:

clip_image016

Controles de Progreso y Mensajes

Una aplicación bien diseñada proporciona información al usuario, tal como el progreso de una operación o un mensaje indicando que ha ocurrido un error. La siguiente tabla muestra los controles que puedes utilizar para mostrar el progreso y mensajes al usuario. 

 

Control

Localización

Notas

 

 

ProgressBar

 

 

Silverlight System.Windows

Muestra el progreso actual de una operación para el usuario. Puedes utilizar este control para informar de los avances concretos de una operación, o simplemente para indicar el progreso en modo indeterminado. El uso de este control en modo indeterminado puede disminuir el rendimiento de su aplicación. Microsoft tiene una alternativa no soportada llamada PerformanceProgressBar.

 

 

 

 

 

Popup

 

 

 

 

 

Silverlight System.Windows

Muestra el contenido como una superposición sobre el contenido existente. Esto es útil para mostrar temporalmente contenido que ejecuta una tarea específica. Normalmente, se crea un UserControl y se establece como la propiedad Child del Popup.  Establece la propiedad IsOpen a true para mostrar el control Popup.  Una alternativa menos flexible para el control Popup es el componente MessageBox.

La siguiente imagen muestra un control Popup que contiene un TextBlock, un Button y un ProgressBar en su modo normal e indeterminado.

clip_image018

 

Controles del Toolkit

Puedes encontrar controles adicionales en el Toolkit de Silverlight para Windows Phone http://silverlight.codeplex.com/ en CodePlex. Este sitio incluye los controles, el código fuente y ejemplos. En la siguiente tabla enlista los controles que se encuentran actualmente en el toolkit. El toolkit también contiene componentes adicionales, tales como transiciones de página y un servicio para gestos.

Control

Localización

Notas

 

 

 

AutoCompleteBox

 

 

 

Microsoft.Phone.Controls.Toolkit

Representa un control que proporciona un cuadro de texto para la entrada del usuario y una lista desplegable que contiene posibles coincidencias sobre la entrada en el cuadro de texto. Muy similar al control de Silverlight AutoCompleteBox

 

ListPicker

 

Microsoft.Phone.Controls.Toolkit

Combina un cuadro de texto que muestra el elemento seleccionado en ese momento con una lista desplegable de valores que un usuario puede seleccionar.

LongListSelector

Microsoft.Phone.Controls.Toolkit

Proporciona un cuadro de lista avanzada que soporta agrupamiento y virtualización.

ContextMenu

Microsoft.Phone.Controls.Toolkit

Ofrece un menú en la posición. Se utiliza para proporcionar un menú cuando el usuario toca y sostiene un control.

DatePicker

Microsoft.Phone.Controls.Toolkit

Te permite seleccionar una fecha.

TimePicker

Microsoft.Phone.Controls.Toolkit

Te permite seleccionar una hora.

ToggleSwitch

Microsoft.Phone.Controls.Toolkit

Proporciona una etiqueta y una configuración de activado / desactivado.

 

 

WrapPanel

 

 

Microsoft.Phone.Controls.Toolkit assembly

Proporciona un control de distribución que posiciona los elementos hijos de manera secuencial hasta que no hay espacio suficiente, después de eso proporciona una nueva fila para el resto de elementos hijos.