Tutorial: Conociendo Windows Phone!

MSP: Carola Velazquez

Primeramente, será necesario que instales lo necesario para poder realizar las prácticas,

hazlo desde el siguiente link:

http://download.microsoft.com/download/E/D/C/EDCF1B19-3D98-48C3-B176-

D20AF072497F/WPSDK71.iso

Visita el blog: http://mspcarojujuy.wordpress.com/

Conociendo Windows Phone!

Abre Microsoft Visual Studio para crear un nuevo proyecto en Windows Phone:

1. Selecciona “Archivo” y la opción “Nuevo proyecto”.

2. Se abrirá una ventana donde debes seleccionar “Aplicación de Windows Phone”,

Coloca un nombre para el proyecto. Ten en cuenta la ubicación del proyecto.

3. Selecciona la opción “SO Windows Phone 7.1” y presiona Aceptar

4. Observa la pantalla que aparece:

En caso que el Toolbox o Cuadro de Herramientas no aparezca presione el botón como se

muestra:

Puede observar 5 partes:

• Toolbox: Muestra los controles que pueden utilizarse en la aplicación.

Selecciona un control y haz click

sobre el Design View en la

posición que deseas y se colocará

• Design View: Se visualizan los controles y como se ve la aplicación, es como una “vista

previa” de la aplicación.

• XAML View: Se muestra el código XAML de la aplicación.

XAML es un lenguaje sencillo basado en XML que se utiliza para crear la interfaz de

usuario en aplicaciones Windows Phone. Al arrastrar un control del Toolbox o Cuadro

de Herramientas al Design View, se genera código XAML. También puede colocar

controles mediante código XAML, el cual se visualiza en el Des¡gn View. Este lenguaje

sirve para insertar controles y establecer sus propiedades.

• Solution Explorer: En el explorador de Soluciones se encuentran todos los archivos

que pertenecen a la Solución, una solución es un espacio donde pueden colocar varios

proyectos relacionados.

� Properties (AppManifest.xml): Archivo manifest de aplicación, necesaria para

generar el paquete de aplicación.

� Properties (AssemblyInfo.cs): Contiene el nombre y versión metadatos que

está incrustado en el ensamblado generado assembly que se genera.

� Properties (WMAppManifest.xml): Un archivo manifest que incluye los

metadatos específicos relacionados con una aplicación, incluyendo

características específicas disponibles sólo para Silverlight para Windows

Phone.

� References: Lista de las bibliotecas que proporcionan servicios y la

funcionalidad que requiere la aplicación de trabajo.

� App.xaml - App.xaml.cs: Define el punto de entrada de la aplicación, inicializa

los recursos de la aplicación y muestra la interfaz de usuario.

� ApplicationIcon.png: Imagen que corresponde al icono de la aplicación en la

lista de aplicaciones del teléfono (List View). Su tamaño es de 63x63px.

� Background.png: Imagen que corresponde al icono de la aplicación en la

pantalla de inicio (Start Screen) donde están ancladas las aplicaciones más

utilizadas por el usuario. Su tamaño es de 173x173px.

� MainPage.xaml - MainPage.xaml.cs: Define una página con la interfaz de

usuario de la aplicación.

� SplashScreenImage.jpg: Imagen que corresponde al fondo de la pantalla. Su

tamaño es de 480x800px.

• Propierties Window: Consta de dos pestañas, “Propiedades” y “Eventos”.

Las “Propiedades” permiten especificar la apariencia, contenido u otros atributos de

los controles. Establecer las propiedades del control, en la ventana de propiedades o

en el código XAML. Por ejemplo si se quiere cambiar el color de un cuadro de texto, se

establece la propiedad Foreground sobre el control.

Selecciona el control y luego en la pestaña de propiedades, donde veras todas las

propiedades que puedes modificar para ese control.

Los “Eventos” de la ventana de propiedades permiten crear un controlador de

eventos.

Cada control tiene eventos que le permiten responder a las acciones del usuario. Por

ejemplo, un botón contiene un click, 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

código XAML, para esto selecciona el control y 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.

Al hacer doble click sobre el evento, se abrirá el archivo MainPage.xaml.cs, donde se

ve el método que corresponde al evento, dentro de este método es donde se coloca

en código C# la funcionalidad que se desee incluir, como se muestra:

Se agregó una línea de código que cambiará el nombre que se ve en el botón una vez

que se presione.

Button1.Content = “Presionado”;

Emulador de Windows Phone

El emulador de Windows Phone permite correr la aplicación como funcionaria en un

celular, para poder utilizarlo, se debe elegir “Depurar” y la opción “Iniciar depuración”

Y se visualiza el emulador:

Como se puede observar, al presionar el botón, cambia su nombre; ésta es una funcionalidad

básica pero sirve de ejemplo para que veas cómo funciona el emulador.

El Emulador suele consumir recursos, para evitar la demora, cuando quieras continuar con el

proyecto, presiona Detener Depuración, lo que provocará que regreses a la edición del

proyecto, pero dejará abierto el Emulador, listo para una nueva depuración, sin consumir

mayores recursos.

Componente de Interfaz de Windows

Tres de las pantallas más importantes, ahora v

� Lock Screen: muestra el

la hora y el día, el usuario podrá elegir la imagen de fondo a su elección

principal que se muestra.

� Start Screen: muestra las tiles de las aplicaciones que han sido ancladas. Esto

brindan notificaciones constantemente.

aplicaciones que el usuario ancló de la lista de todas las aplicaciones que posee,

muestran información relevante con unos elementos, esto corresponde al Diseño

Metro, el cual se verá más adelante.

� List View: Es la lista de todas las aplicaciones que se tienen, desde donde se pueden

anclar aplicaciones para que sean visibles en la Start Screen.

Para anclar una aplicación desde List View, se debe presionar unos segund

aplicación y aparecerá un menú donde debes seleccionar “Anclar al inicio”, y se

obtendrá una pantalla como se muestra, con la aplicación anclada a Start Screen.

Windows Phone

Tres de las pantallas más importantes, ahora veremos que es cada una de ellas:

muestra el texto importante y símbolos de información inmediata,

la hora y el día, el usuario podrá elegir la imagen de fondo a su elección

principal que se muestra.

muestra las tiles de las aplicaciones que han sido ancladas. Esto

brindan notificaciones constantemente. Es decir, en la Start Screen se muestran las

aplicaciones que el usuario ancló de la lista de todas las aplicaciones que posee,

muestran información relevante con unos elementos, esto corresponde al Diseño

ro, el cual se verá más adelante.

Es la lista de todas las aplicaciones que se tienen, desde donde se pueden

anclar aplicaciones para que sean visibles en la Start Screen.

Para anclar una aplicación desde List View, se debe presionar unos segund

aplicación y aparecerá un menú donde debes seleccionar “Anclar al inicio”, y se

obtendrá una pantalla como se muestra, con la aplicación anclada a Start Screen.

eremos que es cada una de ellas:

texto importante y símbolos de información inmediata, como

la hora y el día, el usuario podrá elegir la imagen de fondo a su elección. Es la pantalla

muestra las tiles de las aplicaciones que han sido ancladas. Estos tiles

Es decir, en la Start Screen se muestran las

aplicaciones que el usuario ancló de la lista de todas las aplicaciones que posee,

muestran información relevante con unos elementos, esto corresponde al Diseño

Es la lista de todas las aplicaciones que se tienen, desde donde se pueden

Para anclar una aplicación desde List View, se debe presionar unos segundos sobre la

aplicación y aparecerá un menú donde debes seleccionar “Anclar al inicio”, y se

obtendrá una pantalla como se muestra, con la aplicación anclada a Start Screen.