Windows Phone. Desarollo de Aplicaciones (Ejemplo)

5/16/2018 Windows Phone. Desarollo de Aplicaciones (Ejemplo) - slidepdf.com

http://slidepdf.com/reader/full/windows-phone-desarollo-de-aplicaciones-ejemplo 1

Windows PhoneDesarrollo de aplicaciones

Aroa Solana



Sinopsis

El presente texto pretende ofrecer al lector una visión acerca del desarrollo de aplicaciones para dispositivos

móviles que cuenten con el Sistema Operativo Windows Phone 7 de Microsoft. Los contenidos abarcan desde

el diseño de la interfaz de usuario utilizando Silverlight pasando por la gestión de eventos táctiles y texturas

junto con el enlace a colecciones, datos y su posterior presentación en pantalla.

Aroa Solana Ruiz es Microsoft Certif ied IT Professional en Database Developer, tam-

bién M icrosoft Cert if ied Technology Specialist en SQL Server 2005, .NET Framework

3.5, Windows Forms Applications, SQL Server 2005, al igual que Database Develop-

ment en SQL Server 2008.

Actualmente ostenta la cert if icación M CT (Microsoft Cert if ied Trainer) que la permite

imparti r un gran número de cursos oficiales de Microsoft y trabajar como formadoraen Alhambra-Eidos.

Ha impartido formación sobre la tecnología .NET, desarrollo de aplicaciones Win-

dows, Web, ADO, Distribuidas, WPF, WCF, WWF, Silverlight y UML, por otra parte

imparte formación en administración de bases de datos SQL Server y desarrollo de bases de datos SQL Server,

tanto en 2005 como en 2008. Además posee experiencia en J2SE y J2EE. Dentro de la gestión de procesos posee

la certificación ITIL V2 Foundations.



LuarnaWindows Phone. Desarrollo de aplicaciones

© Aroa Solana – Alhambra-Eidos

© De esta edición: 2011, Luarna Ediciones, S.L.

www.luarna.com

Madrid, mayo de 2011

ISBN: 978-84-15013-09-9

Versión 1.0 (25/ 05/ 2011)

«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la

autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos,www.cedro.org) si necesita fotocopiar, escanear o hacer copias digitales de algún fragmento de esta obra».



Windows Phone. Desarrol lo de apl icaciones

Aroa Solana



Página 5

Indice

1. INTRODUCCIÓN ............................................................................................................................................................................ 7

DESCRIPCIÓN GENERAL....................................................................................................................................................................... 7 ELHARDWARE.................................................................................................................................................................................. 8 SERVICIOSYSENSORES........................................................................................................................................................................ 9 PRIMERA APLICACIÓN ENSILVERLIGHT .................................................................................................................................................. 10 ARCHIVOSESTÁNDAR ENSILVERLIGHT................................................................................................................................................... 11

Temas ............................................................................................................................................................................................. 16 Puntos y Píxeles .............................................................................................................................................................................. 16

ELXAP ......................................................................................................................................................................................... 17 UN PROGRAMA XNA ....................................................................................................................................................................... 17 EJEMPLOS...................................................................................................................................................................................... 20

2.ORIENTACIÓN .............................................................................................................................................................................. 24

PANELDINÁMICO............................................................................................................................................................................ 24 EVENTOS DEORIENTACIÓN ................................................................................................................................................................ 29 EJEMPLO DERELOJ .......................................................................................................................................................................... 30 EJEMPLOS...................................................................................................................................................................................... 31

3.APLICACIONES TÁCTILES .............................................................................................................................................................. 39

MANEJOTÁCTIL CONXNA ................................................................................................................................................................ 39 INTERFAZGESTURE ENXNA ............................................................................................................................................................... 41 EVENTOSTÁCTILESEN SILVERLIGHT...................................................................................................................................................... 42 LOSEVENTOSDEMANIPULACIÓN ........................................................................................................................................................ 45

Eventos Enrutados .......................................................................................................................................................................... 46 Eventos como concepto de programación............................................................................................................................................... 48 Parámetro emisor (sender) y datos de evento ......................................................................................................................................... 49 La propiedad OriginalSource de RoutedEventArgs ................................................................................................................................... 49

La propiedad Handled ........................................................................................................................................................................ 50 COMPORTAMIENTOSEXTRAÑOS.......................................................................................................................................................... 50 EJEMPLOS...................................................................................................................................................................................... 51

4.TEXTURAS Y MAPAS DE BITS ....................................................................................................................................................... 60

DIBUJO DE TEXTURASENXNA ............................................................................................................................................................ 60 EL ELEMENTO IMAGE ENSILVERLIGHT................................................................................................................................................... 62 IMÁGENES A TRAVÉS DE LAWEB ......................................................................................................................................................... 63

Image e ImageSource...................................................................................................................................................................... 65 Carga de mapas de bits de código local ........................................................................................................................................... 66 Capturas desde la Cámara............................................................................................................................................................... 67

La biblioteca de fotos ............................................................................................................................................................................. 68 EJEMPLOS...................................................................................................................................................................................... 70

5.PROBLEMAS EN LA ARQUITECTURA ............................................................................................................................................ 72

NAVEGACIÓNBÁSICA ....................................................................................................................................................................... 72 UTILIZACIÓN DE DATOSEN LASPÁGINAS................................................................................................................................................ 76

Compartir datos entre páginas ........................................................................................................................................................ 78

ESTADO DE LASPÁGINAS................................................................................................................................................................... 81 ALMACENAMIENTO AISLADO.............................................................................................................................................................. 83 EJEMPLOS...................................................................................................................................................................................... 85

6.XML ............................................................................................................................................................................................. 90

UNTEXTBLOCK EN CÓDIGO................................................................................................................................................................ 91 LA PROPIEDAD INHERITANCE .............................................................................................................................................................. 92

Propiedades como elementos .......................................................................................................................................................... 93 COLORESY PINCELES ........................................................................................................................................................................ 94 CONTENIDOSY PROPIEDADESDE CONTENIDOS........................................................................................................................................ 98 COLECCIÓN DE RECURSOS................................................................................................................................................................ 100 X:KEY Y X:NAME ........................................................................................................................................................................... 103 ESTILOS ...................................................................................................................................................................................... 104 HERENCIA DEESTILOS..................................................................................................................................................................... 105 PLANTILLAS.................................................................................................................................................................................. 105 DEGRADADOS............................................................................................................................................................................... 106 EJEMPLOS.................................................................................................................................................................................... 107



Página 6

7.ENLACE A DATOS ....................................................................................................................................................................... 110

ORIGEN YDESTINO........................................................................................................................................................................ 110 MODOS...................................................................................................................................................................................... 112

Conversores de enlace ................................................................................................................................................................... 113 EL ORIGEN “THIS” ......................................................................................................................................................................... 116 CONVERTIDORESCON PROPIEDADES................................................................................................................................................... 119 MECANISMOSDE NOTIFICACIÓN........................................................................................................................................................ 121 CONTEXTO DEDATOS..................................................................................................................................................................... 121 EJEMPLOS.................................................................................................................................................................................... 125

8.CONTROLES Y BARRAS DE APLICACIÓN ..................................................................................................................................... 129 ICONOSDE BARRA DE APLICACIÓN...................................................................................................................................................... 129 CONFIGURACIÓN DE APLICACIONES .................................................................................................................................................... 134

Características táctiles .................................................................................................................................................................. 137 Barra de aplicaciones .................................................................................................................................................................... 138 Elementos y Controles ................................................................................................................................................................... 141 Control Slider y RangeBase ............................................................................................................................................................ 142

USO DECRONÓMETROS.................................................................................................................................................................. 146 ENTRADASDE TEXTO Y POR TECLADO .................................................................................................................................................. 152 EJEMPLOS.................................................................................................................................................................................... 157



Página 7

1. INTRODUCCIÓN

Teniendo en cuenta las versiones anteriores que Microsoft proporciona para desarrol lar las soluciones orientas

a dispositivos móviles, destacar que Windows Phone 7 es una revolución ya que está basado en un nuevo en-

foque para el mercado de la telefonía móvil. Microsoft Windows Phone 7 no sólo representa una ruptura con

el pasado de Windows Mobile sino que además también se diferencia de otros teléfonos inteli gentes que exis-

ten hoy en día en el mercado. Los dispositivos que usan Windows Phone 7 se realizará por varios fabricantes yestará disponible para una gran variedad de proveedores.

Para los programadores, Window Phone e es algo también interesante, ya que es compatible con dos plata-

formas de programación popular y moderna: Silverligh y XNA.

Silverl ight , un spin off en el l ado del cliente basado en Windows Presentation Foundation (WPF), ya ha dado a

los programadores Web un poder sin precedentes para desarrollar interfaces de usuario sofisticadas con una

mezcla entre controles tradicionales, texto en alta calidad, gráficos vectoriales, medios de comunicación, ani-

mación y enlace a datos que se ejecutan en múltiples plataformas y navegadores. Windows Phone 7 extiende

Silverlight para disposit ivos móvi les.

XNA, es la plataforma de juegos de M icrosoft que soporta tanto gráficos basados en sprites 2D y 3D con una

arquitectura tradicional. A pesar de que XNA se asocia sobre todo con la implementación de juegos para la

consola Xbox 360, los desarrolladores también pueden utilizar XNA para utilizarlo en sus propios PC´s, sí co-

mo el elegante reproductor de audio de Microsoft, el Zune HD.

Cualquiera, tanto Silverlight como XNA tendrán senti do como única plataforma de apl icación para Windows

Phone 7, pero los desarrolladores pueden elegir.

Descripción General

Todos los programas para Windows Phone 7 están escritos en código administrado .NET. Aun que en este

libro sólo mostraremos los ejemplos en C#, también se pueden escribir aplicaciones en Visual Basic .NET.

Las plataformas Silverlight y XNA para Windows Phone 7 comparten algunas bibliotecas, y puedes usar algu-

nas bibliotecas de XNA en un programa Sil verl ight y vi ceversa. Pero no puedes crear un programa que mezcle

elementos visuales de ambas plataformas. Quizá será posible en el futuro, pero hoy en día no. Antes de crear

un proyecto de Visual Studio, debemos decidir si elegimos Silverlight o XNA para llevar a cabo nuestra apli-

cación.

Generalmente se usará Silverl ight para escribir programas que podr íamos clasifi car como aplicaciones o util i-

dades. Estos programas se construyen a partir de una combinación de marcado y código. El marcado es el Ex-tensible Appl ication Markup Language, o XAM L. La mayoría del XA ML define un diseño de controles de in-

terfaz de usuario y paneles. Los archivos de código subyacente también pueden realizar algunas tareas de ini-

cialización y de la lógica, pero en general son relegados a la gestión de eventos de los controles. Silverlight es

ideal para l levar a Windows Phone el estilo de las apl icaciones (RIA), incluyendo los medios de comunicación

y Web. Silverlight para Windows Phone es en su versión 3 excluyendo algunas características que no son

apropiadas para el teléfono, pero compensa con algunas mejoras.

Por otro lado, XNA se usa pr incipalmente para escribir juegos de alto rendimiento. Para juegos 2D, se definen

los sprites y fondos en torno a mapas de bits, para juegos 3D se definen los modelos en el espacio 3D. La ac-

ción del juego, que incluye objetos que se mueven alrededor de la pantalla gráfica y realización de encuestas

para la entrada del usuario, se sincroniza con la incorporada en el bucle de juego XNA.



Página 8

La diferenciación entre las aplicaciones basadas en Silverlight y juegos basados en XNA es conveniente pero

no restr ictiva. Por supuesto que puede usar Sil verlight para escribir juegos e incluso se pueden escribir aplica-

ciones tradicionales ut il izando XNA, aunque ell o a veces puede ser di fícil .

En particular, Silverlight podría ser ideal para los juegos que son menos orientados a la resolución en gráficos,

o el uso de gráficos vectoriales en lugar de gráficos de mapa de bits. Un programa de tipo Tetris puede fun-

cionar bastante bien en Silverlight. Es probable que encuentres XNA un poco más difícil de estirar en el terri-

torio de Silverlight.

El Hardw are

Los desarrolladores con experiencia en selección de dispositivos de Windows Mobile encuentran cambios sig-

nificativos en la estrategia de Microsoft Windows Phone 7. Microsoft ha sido muy proactivo en la definición

de las especificaciones de hardware, a menudo referido como un "chasis".

Las versiones iniciales de los dispositivos para Windows Phone 7 tendrán un tamaño de pantalla compatible.

Muchas otras características de hardware se garantiza que existan en cada dispositivo. La parte frontal del

teléfono se compone de una pantalla multi -touch y tres botones de hardware en general, colocados en una fi la

debajo de la pantalla. De izquierda a derecha, estos botones se llaman de Atrás, en Inicio y búsqueda:

Botones de los dispositivos móviles

Atrás: Los programas pueden utilizar este botón para sus necesidades de navegación propio, al igual

que el botón A trás de un navegador Web. En la página principal de un programa, el botón hace que el

programa termine.

Inicio: Este botón l leva al usuario a la pantalla inicial del teléfono.

Búsqueda: El sistema operativo uti l iza este botón para iniciar una función de búsqueda.

Las versiones iniciales de los dispositivos para Windows Phone 7 tenían un tamaño de pantalla de 480 × 800

píxeles. En el futuro, las pantallas serán de 320 × 480 píxeles también. No hay opciones de otra pantalla deteléfono de Windows 7, así que obviamente estos dos tamaños de pantalla de desempeñar un papel muy im-

portante en el desarrollo del teléfono.

En teoría, por lo general es considerado lo mejor escribir programas que se adapten a cualquier tamaño de

pantalla, pero esto no es siempre posible, especialmente en el desarrollo de juegos. Es probable que se encuen-

tre específicamente dirigidas las aplicaciones a estos dos tamaños de pantalla, hasta el punto de tener caminos

condicionales en el código y di ferentes archivos XAML de diseño que son dependientes del tamaño.

Por supuesto, los teléfonos se pueden girar para poner la pantalla en modo horizontal. Algunos programas

pueden requerir que el teléfono tenga una cierta orientación, mientras que otros podrían ser más adaptables.

Usted tiene el control completo sobre el grado en que usted apoya la orientación. De forma predeterminada,

las apl icaciones de Silverlight aparecen en el modo de retrato, pero probablemente querrá escribir sus aplica-

ciones Silverlight para que se ajusten a los cambios de orientación. Los nuevos eventos están disponibles es-



Página 9

pecíficamente para el fin de detectar el cambio de orientación, y algunos cambios de orientación son maneja-

dos de forma automática. Por el contrario, los programadores de juegos por lo general se imponen una deter-

minada orientación en el usuario.

En el modo de retrato, la pequeña pantalla es la mitad de una pantalla VGA (es decir, 640 × 480). En el modo

de paisaje, la pantalla grande tiene una dimensión que a veces se llama WVGA. En el modo de paisaje, la pe-

queña pantalla tiene una relación de aspecto de 3:2 o 1,5; la gran pantalla tiene una relación de aspecto de

05:03 o 1.66.

La mayoría de las entradas del usuario a un p rograma en Microsoft Windows Phone 7 vendrá a través de mul-

ti-touch. Las pantallas que incorporan la tecnología de la capacitancia al tacto, lo que significa que hay que

responder a una punta de los dedos humanos, pero no se forma un lápiz óptico o de otro tipo de presión.

Windows Phone 7 responder a por lo menos cuatro puntos de contacto simultáneamente.

Otro elemento importante es un teclado de hardware opcional. Tenga en cuenta que los teléfonos pueden ser

diseñados de distintas maneras, así que cuando el teclado está en uso, la pantalla puede ser en modo vertical u

horizontal. Un programa en Silverlight que utiliza la entrada de teclado debe responder a los cambios de

orientación para que el usuario pueda ver la pantalla y usar el teclado sin preguntarse qué idiota diseñó el

programa hacia los lados. Un teclado en pantalla también se proporciona, conocido en los círculos de Win-

dows como el Panel de entrada de software o SIP. Los programas de XNA también tienen acceso al teclado de

hardw are y SIP.

Servicios y Sensores

Un dispositivo con Windows Phone 7 debe contener otras características de hardware, a veces denominados

sensores y proveer de servicios de software, quizá a través de la asistencia de hardware. Estos son los que afec-

tan a los desarrolladores más:

Wi-Fi: El teléfono dispone de Wi-Fi para acceso a Internet para complementar el acceso 3G a datos a

través del proveedor del móvil. El software del teléfono incluye una versión de Internet Explorer.

Cámara: El teléfono tiene por lo menos una cámara de 5 megapíxeles con flash. Los programas pueden

invocar el programa de la cámara para su aportación propia, o cuando se registra a sí mismos como

una apl icación de fotos más y aparecen en un menú para acceder a las imágenes fotografiadas.

Acelerómetro: Un acelerómetro detecta la aceleración, que en la física es un cambio de velocidad.

Cuando la cámara sigue siendo, el acelerómetro responde a la gravedad. Los programas pueden obte-

ner un vector tridimensional que indica cómo la cámara se orienta con respecto a la tierra. El aceleró-

metro también puede detectar movimientos bruscos del teléfono.

Localización: Si el usuario así lo desea, el teléfono puede usar múltiples estrategias para determinar

dónde se encuentra geográfi camente. Los suplementos de un dispositivo de hardware GPS con infor-

mación de la Web o torres de telefonía celular. Si el teléfono está en movimiento, el rumbo y la veloci-

dad también pueden estar disponibles.

Vibración: El teléfono puede vibrar a través del programa de control.

Radio FM: Una radio FM está di sponible y accesible a través del programa de control.

Notificaciones emergentes: Algunos de los servicios Web requieren normalmente el teléfono parasondear con frecuencia el servicio y para obtener información actualizada. Esto puede drenar la vida

de la batería.



Página 10

Primera apl icación en Si lverl ight

En el cuadro de diálogo Nuevo proyecto, a la izquierda en Plantillas instaladas, seleccione Visual C # y luego

de Silverlight para Windows Phone. En la zona media, seleccione Windows Phone de la aplicación. Seleccione

una ubicación para el proyecto, e introduzca el nombre del proyecto: Silverl ightH elloPhone.

Cuando se crea el proyecto puedes encontrar una imagen de un teléfono de gran pantalla en modo retrato con

un área de pantall a de 480 × 800 píxeles de tamaño. Esta es la vista de diseño. Aunque usted puede arrastrar

de forma interactiva los controles de una caja de herramientas para diseñar la aplicación, me voy a centrar en

cambio, en que muestra cómo escribir su propio código y marcado XAM L.

Varios archivos se han creado para este proyecto SilverlightHolaMundo y se muestran bajo el nombre del

proyecto en el Explorador de soluciones más a la derecha. En la carpeta Propiedades tres archivos que nor-

malmente se puede ignorar cuando estás creando pequeños programas de Silverlight de ejemplo para el telé-

fono. Sólo cuando en realidad estás en el proceso de hacer una aplicación real de estos archivos se vuelven

importantes.

Sin embargo, es posible que desee abrir el archivo WMAppManifest.xml. En la etiqueta de la aplicación en la

parte superior, verás el atributo:

T i t l e =" S i l v e r l i g h t Ho l a Mu n d o ”

Eso es sólo el nombre del proyecto seleccionado. Introduzca algunos espacios para que sea un poco más ami-

gable.

T i t l e =" S i l v e r l i g h t H o l a Mu n d o ”

Este es el nombre util izado por el teléfono y el emulador del teléfono mostrar el programa en la lista de apl ica-

ciones instaladas. Si eres realmente ambicioso, también puede edi tar los archivos ApplicationIcon.png y back-

ground.png que utiliza el teléfono para simbolizar visualmente el programa. El archivo SplashScreenIma-

ge.jpg es lo que el programa muestra como es la inicialización.

En la barra de herramientas estándar de Visual Studio en el menú del programa, verás una lista desplegable

que muestra probablemente "Windows Phone 7 emulador." La otra opción es "Windows Phone 7." Esta es la

forma de implantar el programa ya sea al emulador o a un teléfono que esté conectado al ordenador mediante

USB.

Sólo para ver que todo funciona correctamente, seleccione Windows Phone 7 emulador y presione F5 (o selec-

cione Iniciar depuración en el menú Depurar). Su programa se compilará rápidamente y en la barra de estadopuedes encontrar el texto "Conexión de teléfono de Window s 7 emulador".



Página 11

La primera vez que use el emulador durante un período de sesiones, podría tomar un poco de tiempo para

ponerse en marcha. Si deja el emulador que corra entre edi tar / crear / ejecutar ciclos, Vi sual Studio no es ne-

cesario para establecer de nuevo esta conexión. Pronto el teléfono emulador aparecerá en el escritorio y verás

la pantalla de inicio, seguido por este programa Silverlight que no hace nada, ya que se implementa y se ejecu-

ta en el emulador. En el teléfono puedes encontrar más o menos la misma imagen que viste en la vista de dise-

ño.

Imagen del emulador

El emulador del teléfono tiene un pequeño menú flotante en la parte superior derecha que está a la vi sta cuan-

do se mueve el ratón para esa ubicación. Puede cambiar la orientación a través de este menú, o cambiar el ta-

maño de emulador. De forma predeterminada, el emulador se muestra en tamaño real del 50%, aproximada-

mente del mismo tamaño que la imagen en esta página. Cuando se muestra el emulador al 100%, se vuelve

enorme, y ustedes se preguntaran "¿Cómo voy a guardar un teléfono de este tamaño en el bolsillo?"

La diferencia consiste en la densidad de píxeles. Su pantalla del ordenador probablemente tiene alrededor de

100 píxeles por pulgada. (De manera predeterminada, Windows asume que las pantallas son 96 ppp). La pan-talla en un verdadero dispositivo de teléfono es más de 2 ½ veces más. Cuando se muestra el emulador al

100%, que se está viendo todos los píxeles de la pantalla del teléfono, pero en alrededor de 250% su tamaño

real. Usted puede terminar la ejecución de este programa y volver a la edición del programa o bien Visual

Studio (con M ayúsculas + F5 o seleccionando Detener depuración en el menú Depurar) o haciendo clic en el

botón Atrás en el emulador.

No salga del propio emulador, haga clic en la X en la parte superior del menú flotante! Mantener el emulador

ejecutándose hará las implantaciones posteriores que vayan mucho más rápido.

Si bien el emulador sigue en funcionamiento, mantiene todos los programas desplegados en él. Si hace clic en

la flecha en la parte superior derecha de la pantalla de inicio, obtendrá una lista que incluirá este programaidenti ficados por el texto “ Silverli ght H ola Mundo" y se puede ejecutar el programa de nuevo. El programa va

a desaparecer de esta lista al salir del emulador.

Archi vos estándar en Si lverl ight

Con el proyecto cargado en Visual Studio, eche un vistazo en el Explorador de soluciones. Verás dos pares de

archivos: App.xaml y App.xaml.cs además de MainPage.xaml y MainPage.xaml.cs. Los archivos App.xaml y

MainPage.xaml son archivos en XA ML, mientras que App.xaml.cs y MainPage.xaml.cs son archivos de código

C #. Este esquema de nombres peculiares pretende dar a entender que los archivos de C # son "de código sub-

yacente" los archivos relacionados con los dos archivos XAML. Este es un concepto básico de Silverlight .

Quiero dar un pequeño recorr ido sobre estos cuatro archivos. Si nos fijamos en el archivo App.xaml .cs, puedes

encontrar una definición de espacio de nombres que es lo mismo que el nombre del proyecto y una clase de-

Página 12

nominada de la aplicación que se deriva de la clase de aplicaciones de Silverlight. He aquí un fragmento que

muestra la estructura general:

n a me s p a c e Si l v e r l i g h t H e l l o Ph o n e

{

p u b l i c p ar t i a l c l a s s Ap p : A p p l i c a t i o n {

p u b l i c Ap p ( )

{

I n i t i a l i z e Co mp o n e n t ( ) ;

}

…}

}

Todos los programas de Silverlight contienen una clase de aplicación que se deriva de la aplicación, realiza

esta clase de inicialización de la apl icación a escala, puesta en marcha, y las tareas de apagado. Se dará cuenta

de que esta clase se define como una clase parcial, lo que significa que el proyecto probablemente debería in-

cluir otro archivo de C # que contiene los miembros adicionales de la clase de la aplicación. Pero ¿dónde está?

El proyecto también contiene un archivo App.xaml, que tiene una estructura general de esta manera:

< Ap p l i c a t i o n

x : C l a s s = " S i l v e r l i g h t He l l o Ph o n e . A p p "x ml n s = " h t t p : / / s c h e ma s . m i c r o s o f t . c o m/ wi n f x / 2 0 0 6 / x a ml

/ p r e s e n t a t i o n "

x ml n s : x = " h t t p : / / s c h e ma s . mi c r o s o f t . c o m/ wi n f x / 2 0 0 6 / x a ml " x ml n s : p h o n e = " c l r -

n a me s p a c e : Mi c r o s o f t . P h o n e . Co n t r o l s ; a s s e mb l y = Mi c r o s o f t . P h o n e "

x ml n s : s h e l l = " c l r -

n a me s p a c e : Mi c r o s o f t . P h o n e . S h e l l ; a s s e mb l y = Mi c r o s o f t . P h o n e " >

…

< / Ap p l i c a t i o n >

Usted reconoce este archivo como XM L, pero más precisamente se trata de un archivo XAML, que es una par-

te importante de la programación de Silverlight. En particular, los desarrolladores a menudo usan el archivo

App.xaml para el almacenamiento de los recursos que se utilizan en la aplicación. Estos recursos pueden in-cluir combinaciones de colores, pinceles de degradado, estilos, etc.

El elemento raíz es de aplicación, que es la clase de Silverlight que la clase se deriva de la aplicación. El ele-

mento raíz contiene cuatro declaraciones de espacio de nombres XML. Dos son comunes en todas las aplica-

ciones de Sil verlight, y las otras dos son únicas en el teléfono.

La primera declaración de espacio de nombres XML (xmlns ") es el espacio de nombres estándar para Silver-

light, y ayuda a que el compilador localice e identif ique las clases de Silverlight como la apl icación en sí. Como

con la mayoría de las declaraciones de espacio de nombres XML, este URI no apuntan a nada en realidad, es

sólo un URI que Microsoft posee y que ha definido para este propósito.

La segunda declaración de espacio de nombres XML se asocia con XAML en sí mismo, y permite que el archi-

vo haga referencia a algunos elementos y atr ibutos que forman parte de XAM L y no específi camente de Silver-

light. Por convención, este espacio de nombres está asociado con un prefijo de "x " (que signif ica "XAML).

Entre los varios atributos con el soporte de XAML y se hace referencia con esta "x" es el prefijo de clase, que a

menudo se pronuncia "x clase." En este archivo en particular XAML x: Class se le asigna el nombre Silver-

lightHolamundo.App.

El espacio de nombres SilverlightHolaMundo deriva de la clase de aplicaciones de Silverlight, el elemento

raíz. Es la misma definición de clase que vimos en el archivo A pp.xaml.cs pero con una sintaxis muy diferente.

Los archivos App.xaml.cs y App.xaml realmente definen dos mitades de la misma clase de la aplicación. Du-

rante la compilación, Visual Studio analiza App.xaml y genera otro archivo cuyo nombre en código App.g.cs.

La "g"significa "generado". Si qu ieres ver este archivo, usted lo puede encontrar en el subdirectorio \ obj \

Página 13

Debug del proyecto. El archivo contiene App.g.cs otra definición parcial de la clase de la apl icación, y contiene

un método denominado Ini ti alizeComponent que se llama desde el constructor en el archivo App.xaml .cs.

Eres libre de editar los archivos App.xaml y App.xaml.cs, pero no perder el tiempo con App.g.cs. Ese archivo

se vuelve a crear cuando se genera el proyecto.

Cuando se ejecuta un programa, la clase de la aplicación crea un objeto de tipo PhoneApplicationFrame y es-

tablece que el objeto de su propiedad RootVisual propia. Este marco es de 480 píxeles de ancho y 800 píxeles

de altura y ocupa la superf icie de la pantalla completa del teléfono. El objeto PhoneApplicationFrame se com-

porta algo así como un navegador web, navegando a un objeto l lamado M ainPage.

MainPage es la segunda clase importante en todos los programas de Silverlight y se define en el segundo par

de archivos, MainPage.xaml y MainPage.xaml.cs. En los programas de Silverlight más pequeños, es en estos

dos archivos que se le pasa la mayor parte de su tiempo.

Aparte de una larga lista de directivas de uso, el archivo MainPage.xaml.cs es muy simple:

u s i n g Sy s t e m;

u s i n g S y s t e m. Co l l e c t i o n s . Ge n e r i c ;

u s i n g S y s t e m. L i n q ;

u s i n g S y s t e m. Ne t ;

u s i n g Sy s t e m. Wi n d o ws ;

u s i n g S y s t e m. Wi n d o ws . Co n t r o l s ;

u s i n g Sy s t e m. Wi n d o ws . Do c u me n t s ;

u s i n g S y s t e m. Wi n d o ws . I n p u t ;

u s i n g S y s t e m. Wi n d o ws . Me d i a ;

u s i n g Sy s t e m. Wi n d o ws . Me d i a . An i ma t i o n ;

u s i n g S y s t e m. Wi n d o ws . S h a p e s ;

u s i n g M i c r o s o f t . Ph o n e . Co n t r o l s ;

n a me s p a c e Si l v e r l i g h t H e l l o Ph o n e

{

p u b l i c p ar t i a l c l a s s Ma i n Pa g e : P h o n e A p p l i c a t i o n Pa g e {

/ / C o n s t r u c t o r

p u b l i c Ma i n Pa g e ( ){

I n i t i a l i z e Co mp o n e n t ( ) ;

}

}

}

Las directivas para el uso de espacios de nombres que comienzan con las palabras System.Windows son para

las clases de Silverlight, a veces tendrás que completar éstas con otras di rectivas. El espacio de nombres M icro-

soft.Phone.Controls contiene extensiones de Silverl ight para el teléfono, incluyendo la clase PhoneAppli ca-

tionPage.

Una vez más, vemos otra definición de clase parcial. Esta se define una clase denominada MainPage que deri-va de la clase PhoneApplicationPage Silverli ght. Esta es la clase que define las imágenes que realmente va a

ver en la pantalla cuando se ejecuta el programa Silverl ightHolaMundo.

La otra mi tad de esta clase MainPage se define en el archivo MainPage.xaml. Aquí está el archivo casi comple-

to, a formatear un poco para adaptarse a la página impresa, y excluyendo una sección que es un comentario al

fi nal, pero sigue siendo un trozo más aterrador de marcado:

< p h o n e : P h o n eA pp l i c a t i o n Pa g e

x : Cl a s s = " S i l v e r l i g h t Ho l a Mu n d o . Ma i n Pa g e "

x ml n s = " h t t p : / / s c h e ma s . mi c r o s o f t . c o m/ wi n f x / 2 0 0 6 / x a ml / p r e s e n t a

t i o n " x ml n s : x = h t t p : / / s c h e ma s . mi c r o s o f t . c o m/ w i n f x / 2 0 0 6 / x a ml

x ml n s : p h o n e = " c l r -n a me s p a c e : Mi c r o s o f t . P h o n e . Co n t r o l s ; a s s e mb l y = Mi c r o s o f t . P h o n e "

x ml n s : s h e l l = " c l r -

n a me s p a c e : Mi c r o s o f t . P h o n e . S h e l l ; a s s e mb l y = Mi c r o s o f t . P h o n e "

x ml n s : d = " h t t p : / / s c h e ma s . mi c r o s o f t . c o m/ e x p r e s s i o n / b l e n d / 2 0 0 8 "

Página 14

x ml n s : mc = " h t t p : / / s c h e ma s . o p e n x ml f o r ma t s . o r g / ma r k u p -

c o mp a t i b i l i t y / 2 0 0 6 " mc : I g n o r a b l e = " d " d : De s i g n Wi d t h = " 4 8 0 "

d : De s i g n He i g h t = " 7 6 8 " F o n t F a mi l y = " { S t a t i c Re s o u r c e

P h o n e Fo n t F a mi l y N o r ma l } " F o n t S i z e = " { S t a t i c Re s o u r c e

P h o n e Fo n t S i z e No r ma l } " F o r e g r o u n d = " { S t a t i c Re s o u r c e

P h o n e Fo r e g r o u n d Br u s h } " Su p p o r t e d Or i e n t a t i o n s = " P o r t r a i t "

Or i e n t a t i o n = " P o r t r a i t " s h e l l : Sy s t e mT r a y . I s Vi s i b l e = " T r u e " >

< Gr i d x : Name = " L a y o u t R o o t " B a c k g r o u n d = " T r a n s p a r e n t " >

< Gr i d . R o wDe f i n i t i o n s >

< Ro wDe f i n i t i o n He i g h t = " A u t o " / >

< Ro wDe f i n i t i o n He i g h t = " * " / >

< / Gr i d . R o wDe f i n i t i o n s >

< S t a c k P a n e l x : Name = " T i t l e Pa n e l " Gr i d . Ro w= " 0 " Ma r g i n = " 1 2 , 1 7 , 0 , 2 8 " >

< T ex t B l o c k x : Name = " A pp l i c a t i o n T i t l e " T e x t = " Mi A p l i c a c i o n " S t y l e = " { S t a t i c Re s o u r c e P h o n e T e x t No r ma l S t y l e } " / >

< T ex t B l o c k x : Name = " P a g e T i t l e " T e x t = " n o mr e d e p a g i n a " Ma r g i n = " 9 , - 7 , 0 , 0 " S t y l e = " { S t a t i c Re s o u r c e

P h o n e Te x t T i t l e 1 S t y l e } " / >

< / S t a c k P a n e l >

< Gr i d x : Name = " C on t e n t P a n e l " Gr i d . Ro w= " 1 " Ma r g i n = " 1 2 , 0 , 1 2 , 0 " >

< / Gr i d >

< / Gr i d >



Las cuatro primeras declaraciones de espacio de nombres XML son los mismos que en A pp.xaml. Al igual que

en el archivo App.xaml, un atributo x: Class también aparece en el elemento raíz. Aquí se indica que la clase

MainPage en el espacio de nombres SilverlightHolaMundo deriva de la clase de Silverlight PhoneApplica-

tionPage.

Esta clase PhoneApplicationPage requiere su propia declaración de espacio de nombres XML, ya que no es

una parte estándar de Silverl ight. La "d" (de "diseño") y el "mc" (de "compatibil idad de marcas") declaraciones

de espacio de nombres son para el beneficio de programas de diseño XAML, como Expression Blend y el dise-

ñador en Visual Studio sí. Los atributos DesignerWidth DesignerHeight y se pasan por alto durante la compi-

lación.

La compilación del programa genera un nombre de archivo MainPage.g.cs que contiene otra definición de

clase parcial para MainPage (puedes verlo en el subdirector io \ obj \ Debug) con el método Initi alizeCompo-

nent que se llama desde el constructor en M ainPage.xaml .cs.

En teoría, los archivos App.g.cs y MainPage.g.cs generados durante el proceso de construcción son exclusiva-

mente para uso interno por el compilador y pueden ser ignorados por el programador. Sin embargo, a veces,

cuando un mal programa produce una excepción, uno de estos archivos viene apareciendo a la vista. Podría

ayudar a su comprensión del problema el hecho de hayamos visto estos archivos antes de que misteriosamen-

te aparezcan delante de su cara. Sin embargo, no intente modificar estos archivos para solucionar el problema!

El verdadero problema está, probablemente, en algún lugar del correspondiente archivo XAML!.

El cuerpo del archivo MainPage.xaml contiene varios elementos anidados llamado Grid, StackPanel y Text-

Block en una jerarquía de elementos primarios y secundarios. Observe la palabra que utiliza: elemento. En la

programación de Silverlight, esta palabra tiene dos significados relacionados. Es un término XML utilizado

para indicar los elementos delimi tados por etiquetas de inicio y fi n. Pero también es una palabra usada en Sil -

verlight para referirse a los objetos visuales, y de hecho, el elemento denominativo aparece en los nombres de

dos clases de Sil verli ght reales.

Muchas de las clases que se utiliza en Silverlight son parte de esta jerarquía de clases importantes:

Página 15

Además de UIElement, muchas clases de Silverlight derivan de DependencyObject. Pero UIElement tiene ladistinción de ser la clase que tiene el poder de aparecer como un objeto visual en la pantalla y para recibir la

entrada del usuario. (En Silverl ight , todos los objetos visuales pueden recibir la entrada del usuario.)

Tradicionalmente, esta entrada de usuario viene desde el teclado y el ratón, en el teléfono, la mayoría de la

entrada del usuario entra por el tacto. La única clase que se deriva de UIElement es FrameworkElement. La

distinción entre estas dos clases es un artefacto histórico de Windows Presentation Foundation. En WPF, es

posible que los desarrolladores creen sus propios marcos únicos por los que se derivan de UIElement. En Sil-

verl ight esto no es posible, por lo que la distinción es bastante sin sentido.

Nuestra meta original era crear un programa en Silverlight que muestra un texto en el centro de la pantalla,

pero dada la presencia de un par de títulos, vamos a modif icar ese objeti vo de mostrar el texto en el centro de

la página, aparte de los títulos. El área del contenido de la página del programa es la cuadrícula hacia el final

del archivo precedido por el comentario "ContentPanel -. Esta cuadrícula tiene un nombre de "ContentPanel" y

me voy a referi r a él de manera informal como el "panel de contenido" o "red de contenido". El área de la pan-

talla que corresponde a este Ritual, aparte de los títulos que a menudo se le refiere como el "área de conteni-

do".

< Gr i d x : Na me= " C o n t e n t P a n e l " Gr i d . Ro w= " 1 " Ma r g i n = " 1 2 , 0 , 1 2 , 0 " >

< T e x t B l o c k T e x t = " Ho l a , Wi n d o ws Ph o n e 7 ! "

Ho r i z o n t a l A l i g n me n t = " C e n t e r "

V e r t i c a l A l i g n me n t = " Ce n t e r " / >

< / Gr i d >

Text, HorizontalAlignment y VerticalAlignment son todas las propiedades de la clase TextBlock. La propiedad

Text es de tipo cadena. Las propiedades HorizontalAlignment y VerticalAlignment son los tipos de numera-

ción HorizontalAlignment y VerticalAlignment, respectivamente. Cuando hace referencia a un tipo de enume-

ración en XAML, sólo necesita el nombre del miembro.

No tiene mucho sentido tener un título en la página de una aplicación de Silverlight con sólo una sola página,

y puede eliminar ese segundo TextBlock si lo desea. Los cambios que realice en este archivo XAML se reflejará

en la vista de diseño. Ahora puede compi lar y ejecutar este programa:



Página 16

Tan simple como es, este programa muestra algunos de los conceptos esenciales de la programación en Silver-

light, incluyendo diseño dinámico. El archivo XAM L define una distribución de elementos en un árbol vi sual.

Estos elementos son capaces de organizar ellos mismos de forma dinámica. Las propiedades Horizontal-

Alignment y VerticalAlignment puede poner un elemento en el centro de otro elemento, o (como se podría

suponer) a lo largo de uno de los bordes o en una de las esquinas. TextBlock es uno de una serie de elementos

posibles que puede utilizar en un programa de Silverlight, mientras que otros incluyen imágenes de mapa de

bits, películas, y los controles familiares como botones, deslizadores, y cuadros de lista.

TemasDesde la pantalla inicial del teléfono o del emulador del teléfono, haga clic o toque la flecha a la derecha en la

parte superior derecha y vaya a la página de Configuración y luego seleccione Tema. Un tema de Windows

Phone 7 consiste en un fondo y un color de acento. Para el fondo se puede seleccionar Oscuro (texto claro so-

bre un fondo oscuro, que has estado viendo) o la luz (lo contrario). Seleccione el tema de la Luz, ejecute Silver-

lightHolaMundo otra vez, y expresar cierta satisfacción que los colores del tema se apl ican automáticamente.

A pesar de que estos colores se apl ican automáticamente, no está atrapado con ellos en su apl icación. Si desea

que el texto se muestre en un color diferente, puede intentar establecer el atributo de primer plano en la eti-

queta de TextBlock, por ejemplo:

F o r e g r o u n d = " B l u e "

Usted puede ponerlo en cualquier lugar de la etiqueta, siempre y cuando deje espacios a ambos lados. A me-

dida que escribe este atributo, puedes encontrar una lista de colores pop-up. Silverlight soporta los 140 nom-

bres de colores compatibles con numerosos navegadores, así como un bono 141a color, transparente.

En un p rograma en el mundo real, usted querrá poner a prueba los colores de encargo con los temas disponi -bles para que el texto no desaparezca misteriosamente o se vuelva difícil de leer.

Puntos y Píxeles

Otra característica del TextBlock es que puede cambiar fácilmente es FontSize (Tamaño de letra):

F o n t S i z e = " 3 6 "

Pero, ¿qué significa esto exactamente?

Todas las dimensiones en Silverlight se encuentran en unidades de píxeles, y el FontSize no es una excepción.Cuando se especifi ca 36, se obtiene una fuente que desde la parte superior de sus ascendentes en la parte infe-

rior de sus descendentes mide aproximadamente 36 píxeles.



Página 17

Pero las fuentes no son nunca tan sencillas. El TextBlock resultante realmente tiene una altura como 48 píxeles,

alrededor del 33% más alto que lo que el FontSize implicaría. Este espacio adicional impide que las líneas su-

cesivas de texto se bloqueen.

Tradicionalmente, los tamaños de fuente se expresan en unidades de puntos. En la tipografía clásica, es un

punto muy cercano a 1/ 72nd pulgadas, pero en la tipografía digital, la cuestión es a menudo se supone que es

exactamente 1/ 72nd pulgadas. Una fuente con un tamaño de 72 puntos mide aproximadamente una pulgada

de la parte superior de sus personajes hasta el fondo. (Digo "aproximadamente", porque el tamaño de punto

indica una altura de diseño tipográfico, y es realmente el creador de la fuente que determina exactamente quétan grande a los personajes de una fuente de 72 puntos debe ser.)

¿Cómo convertir entre píxeles y puntos? Obviamente no se puede a excepción de un dispositi vo de salida en

particular. A 600 puntos por pulgada (DPI) de la impresora, por ejemplo, el tipo de letra de 72 puntos será de

600 píxeles de alto.

El XAP

Si se desplaza al directori o \ bin \ Debug del proyecto de Visual Studio SilverlightHolaMundo, encontrará un

archivo llamado SilverlightHolaMundo.xap. Esto se conoce comúnmente como un archivo XAP. Este es el ar-chivo que se implementa en el teléfono o el teléfono emulador.

El archivo XAP es un paquete de otros archivos, en el formato de compresión muy popular conocido como

ZIP. Si cambia el nombre a SilverlightHolaMundo.xap por SilverlightHolaMundo.zip, puede ver el interior.

Verá varios archivos de mapa de bits que forman parte del proyecto, un archivo XML, un archivo XAML, y un

archivo de SilverlightHolaMundo.dll, que es el binario compilado de su programa.

Un programa XNA

El siguiente paso en el orden del día es un programa XNA que muestra un mensaje en el centro de la pantalla.Mientras que el texto a menudo prevalece en las aplicaciones de Silverlight, es menos común en los juegos

gráficos. En los juegos, el texto es generalmente relegado a la descripción de cómo funciona el juego o la visua-

lización de la puntuación, por l o que el concepto de un "hola, mundo" del programa no acaba de encajar en el

paradigma de programación XNA.

De hecho, XNA ni siquiera tiene fuentes incorporadas. Se podría pensar que un programa XNA se ejecuta en

el teléfono puede hacer uso de las mismas fuentes nativas como los programas de Silverlight, pero esto no es

así. Silverlight utiliza fuentes TrueType basadas en vectores y XNA no sabe nada acerca de conceptos tan exó-

ticos.

En XNA, todo es un mapa de bits, incluidas las fuentes. Si desea utilizar una fuente en particular en el pro-grama XNA, esa fuente debe estar integrada en el ejecutable como una colección de mapas de bits para cada

carácter. XNA Game Studio (que está integrado en Visual Studio) hace que el proceso actual de incorporación

de fuentes muy fácil, pero p lantea algunas cuestiones juríd icas espinoso. Usted no puede distr ibuir legalmente

un programa XNA a menos que también se puede distribuir legalmente la fuente incorporada, y con la mayo-

ría de las fuentes distr ibuido con el propio Windows o apli caciones de Windows, este no es el caso.

En el menú Archivo de Visual Studio, seleccione Nuevo y Proyecto. A la izquierda del cuadro de diálogo, se-

leccione Visual C # y XNA Game Studio 4.0. En el centro, seleccione Windows Phone juego (4.0). Seleccione

una ubicación y escriba un nombre de proyecto de XnaHolaMundo.

Visual Studio creará dos proyectos, uno para el programa y el otro para el contenido del programa. Los pro-gramas de XNA por lo general contienen gran cantidad de contenidos, mapas de bits en su mayoría y los mo-

delos 3D, pero las fuentes también. Para agregar una fuente a este programa, haga clic en el proyecto de con-

tenido (con la etiqueta "XnaHolaMundoContent (contenido)" y desde el menú emergente y seleccione Agregar

Página 18

nuevo elemento. Elija Sprite Font, dejar el nombre de archivo como SpriteFont1.spritefont, y haga clic en

Agregar.

La palabra "sprite" es común en la programación de juegos y por lo general se refiere a un pequeño mapa de

bits que se pueden mover muy rápidamente, al igual que los spr ites que se puede encontrar en un bosque en-

cantado.

En XNA, aunque las fuentes son los spri tes. Verás Spr iteFont1.spr itefont aparecen en la lista de archivos del

di rector io de contenido, y usted puede edi tar una extensa comentó archivo XML que describe la fuente.

< X na Co n t e n t x ml n s : Gr a p h i c s = " M i c r o s o f t . X n a . F r a me wo r k . Co n t e n t . P i p e l i n e . Gr a p h i c s " >< A s s e t T y p e = " Gr a p h i c s : F o n t D e s c r i p t i o n " >

< F o n t Na me > S e g o e U I Mo n o < / F o n t N a me >< S i z e > 1 4 < / S i z e >< S p a c i n g > 0 < / Sp a c i n g > t r u e < / Us e Ke r n i n g >< S t y l e > R e g u l a r < / S t y l e >< C h a r a c t e r R e g i o n s >

< Ch a r a c t e r R e g i o n >< S t a r t > & # 3 2 ; < / S t a r t >< En d > & # 1 2 6 ; < / En d >

< / Ch a r a c t e r Re g i o n >< / Ch a r a c t e r R e g i o n s >

< / A s s e t >

< / Xn a Co n t e n t >

En su estado inicial, el proyecto XNAHolaMundo contiene dos archivos de código C #: Program.cs y Ga-

me1.cs. La primera es muy simple y resulta ser irrelevante para Windows Phone 7 juegos! Una directiva de

preprocesador permite a la clase del Programa de si un símbolo de Windows o Xbox está definido. Al compi-

lar los programas de Windows de teléfono, el símbolo WINDOWS_PHONE se define en su lugar.

Para la mayoría de los juegos pequeños, estará gastando todo su tiempo en el archivo Game1.cs. La clase GA-

ME1 deriva de juego y en su estado prístino que define dos campos: los gráficos y SpriteBatch. A los dos cam-

pos que quiero añadir tres más:

n a m e s p a c e X n a HOl a Mu n d o{

p ub l i c c l a s s G a m e 1 : Mi c r o s o f t . X n a . F r a me wo r k . Ga me{

Gr a p h i c s De v i c e Ma n a g e r g r a p h i c s ;Sp r i t e Ba t c h s p r i t e Ba t c h ;s t r i n g t e x t = " Ho l a , Wi n d o ws P h o n e 7 ! " ;S p r i t e Fo n t s e g o e 1 4 ;Ve c t o r 2 t e x t P o s i t i o n ;…

}}

Estos tres nuevos campos se limitan a indicar el texto que el programa mostrará, la fuente que utilizará para

mostrarlo, y la posición del texto en la pantalla. Esa posición se especifica en píxeles coordenadas respecto a laesquina superi or i zquierda de la pantalla. La estructura Vector2 tiene dos campos denominados X e Y de tipo

float. Para efectos de la performance, todos los valores de punto flotante en XNA son de precisión simple. (Sil -

verlight es de doble precisión.) La estructura Vector2 se ut il iza a menudo para los puntos de dos dimensiones,

tamaños, e incluso vectores.

Cuando el juego se ejecuta en el teléfono, la clase GAME1 se crea una instancia y el constructor GAME1 se

ejecuta. Este código estándar es siempre para usted:

p u b l i c Ga me 1 ( ){

g r a p h i c s = n e w Gr a p h i c s De v i c e Ma n a g e r ( t h i s ) ;C o n t e n t . Ro o t Di r e c t o r y = " C o n t e n t " ;T a r g e t E l a p s e d T i me = T i me S p a n . F r o mT i c k s ( 3 3 3 3 3 3 ) ;

}

La primera sentencia inicializa el campo de los gráficos. En la segunda declaración, de contenidos es una ca-

racterística de juego del tipo ContentManager y RootDirectory es una característica de esa clase. Al establecer

Página 19

esta propiedad en "Content" es coherente con el contenido de la guía que se está almacenando la fuente

14point Segoe.

La tercera declaración establece un tiempo de bucle de juego del programa, que regula el ritmo al que el pro-

grama actualiza la pantalla de vídeo. El teléfono de Windows 7 pantalla se actualiza a 30 cuadros por segundo.

Después de GAME1 se crea una instancia, un método de ejecución se denomina en la instancia GAME1, y el

juego inicia la clase base del proceso de puesta en marcha del juego. Uno de los primeros pasos es una llamada

al método Initialize, que un derivado del juego puede reemplazar. XNA Game Studio genera un método de

esqueleto:

p r o t e c t e d o v e r r i d e v o i d I n i t i a l i z e ( ){

b as e . I n i t i a l i z e ( ) ;}

El método Ini tialize no es el lugar para cargar la pila u otros contenidos. Que viene un poco más tarde, cuando

la clase base llama al método LoadContent.

p r o t e c t e d ov e r r i d e v o i d L o a d Co n t e n t ( ){

s p r i t e Ba t c h = n e w S p r i t e Ba t c h ( Gr a p h i c s De v i c e ) ;s e g o e 1 4 = t h i s . Co n t e n t . L o a d <S p r i t e F o n t > ( " S e g o e 1 4 " ) ;V e c t o r 2 t e x t S i z e = s e g o e 1 4 . Me a s u r e S t r i n g ( t e x t ) ;

V i e wp o r t v i e wp o r t = t h i s . Gr a p h i c s De v i c e . V i e wp o r t ;t e x t Po s i t i o n = n e w V e c t o r 2 ( ( v i e wp o r t . Wi d t h - t e x t S i z e . X ) / 2 ,( v i e wp o r t . He i g h t - t e x t S i z e . Y ) / 2 ) ;

}

Sus métodos que dibujan probablemente no contienen ningún código cuestionable, es por lo general en el

método de actualización, donde se esconden los problemas. Evi te las expresiones para participar en las clases.

Estos siempre causan asignación de memoria. Crear instancias de una estructura está muy bien, sin embargo,

porque las instancias estructura se almacenan en la pila y no en el montón. (XNA utiliza estructuras en lugar

de clases para muchos tipos de objetos que a menudo se deberá crear en la actualización.) Sin embargo, las

asignaciones del montón también pueden ocurrir sin explícita nuevas expresiones. Por ejemplo, la concatena-

ción de dos cadenas crea otra cadena en el montón. Si usted necesita para llevar a cabo la manipulación de

cadenas en la actualización, debe utilizar StringBuilder. Convenientemente, XNA proporciona métodos paramostrar el texto con objetos Str ingBui lder

En XnaHolaMundo, sin embargo, el método de actualización es trivial. El texto mostrado por el programa se

basa en un solo lugar. Todos los cálculos necesarios ya se han realizado en el método LoadContent. Por esa

razón, el método de actualización se quedará simplemente como XNA Game Studio originalmente lo creó:

p r o t e c t e d o v e r r i d e v o i d Up d a t e ( Ga me T i me g a me T i me ){

i f ( Ga me Pa d . Ge t S t a t e ( P l a y e r I n d ex . On e ) . B u t t o n s . B a c k = = B u t t o n St a t e . P r e s s e d )t h i s . E x i t ( ) ;

b a s e . Up d a t e ( g a me T i me ) ;}

El código por defecto se utiliza en la clase Gamepad estática para comprobar si el hardware del teléfono enconcreto el botón Atrás ha sido presionado y que utiliza para salir del juego. Por último, está el método Draw.

La versión creada para simplemente los colores de fondo con una luz azul:

p r o t e c t e d o v e r r i d e v o i d Dr a w( Ga me T i me g a m e T i me ){

Gr a p h i c s De v i c e . C l e a r ( Co l o r . Co r n f l o we r B l u e ) ;b a s e . Dr a w( g a me T i me ) ;

}

El color se conoce como CornflowerBlue y ha alcanzado el estatus de icono en la comunidad de programación

XNA. Cuando estás desarrollando un programa de XNA, la apariencia de la pantalla azul de la luz es muy

reconfortante porque signifi ca que el programa tiene por lo menos llegado tan lejos como Draw.Pero si quieren conservar el poder en las pantallas OLED, que desea ir con fondos oscuros. En mi versión revi-

sada, me he comprometido mediante el establecimiento de los antecedentes de un azul más oscuro. Al igual

Página 20

que en Silverlight, XN A apoya los 140 colores que han l legado a ser considerados como los estándares. El texto

es de color blanco:

p r o t e c t e d o v e r r i d e v o i d Dr a w( Ga me T i me g a m e T i me ){

Gr a p h i c s De v i c e . C l e a r ( Co l o r . Na v y ) ;s p r i t e B a t c h . B e g i n ( ) ;s p r i t e Ba t c h . Dr a wS t r i n g ( s e g o e 1 4 , t e x t , t e x t P o s i t i o n , C o l o r . Wh i t e ) ;s p r i t e Ba t c h . E n d ( ) ;b a s e . Dr a w( g a me T i me ) ;

}

Sprites sale en la pantalla al ser incluido en un objeto SpriteBatch, que se creó durante la llamada a LoadCon-

tent. Entre las llamadas al inicio y de finalización no puede haber varias llamadas a DrawString para dibujar

texto y Draw para dibujar mapas de bits. Esas son las únicas opciones. Este particular por las referencias

DrawString llamar a la fuente, el texto a mostrar, la posición de la esquina superior izquierda del texto relativa

a la esquina superior izquierda de la pantalla, y el color. Y aquí está:

Ilustración 1: Resultado de la ejecución de la aplicación XNA

¡Oh, qué interesante! De forma predeterminada, los programas de Silverlight surgen en el modo de retrato,

pero los programas de XNA llegar en modo horizontal. Vamos a encender el teléfono o el emulador de lado:

Ejemplos

A continuación se muestra el ejemplo completo del que hemos hablado en el capítulo:

El MainPage.xaml:

< p ho n e : Ph o n e A pp l i c a t i o n Pa g ex : C l a s s = " S i l v e r l i g h t H e l l o Ph o n e . Ma i n Pa g e "x ml n s = " h t t p : / / s c h e ma s . mi c r o s o f t . c o m/ w i n f x / 2 0 0 6 / x a ml / p r e s e n t a t i o n "x ml n s : x = " h t t p : / / s c h e ma s . mi c r o s o f t . c o m/ wi n f x / 2 0 0 6 / x a ml "

Página 21

x ml n s : p h o n e = " c l r - n a me s p a c e : Mi c r o s o f t . P h o n e . Co n t r o l s ; a s s e mb l y = Mi c r o s o f t . P h o n e "x ml n s : s h e l l = " c l r - n a me s p a c e : Mi c r o s o f t . P h o n e . S h e l l ; a s s e mb l y = Mi c r o s o f t . P h o n e "x ml n s : d = " h t t p : / / s c h e ma s . mi c r o s o f t . c o m/ e x p r e s s i o n / b l e n d / 2 0 0 8 "x ml n s : mc = " h t t p : / / s c h e ma s . o p e n x ml f o r ma t s . o r g / ma r k u p - c o mp a t i b i l i t y / 2 0 0 6 "F on t F a mi l y = " { S t a t i c Re s o u r c e Ph o n e F o n t F a mi l y N o r ma l } "F on t S i z e = " { S t a t i c Re s o u r c e P h o n e F o n t S i z e No r ma l } "F o r e g r o u n d = " { S t a t i c Re s o u r c e Ph o n e F o r e g r o u n d Br u s h } "S u p po r t e d Or i e n t a t i o n s = " Po r t r a i t " Or i e n t a t i o n = " P o r t r a i t "mc : I g n o r a b l e = " d " d : De s i g n Wi d t h = " 4 8 0 " d : D e s i g n He i g h t = " 7 6 8 "s h e l l : S y s t e mT r a y . I s V i s i b l e = " T r u e " >

< ! - - L a y o u t R o o t c o n t a i n s t h e r o o t g r i d wh e r e a l l o t h e r p a g e c o n t e n t i s p l a c e d- - >

< Gr i d x : Name = " L a y o u t R o o t " B a c k g r o u n d = " T r a n s p a r e n t " >< Gr i d . R o wDe f i n i t i o n s >

< Ro wDe f i n i t i o n He i g h t = " A u t o " / >< Ro wDe f i n i t i o n He i g h t = " * " / >

< / Gr i d . R o wDe f i n i t i o n s >

< ! - - T i t l e Pa n e l c o n t a i n s t h e n a me o f t h e a p p l i c a t i o n a n d p a g e t i t l e - - > < S t a c k P a n e l x : Name = " T i t l e Pa n e l " Gr i d . Ro w= " 0 " Ma r g i n = " 1 2 , 1 7 , 0 , 2 8 " >

< T e x t B l o c k x : Name = " A pp l i c a t i o n T i t l e " T e x t = " S I L V ERL I GH T H OL A " S t y l e = " { S t a t i c Re s o u r c e P h o n eT e x t No r m a l S t y l e } " / >< T e x t B l o c k x : Name = " P a g e T i t l e " T e x t = " p á g i n a p r i n c i p a l " Ma r g i n = " 9 , - 7 , 0 , 0 " S t y l e = " { S t a t i c Re s o u r c e P h o n e Te x t T i -

t l e 1 St y l e } " / >< / S t a c k Pa n e l >

< ! - - C o n t e n t P a n e l - p l a c e ad d i t i o n a l c o n t e n t h e r e - - > < Gr i d x : Name = " C on t e n t P a n e l " Gr i d . Ro w= " 1 " Ma r g i n = " 1 2 , 0 , 1 2 , 0 " >

< T e x t B l o c k T e x t = " HOL A , Wi n d o w s Ph o n e 7 ! "

Ho r i z o n t a l A l i g n me n t = " Ce n t e r "Ve r t i c a l A l i g n me n t = " Ce n t e r " / >

< / Gr i d >< / Gr i d >

< ! - - S a mp l e c o d e s h o wi n g u s a g e o f A p p l i c a t i o n Ba r 

< s h e l l : A p p l i c a t i o n B a r I s V i s i b l e =" T r u e " I s Me n u En a b l e d = " T r u e " > < s h e l l : A p p l i c a t i o n Ba r I c o n B u t t o n x : N a me = " a p p b a r _ b u t t o n 1 "

I c o n Ur i = " / I ma g e s / a p p b a r _ b u t t o n 1 . p n g " T e x t = " B u t t o n 1 " > < / s h e l l : A p p l i c a t i o n B a r I c o n B u t t o n > < s h e l l : A p p l i c a t i o n Ba r I c o n B u t t o n x : N a me = " a p p b a r _ b u t t o n 2 "

I c o nUr i = " / I ma g e s / a p p b a r _ b u t t o n 2 . p n g " T e x t = " B u t t o n 2 " > < / s h e l l : A p p l i c a t i o n B a r I c o n Bu t t o n > < s he l l : A p p l i c a t i o n B a r . Me n u I t e ms >

< s h e l l : A p p l i c a t i o n B a r Me n u I t e m x : N a me = " me n u I t e m1 " T e x t = " Me n u I t e m 1 " > < / s h e l l : A p p l i c a t i o n Ba r Me n u I t e m> < s h e l l : A p p l i c a t i o n B a r Me n u I t e m x : N a me = " me n u I t e m2 " T e x t = " Me n u I t e m 2 " > < / s h e l l : A p p l i c a t i o n Ba r Me n u I t e m>

< / s h e l l : A p p l i c a t i o n B a r . Me n u I t e ms >

< / s h e l l : Ap p l i c a t i o n B a r > 

- - >



El A pp.xaml:

< Ap p l i c a t i o nx : C l a s s = " S i l v e r l i g h t He l l o Ph o n e . A p p "x ml n s = " h t t p : / / s c h e ma s . mi c r o s o f t . c o m/ w i n f x / 2 0 0 6 / x a ml / p r e s e n t a t i o n "x ml n s : x = " h t t p : / / s c h e ma s . mi c r o s o f t . c o m/ wi n f x / 2 0 0 6 / x a ml "x ml n s : p h o n e = " c l r - n a me s p a c e : Mi c r o s o f t . P h o n e . Co n t r o l s ; a s s e mb l y = Mi c r o s o f t . P h o n e "x ml n s : s h e l l = " c l r - n a me s p a c e : Mi c r o s o f t . P h o n e . S h e l l ; a s s e mb l y = Mi c r o s o f t . P h o n e " >

< ! - - A p p l i c a t i o n Re s o u r c e s - - > < Ap p l i c a t i o n . R e s o u r c e s >< / A p p l i c a t i o n . Re s o u r c e s >

< A p p l i c a t i o n . A p p l i c a t i o n L i f e t i me Ob j e c t s >< ! - - R e q u i r e d o b j e c t t h a t h a n d l e s l i f e t i me e v e n t s f o r t h e a p p l i c a t i o n - - > < s h e l l : P h o n e A p p l i c a t i o n S e r v i c e

L a u n c h i n g = " A p p l i c a t i o n _ L a u n c h i n g " C l o s i n g = " A p p l i c a t i o n _ Cl o s i n g "A c t i v a t e d = " A p p l i c a t i o n _ Ac t i v a t e d " D e a c t i v a t e d = " A p p l i c a t i o n _ De a c t i v a t e d " / >

< / A p p l i c a t i o n . A p p l i c a t i o n L i f e t i me Ob j e c t s >

< / Ap p l i c a t i o n >

El archive de código asociado a App.xaml:

u s i n g S y s t e m;u s i n g S y s t e m. Co l l e c t i o n s . Ge n e r i c ;



Página 22

u s i n g S y s t e m. L i n q ;u s i n g S y s t e m. Ne t ;u s i n g Sy s t e m. Wi n d o ws ;u s i n g S y s t e m. Wi n d o ws . Co n t r o l s ;u s i n g Sy s t e m. Wi n d o ws . Do c u me n t s ;u s i n g S y s t e m. Wi n d o ws . I n p u t ;u s i n g S y s t e m. Wi n d o ws . Me d i a ;u s i n g Sy s t e m. Wi n d o ws . Me d i a . An i ma t i o n ;u s i n g S y s t e m. Wi n d o ws . Na v i g a t i o n ;u s i n g S y s t e m. Wi n d o ws . S h a p e s ;u s i n g M i c r o s o f t . P h o n e . Co n t r o l s ;u s i n g Mi c r o s o f t . P h o n e . S h e l l ;

n a me s p a c e Si l v e r l i g h t H e l l o Ph o n e{

p u b l i c p a r t i a l c l a s s A p p : A p p l i c a t i o n {

/ / E a s y a c c e s s t o t h e r o o t f r a me p u b l i c P h o n e A p p l i c a t i o n F r a me Ro o t F r a me { g e t ; p r i v a t e s e t ; }

/ / Co n s t r u c t o r p u b l i c A p p ( ){

/ / Gl o b a l h a n d l e r f o r u n c a u g h t e x c e p t i o n s . / / No t e t h a t e x c e p t i o n s t h r o w n b y A p p l i c a t i o n B a r I t e m. Cl i c k wi l l n o t g e t c a u g h t h e r e . U n h a nd l e d Ex c e p t i o n + = A p p l i c a t i o n _ Un h a nd l e d Ex c e p t i o n ;

/ / S t a n d a r d S i l v e r l i g h t i n i t i a l i z a t i o n I n i t i a l i z e Co mp o n e n t ( ) ;

/ / P h o n e - s p e c i f i c i n i t i a l i z a t i o n I n i t i a l i z e P h o n e A p p l i c a t i o n ( ) ;

}

/ / Co d e t o e x e c u t e wh e n t h e a p p l i c a t i o n i s l a u n c h i n g ( e g , f r o m S t a r t ) / / T h i s c o d e wi l l n o t e x e c u t e wh e n t h e a p p l i c a t i o n i s r e a c t i v a t e d p r i v a t e v o i d A p p l i c a t i o n _ L a u n c h i n g ( o b j e c t s e n d e r , L a u n c h i n g Ev e n t A r g s e ){}

/ / Co d e t o e x e c u t e wh e n t h e a p p l i c a t i o n i s a c t i v a t e d ( b r o u g h t t o f o r e g r o u n d ) / / T h i s c o d e wi l l n o t e x e c u t e wh e n t h e a p p l i c a t i o n i s f i r s t l a u n c h e d p r i v a t e v o i d Ap p l i c a t i o n _ Ac t i v a t e d ( o b j e c t s e n d e r , A c t i v a t e d E v e n t A r g s e )

{}

/ / Co d e t o e x e c u t e wh e n t h e a p p l i c a t i o n i s d e a c t i v a t e d ( s e n t t o b a c k g r o u n d ) / / T h i s c o d e wi l l n o t e x e c u t e wh e n t h e a p p l i c a t i o n i s c l o s i n g p r i v a t e v o i d Ap p l i c a t i o n _ De a c t i v a t e d ( o b j e c t s e n de r , De a c t i v a t e d Ev e n t A r g s e ){}

/ / Co d e t o e x e c u t e wh e n t h e a p p l i c a t i o n i s c l o s i n g ( e g , u s e r h i t B a c k ) / / T h i s c o d e wi l l n o t e x e c u t e wh e n t h e a p p l i c a t i o n i s d e a c t i v a t e d p r i v a t e v o i d Ap p l i c a t i o n _ Cl o s i n g ( o b j e c t s e n d e r , Cl o s i n g Ev e n t A r g s e ){}

/ / Co d e t o e x e c u t e i f a n a v i g a t i o n f a i l s

v o i d Ro o t F r a me _ Na v i g a t i o n Fa i l e d ( o b j e c t s e n d e r , Na v i g a t i o n Fa i l e d Ev e n t A r g s e ){

i f ( Sy s t e m. Di a g n o s t i c s . D e b u g g e r . I s A t t a c h e d ){

/ / A n a v i g a t i o n h a s f a i l e d ; b r e a k i n t o t h e d e b u g g e r S y s t e m. Di a g n o s t i c s . D e b u g g e r . B r e a k ( ) ;

}}

/ / Co d e t o e x e c u t e o n Un h a n d l e d E x c e p t i o n s p r i v a t e v o i d A p p l i c a t i o n _ Un h an d l e d E x c e p t i o n ( o b j e c t s e n d e r , A p p l i c a t i o n Un h a n d l e d E x c e p t i o n Ev e n t A r g s e ){

i f ( Sy s t e m. Di a g n o s t i c s . D e b u g g e r . I s A t t a c h e d ){

/ / A n u n h a n d l e d e x c e p t i o n h a s o c c u r r e d ; b r e a k i n t o t h e d e b u g g e r S y s t e m. Di a g n o s t i c s . D e b u g g e r . B r e a k ( ) ;

}}

# r e g i o n Ph o n e a p p l i c a t i o n i n i t i a l i z a t i o n

Página 23

/ / Av o i d d o u b l e - i n i t i a l i z a t i o n p r i v a t e b o o l p h o n e Ap p l i c a t i o n I n i t i a l i z e d = f a l s e ;

/ / Do n o t a d d a n y a d d i t i o n a l c o d e t o t h i s me t h o d p r i v a t e v o i d I n i t i a l i z e P h o n e Ap p l i c a t i o n ( ){

i f ( p h o n e Ap p l i c a t i o n I n i t i a l i z e d )r e t u r n ;

/ / Cr e a t e t h e f r a me b u t d o n ' t s e t i t a s Ro o t V i s u a l y e t ; t h i s a l l o ws t h e s p l a s h / / s c r e e n t o r e ma i n a c t i v e u n t i l t h e a p p l i c a t i o n i s r e a d y t o r e n d e r . R o o t F r a me = n e w P ho n e Ap p l i c a t i o n F r a me ( ) ;

R o o t F r a me . N a v i g a t e d + = Co mp l e t e I n i t i a l i z e Ph o n e Ap p l i c a t i o n ;

/ / H a n d l e n a v i g a t i o n f a i l u r e s R o o t F r a me . N a v i g a t i o n Fa i l e d + = R o o t F r a me _ Na v i g a t i o n Fa i l e d ;

/ / E n s u r e we d o n ' t i n i t i a l i z e a g a i n p h o n e A p p l i c a t i o n I n i t i a l i z e d = t r u e ;

}

/ / Do n o t a d d a n y a d d i t i o n a l c o d e t o t h i s me t h o d p r i v a t e v o i d Co mp l e t e I n i t i a l i z e Ph o n e Ap p l i c a t i o n ( o b j e c t s e n d e r , Na v i g a t i o n Ev e n t A r g s e ){

/ / S e t t h e r o o t v i s u a l t o a l l o w t h e a p p l i c a t i o n t o r e n d e r i f ( Ro o t V i s u a l ! = Ro o t F r a me )

Ro o t V i s u a l = R o o t F r a me ;

/ / R e mo v e t h i s h a n d l e r s i n c e i t i s n o l o n g e r n e e d e d R o o t F r a me . N a v i g a t e d - = Co mp l e t e I n i t i a l i z e Ph o n e Ap p l i c a t i o n ;

}

# e n d r e g i o n}

}

En l as propiedades del proyecto, el archivo WM AppM anifest.xml:

< ? x ml v e r s i o n = " 1 . 0 " e n c o d i n g = " u t f - 8 " ? >

< De p l o y me n t x ml n s = " h t t p : / / s c h e ma s . m i c r o s o f t . c o m/ wi n d o ws p h o n e / 2 0 0 9 / d e p l o y me n t " A p p Pl a t f o r mV e r s i o n = " 7 . 0 " >< A p p x ml n s = " " P r o d u c t I D= " { 9 0 f 5 8 0 4 d - 6 9 d c - 4 5 2 6 - 9 a 7 e - 0 c 9 0 a 90 6 9 d 0a } " T i t l e = " S i l v e r l i g h t Ho l a P h o n e " R u n t i -

m e T y p e = " Si l v e r l i g h t " V e r s i o n = " 1 . 0 . 0 . 0 " Ge n r e = " a p p s . n o r ma l " Au t h o r = " S i l v e r l i g h t Ho l a Ph o n e a u t h o r " De s c r i p t i o n = " S a mp l e d e -s c r i p t i o n " Pu b l i s h e r = " S i l v e r l i g h t He l l o Ph o n e " >

 A p p l i c a t i o n I c o n . p n g < Ca p a b i l i t i e s >

< Ca p a b i l i t y Na me = " I D _ CA P _ NE T WOR KI N G" / >< Ca p a b i l i t y Na me = " I D _CA P_ L OCA TI ON" / >< Ca p a b i l i t y Na me = " I D _ CA P_ S ENS ORS " / >< Ca p a b i l i t y Na me = " I D _ CA P _ MI C ROP HON E" / >< Ca p a b i l i t y Na me = " I D _CA P_ ME DI A L I B " / >

< Ca p a b i l i t y Na me = " I D _ CA P _ GA ME RS E RV I C ES " / >< Ca p a b i l i t y Na me = " I D _ CA P_ P HON EDI A L ER" / >< Ca p a b i l i t y Na me = " I D _ CA P_ P US H_ N OT I F I CA T I ON" / >< Ca p a b i l i t y Na me = " I D _ C A P _ WE B B R OWS E R CO MP ON E NT " / >

< / C a pa b i l i t i e s >< T a s k s >

< De f a u l t T a s k Name = " _ d e f a u l t " N a v i g a t i o n Pa g e = " Ma i n Pa g e . x a ml " / >< / T a s k s >< T o k e n s >

< T e mp l a t e T y p e 5 >

< Ba c k g r o u n d I ma g e URI I s Re l a t i v e = " t r u e " I s R e s o u r c e = " f a l s e " > Ba c k g r o u n d . p n g < C o u n t > 0 < / C o u n t >< T i t l e > Si l v e r l i g h t HOL AP h o n e < / T i t l e >

< / T e mp l a t e T y p e 5 >

< / T o k e n s >< / A p p >

< / De p l o y me n t >

Windows Phone. Desarollo de Aplicaciones (Ejemplo)

Documents

Transcript of Windows Phone. Desarollo de Aplicaciones (Ejemplo)