Un Hola Mundo en Windows Phone 7.1 “Mango”

Hace unas semanas publiqué este post sobre hacer un Hello World en Metro Style para Windows8. Allí vimos que es una programación muy sencilla basada en xaml para la descripción de la interface de usuario, y .Net para el código (en este caso en C#).

Ahora traigo exactamente el mismo ejercicio pero en un Windows Phone. Y así mostrar la enorme sencillez de su programación y la productividad del IDE, Visual Studio 2010.

Ale, vamos a ponernos a picar

Pre requisitos

Voy a suponer que es tu primer acercamiento al ecosistema de trabajo y voy a realizar la descripción de requisitos mínimos para poder instalar el SDK y todas las cosas que incluye.
Sistemas operativos: Windows 7, Windows Vista

Windows® Vista® (x86 y x64) con el Service Pack 2 – en todas sus ediciones excepto la Starter Edition
Windows 7 (x86 y x64) ? en todas sus ediciones excepto la Starter Edition
Al menos 4 GB de espacio libre en el disco duro de sistema.
3 GB RAM

El emulador de Windows Phone requiere de una tarjeta gráfica que soporte DirectX 10 o que pueda funcionar con un driver WDDM 1.1.

Si tu sistema cumple con esto requisitos, entonces te puedes descargar e instalar el Windows Phone SDK 7.1. No te olvides que si tienes alguna versión anterior, debes desinstalarla primero.

Dentro de este SDK viene para ser instalado los siguientes componentes:

Microsoft Visual Studio 2010 Express for Windows Phone
Emulador de Windows Phone
Windows Phone SDK 7.1 Assemblies
Silverlight 4 SDK y DRT
Windows Phone SDK 7.1 Extensions for XNA Game Studio 4.0
Microsoft Expression Blend SDK for Windows Phone 7
Microsoft Expression Blend SDK for Windows Phone OS 7.1
WCF Data Services Client for Window Phone

Microsoft Advertising SDK for Windows Phone

Así de completito es el SDK, y te permite desarrollar en tu ordenador de forma totalmente gratuita las aplicaciones que quieras o te atrevas a enfrentar para Windows Phone. Además, esta versión es compatible con la versión final del Visual Studio 2010 SP1.

Picando código

Para el ejemplo voy a utilizar el Visual Studio de desarrollo en donde tengo instalado el SDK, en vez del Visual Studio Express, pero los pasos son idénticos a excepción que los tipo de proyectos en donde seleccionar, en mi caso, es mucho mayor.

Creo un nuevo proyecto en C#, para Silverlight for Windows Phone, del tipo Aplicación Windows Phone, la más sencillita de todas. Y pulso aceptar.

Al rato, porque en mi portátil tarda un ratillo más bien largo, visualizo una pantalla partida en tres secciones. En la de la izquierda están los controles Silverlight, que son poquitos para este tipo de proyecto, seguido por el panel del centro en donde tengo la vista de diseño y a la derecha el código XAML de la vista anterior.

Si estuviéramos en una aplicación ASP.NET serian el fichero aspx y el fichero code behind aspx.cs.

A continuación pulso en el control TextBox y después pulso en la representación del móvil que tengo en pantalla. Así me aparece la caja de texto y la sitúo en donde me sea más cómodo. Lo mismo hago con un Botón al que, seleccionándolo en la vista de diseño, le cambio el texto a “Saluda”.

Si te parece oportuno, como hice yo, puedes seleccionar el textbox y en el código quitarle el texto a mostrar para que aparezca vacio según se abra la aplicación.


<!--ContentPanel. Colocar aquí el contenido adicional-->
 <grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <textbox Height="72" HorizontalAlignment="Left" Margin="-12,6,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="460" />
            <button Content="Saluda" Height="72" HorizontalAlignment="Left" Margin="-12,110,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
 </grid>

Fíjate, en la imagen de portada, que soy tiquismiquis, le he cambiado el texto que está encima del saludo y le he puesto “MI PRIMERA APLICACIÓN”.

Ahora sí, ahora seleccionamos otra vez el botón y pulsando al botón derecho accedo a sus propiedades. En donde selecciono la pestaña de eventos y, haciendo un doble clic, doy de alta el método que va a lanzarse al capturar el evento click del botón.

Verás como automáticamente se abre el code behind de la pantalla y estamos situados en el método recién creado. Aquí es tan sencillo como:


private void button1_Click(object sender, RoutedEventArgs e)
{
    PageTitle.Text = "Hola " + textBox1.Text;
}

Y ya está lista nuestra primera aplicación para Windows Phone. Probémosla.

Para ello tengo que iniciar la depuración, asegurándome que tengo seleccionado el Windows Phone Emulator como destino. Así conseguiré que arranque el emulador del teléfono que, después de un ratito pensando, arrancará y aparecerá mi aplicación en el menú de aplicaciones. Pulsando en ella, mientras carga se vé un relojito que no se mueve, llegaré a mi flamante pantalla en donde podré escribir el nombre a quien quiero saludar, con el teclado virtual, y pulsando Saluda, voala!