Reto Windows Phone: Mi primera interfaz Metro
¿Qué necesito para empezar?
Para empezar a programar aplicaciones Windows Phone necesitamos descargarnos las Windows Phone developer tools 7.1 Beta. Con estas herramientas se puede desarrollar tanto para la versión 7 como para la versión 7.1 o Mango, que es la próxima actualización del sistema operativo.
La descarga incluye a parte de las herramientas para Windows Phone y el emulador, el SDK de Silverlight 4 y DRT, la actualización de las extensiones de XNA Game Studio 4.0, el SDK de Expresion Blend y los WCF Data Services Client para Windows Phone 7.1.
En caso de no tener una versión de Visual Studio 2010 Profesional o superior se instalará Visual Studio 2010 Express para Windows Phone junto con los demás componentes.
Recuerda que puedes participar por medio de twitter a @esmsdn o con el hashtag #retosmsdn.
¿Metro? ¿Qué es una interfaz metro?
Metro es el nombre del sistema de diseño de las interfaces de Windows Phone. El nombre es debido a que utiliza el mismo lenguaje visual que aparece en aeropuertos y en la señalización de las redes de metro. La meta de utilizar Metro es facilitar que los usuarios lleguen al contenido que deseen gracias al uso de una tipografía conocida por medio de un diseño simple y claro logrando una experiencia de usuario fluida.
¿Qué proyecto elijo?
Una vez instaladas las herramientas nos aparecerá, al crear un nuevo proyecto en Visual Studio 2010, un nuevo tipo de plantilla denominado “Silverlight for Windows Phone”. Nos da la opción de elegir entre diversos tipos de proyectos. Destacan 4 tipos que explicaremos a continuación.
La opción Windows Phone Application nos creará un proyecto de Windows Phone con una página simple que usaremos para empezar a crear nuestra aplicación.
Si optamos por Windows Phone Panorama Application tendremos una aplicación Panorama que es un control con un conjunto de pantallas continuas dando una sensación panorámica, de ahí el nombre, ofreciendo una forma única de ver los controles, datos y servicios mediante el uso de un largo Canvas horizontal que se extiende más allá de los límites de la pantalla.
La Windows Phone Pivot Application tiene como función principal mostrar una serie de datos utilizando cada ítem del control para dar una visión distinta de ellos. Como ejemplo podemos dar una aplicación de visualizar los correos en la que en el primer ítem veremos todos los mensajes, en el siguiente sólo los no leídos, los urgentes, etc. Lo utilizaremos para filtrar, proporcionar diversas vistas de unos mismos datos o visualizar distintos conjuntos de datos.
Por último tenemos la posibilidad de crear videojuegos con XNA para Windows Phone con el proyecto de 3D Graphics Application.
¡Hola Windows Phone!
Crear el proyecto
Vamos a crear nuestra primera aplicación Windows Phone. Para ello crearemos un nuevo proyecto Windows Phone Application y le daremos un nombre (HolaMundo). Al continuar nos aparece un mensaje para que seleccionemos la plataforma para la que vamos a desarrollar. Seleccionamos para Windows Phone 7.1.
Por defecto Visual Studio 2010 nos mostrará 3 paneles. A la izquierda el visor de diseño en el que podremos ver la vista previa de cómo va a quedar nuestra página en el teléfono. En la parte central la vista XAML del diseño. XAML es una sintaxis XML declarativa para la creación de diseños y elementos visuales. A la derecha está el explorador del proyecto con los archivos que se han creado.
Diseñar la página
Para crear nuestro “Hola Mundo” abriremos el panel de herramientas que debe aparecer en la parte izquierda (si no aparece ir al menú view-> toolbox) y seleccionaremos un elemento TextBlock arrastrándolo hasta la vista de diseño (se aconseja anclar el cuadro de herramientas para poder visualizar el panel de vista de diseño y poder arrastrar el control).
Esto nos creará el elemento en el Grid principal de la pantalla y se mostrará los cambios en el XAML. En el XAML debe aparecer lo siguiente:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="30" HorizontalAlignment="Left" Margin="108,109,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" />
</Grid>
La propiedad Margin dependerá de la posición hasta la que habéis arrastrado el TextBlock. Lo siguiente que haremos es editar ese elemento. Con el elemento seleccionado presionamos F4 y se abrirá la ventana de propiedades. Buscamos la propiedad Text y escribiremos “Hola Mundo”, después editaremos la propiedad Width a 300, Height a 70 y el tamaño de letra a 50.
También es posible editarlo directamente sobre el código XAML:
<TextBlock Height="70" HorizontalAlignment="Left" Margin="12,12,0,0" Name="textBlock1" Text="Hola Mundo" VerticalAlignment="Top" Width="300" FontSize="50" />
Windows Phone Emulator en marcha
Ya tenemos nuestra primera interfaz creada para el “Hola Mundo”. Ahora ejecutaremos para ver el resultado final en el emulador.
Hay que tener seleccionado Windows Phone Emulator antes de ejecutar para que se lance en emulador. Si tenemos seleccionado “Windows Phone Device” nos dará un error.
La primera vez que se ejecute se tendrá que iniciar el emulador lo que retardará la ejecución unos segundos. Una vez iniciado se empezará con el despliegue de la aplicación en el emulador y después se ejecutará.
¿Qué controles tenemos?
Navigation Controls
Las aplicaciones de Windows Phone están basadas en un modelo de página en el que el usuario navega a través de diferentes páginas con contenido. La aplicación tiene un control Frame que contiene las páginas por las que va navegando el usuario y éstas a su vez tienen el contenido y controles a mostrar. Hablaremos sobre el sistema de navegación en el próximo post.
Layout and Grouping Controls
Existen un tipo de controles que sirven de contenedores para posicionar otros elementos visuales dentro de ellos o agruparlos. Todos los elementos visuales están dentro de un control principal llamado “LayoutRoot” y en él se van a ir añadiendo los contenedores que se necesiten. La mayoría de estos derivan de a clase Panel como por ejemplo StackPanel, Canvas y Grid.
El contenedor Grid da la posibilidad de organizar los elementos que contiene por medio de filas y columnas eligiendo dónde van a ir. Por otro lado en el StackPanel se colocan conforme se van introduciendo, ya sea verticalmente u horizontalmente, uno a continuación del otro.
Text Controls
Los controles de texto podremos mostrar cadenas de texto en pantalla. Hay diferentes tipos indicados para un uso en concreto.
Tenemos los TextBlock que se usan para mostrar texto simple de sólo lectura, los TextBox son para introducir texto corto aunque también tiene la opción de multi-línea para texto más largo, y por último el PasswordBox que enmascara el texto que introduce el usuario, usado normalmente para introducir contraseñas.
Button y Selection Controls
Los botones y los controles de selección permiten al usuario elegir entre elementos o navegar por la aplicación. Estos controles derivan de ContentControl pudiendo añadir al contenido de éstos objetos como otros controles.
Dentro de este tipo de controles está el control Consolas, que permite capturar la entrada del usuario por medio del evento Click, y el HyperlikButton que representa un botón que se muestra como un hipervínculo para navegar a una página de la misma aplicación o externa.
Los controles de selección que tenemos son el CheckBox, el RadioButton y el Slider que representa una barra para poder elegir entra un rango de valores.
List Controls
Existe un control llamado ListBox que permite mostrar una lista de elementos y seleccionarlos haciendo clic en ellos.
Image, Map, and Media Controls
También tenemos controles para mostrar recursos como son imágenes, mapas o contenido multimedia que formar una parte importante de las aplicaciones ricas. Para ello tenemos los controles Image, Map, y MediaElement.
HTML Controls
Podemos añadir un navegador web a nuestra aplicación para mostrar contenido HTML. Este navegador es el elemento WebBrowser.
Progress and Message Controls
Las aplicaciones tienen que informar al usuario sobre el estado en que se encuentra como por ejemplo el progreso de una larga operación o indicar mensajes de error. Utilizando la ProgressBar podemos mostrar una barra de progreso (determinada o indeterminada) para informar al usuario que se está realizando una operación y que espere a su finalización. Con el control Popup y MessageBox podemos mostrar un mensaje al usuario. La ventaja del Popup es que podemos añadir controles dentro de él.
Toolkit Controls
Para acabar con los controles tenemos el Silverlight for Windows Phone Toolkit en CodePlex. Son controles, código y ejemplos que podemos utilizar en nuestras aplicaciones.
Tu turno… ¡el Reto! – Domina Metro
Ahora aplica lo aprendido, intenta crear esta interfaz, ¡es muy fácil!
Ayuda: <StackPanel Margin="0,0,0,20" Width="432" Orientation="Vertical o Horizontal">
Recursos: Centro de desarrollo de Windows Phone
Solución: https://msdn.microsoft.com/es-es/windowsphone/hh487014
Participa: twitter de @esmsdn o hashtag #retosmsdn.
José Perona – @JVPerona - Developer Evangelist Jr.
Ver el segundo Reto Windows Phone: Navegar por tu aplicación
Ver el tercer Reto Windows Phone: Control Panorama