Windows Phone. Hola Mundo.

En esta entrada vamos a comenzar nuestro primer desarrollo para la plataforma Windows phone. Comenzaremos viendo que podemos hacer con la plataforma para finalizar realizando paso a paso todo lo necesario para conseguir el típico “Hola Mundo”.

En Windows phone tenemos dos frameworks disponibles:

  • Silverlight. Framework basado en Silverlight destinado a la creación de aplicaciones.
  • XNA. Framework basado en XNA para Windows destinado a la creación de videojuegos tanto 2D como 3D.

Desde la aparición de Mango  tenemos una tercera posibilidad creando aplicaciones mixtas utilizando tanto Silverlight como XNA. en este tipo de aplicaciones se suele utilizar Silverlight para la creación de la interfaz correspondiente a menus, botones simples, etc.

En esta entrada vamos a realizar nuestra primera aplicación Windows Phone, es decir, utilizaremos Silverlight.

Vamos a crear nuestro proyecto. Tras abrir Visual Studio pulsaremos sobre “New Project”:

Veremos la siguiente ventana:

Como se puede ver en la captura tenemos por defectos distintas plantillas de proyectos:

  • Windows Phone Application. Proyecto base más simple. Contamos con una simple página por defecto además de todos los iconos necesarios para la aplicación.
  • Windows Phone Databound Application. Este proyecto tiene una página con un control Listbox enlazado a una plantilla de datos. Se utiliza el patrón MVVM (hablaremos de él con detalle en futuras entradas).
  • Windows Phone Class Library. Este tipo de proyecto sirve para generar una librería de clases.
  • Windows Phone Panorama Application. Este tipo de proyecto nos incluye por defecto un control panorama del cual hablaremos bastante en próximas entradas. Para quien no conozca el control (échale un vistazo a la imágen inferior) diremos que permite tener un contenido que ocupe más ancho que el mostrado en la pantalla por el cual nos desplazaremos  horizontalmente de manera circular.

  • Windows Phone Pivot Application. Proyecto similar al anterior pero sustituyendo el control Panorama por un control Pivot. Hablaremos y realizaremos múltiples ejemplos del control Pivot en futuras entradas pero diremos de él que nos añade “pestañas” por las que nos podemos desplazar con gestos de manera horizontal.

Para nuestro proyecto elegiremos la primera opción, Windows Phone Application, asignando el “Hello World” al proyecto.

Tras finalizar la creación del proyecto veremos en el explorador de soluciones la siguiente estructura:

  • MainPage.xaml. Es la página principal creada por defecto.
  • MainPage.xaml.cs. Contiene el código correspondiente a la lógica de la interfaz del archivo MainPage.xaml.
  • AssemblyInfo.cs. Es un archivo de configuración que contiene información de suma importancia  como el nombre, descripción o la versión del programa, detalles del autor, etc.
  • AppManifest.xml. Es el manifiesto de la aplicación. Indica las librerías necesarias por la aplicación.
  • WMAppManifest.xml. Otro archivo con información. En él se indican datos como la ubicación de los íconos.
  • SplashScreenImage.jpg. Colocando una imágen con este nombre aparecerá durante el arranque de la aplicación. El proyecto trae una por defecto.
  • ApplicationIcon.png. Es la imágen que aparecerá en el listado de aplicaciones del móvil.
  • Background.png. Es la imágen que aparecerá cuando la aplicación sea anclada a la pantalla de inicio.

Nos centraremos en el archivo MainPage.xaml. Como podemos ver la extesión del fichero es .xaml. Para los que tengan experiencia con el desarrollo en .NET les será totalmente familiar.  Para los que no, XAML es un lenguaje declarativo pensado para la creación de interfaces gráficas. Ya se utilizaba para la creación de interfaces en WPF o Silverlight por ejemplo.

Nos centramos en el cuadro de herramientas (situado por defecto a la izquierda) donde seleccionaremos un botón y lo arrastraremos a la vista de diseño.

El código XAML correspondiente a la interfaz antes de arrastrar el botón era algo así:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
</Grid>

Tras arrastrar el botón:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Button Height="100" Background="Blue" Content="Saludar"/>
</Grid>

Nos dirigimos a las propiedades del botón (clic derecho sobre el control y pulsamos sobre propiedades). Seleccionamos la pestañas de eventos. Nos aparecerá el listado de eventos a los que puede responder el botón.

Para suscribirnos al evento Click del botón bastará con realizar doble clic sobre dicho evento.  Seremos redirigidos a la zona donde escribiremos todo el código que controlará y responderá a la interfaz de usuario, Mainpage.xaml.cs, creandose de manera automática el manejador del evento:

private void Button_Click(object sender, RoutedEventArgs e)
{

}

Añadiremos dentro del evento clic la lógica necesaria para mostrar un mensje tras pulsarlo. Para ello utilizaremos la clase estándar para mostrar mensajes en Windows Phone, MessageBox:

MessageBox.Show("Un saludo!");

Si volvemos al XAML donde definimos el botón veremos que se ha añadido de manera automática el evento clic del botón:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Button Height="100" Background="Blue" Content="Saludar" Click="Button_Click"/>
</Grid>

Llegado a este punto es hora de compilar nuestro proyecto y probarlo en el emulador (veremos en una entrada los requisitos y que debemos hacer para poder probar nuestras aplicaciones en un dispositivo real). Basta con pulsar el botón F5 y si todo ha funcionado correctamente podremos ver nuestra aplicación corriendo sobre el emulador.

¿Qué tal?. Sencillo, ¿verdad?.

Puedes ver a continuación en video el resultado final de nuestra primera aplicación para Windows Phone:

También puedes descargar el ejemplo utilizado:

Más información:

Blog MSDN: Reto Windows Phone: Mi primera interfaz Metro

AppHub (en inglés): Get Started Creating a Windows Phone Application

2 pensamientos en “Windows Phone. Hola Mundo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s