Manual 1 Windows Phone 7

Tutorial Windows Phone 7 Bsico
CONGRESO UNIVERSITARIO M VIL 2012 LUIS S ANDOVAL EDGAR CHAVARRA
Creacin de una aplicacin de ejemplo para Windows Phone 7
Nivel necesario:
Bsico
ndice
1. 2. 3. 4. 5. Software Requerido. Introduccin. Cmo crear proyectos en Visual Studio? Primera aplicacin Windows Phone 7 (Navegador). Crear diferentes vistas y como comunicarlas.

Software Requerido
Overview
El Windows Phone SDK incluye: Microsoft Visual Studio 2010 Express for Windows Phone Windows Phone Emulator Windows Phone SDK 7.1 Assemblies Silverlight 4 SDK and 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
Requerimientos del Sistema

Supported Operating Systems: Windows 7, Windows Vista Windows Vista (x86 and x64) with Service Pack 2 todas las ediciones excepto Starter Edition Windows 7 (x86 and x64) todas las ediciones excepto Starter Edition La instalacin requiere 4 GB de espacio libre en disco. 3 GB RAM Windows Phone Emulator requiere compibilidad con DirectX 10 o tarjeta de video equivalente con WDDM 1.1 driver El Windows Phone SDK 7.1 es compatible con la versin final de Visual Studio 2010 SP1.

Instrucciones
La liga de descarga es la siguiente:
https://dev.windowsphone.com/en-us/downloadsdk
Introduccin
Objetivo: Familiarizar al desarrollador con el entorno de desarrollo para Windows Phone 7 Conocimiento previo: 1. Conocimientos de POO. 2. Lenguaje de programacin C, C++ o JAVA 3. Conocimientos bsicos del lenguaje C#

Aspectos y servicios del mvil que debes conocer Tamao de Pantalla: 480 x 800 Localizador GPS Acelermetro Wi-fi Cmara Push Notifications
Cmo crear un proyecto en Visual Studio?

1. Inicia Visual Studio:

2. Crear un nuevo Proyecto de Windows Phone 7:

3. Selecciona la versin para la que vas a desarrollar: 7.0 7.1 (Windows Phone 7.5 Mango)
4. Estructura del Programa:

Explorador de Soluciones:

ToolBox:
Para mayor informacin de cada uno de los controles consulta: http://msdn.microsoft.com/en-us/library/ff402549(v=vs.92).aspx

Refencias a Namespace:
Para mas informacin sobre referencias a los namespaces consulta: http://msdn.microsoft.com/es-es/library/z2kcy19k(v=VS.100).aspx

Primera aplicacin para Windows Phone7

Objetivo:
Realizar una aplicacin que permita visualizar una pgina de internet en el dispositivo. Familiarizarse con la estructura del programa, el SDK y aprender a usar controles. Detalles de la interfaz de usuario: Splash Screen:
Tamao 400 x 800

Icono de la aplicacin y Backgroud:
Tamao 62 x 62
Tamao 173x173 Pantalla Principal:

Desarrollo de la aplicacin: 1) Crear un nuevo proyecto en Visual Studio 2010 como se explico en el paso anterior 2) Como vimos anteriormente la pantalla que aparece al realizar el paso 1 es la siguiente:
Para modificar el encabezado de la aplicacin debes modificar el texto del lado derecho (xaml si tienes dudas de como hacerlo o quieres saber mas de como usar XAML consulta la

siguiente liga: http://msdn.microsoft.com/en-us/library/ms752059.aspx) en el siguiente campo modifica lo siguiente: <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> Esto es parte del cdigo xaml de la aplicacin el cual como podrs notar parecen etiquetas de HTML la primera parte TextBlock indica el tipo de control en pantalla x:Name el nombre del control Text es una de las propiedades del control Style el estilo definido en una plantilla precargada para este control (como en HTML). Todas estas propiedades y las puedes modificar directamente con cdigo XAML o puedes modificarlas seleccionando el control con un clic en la pantalla del lado izquierdo y debajo del explorador de soluciones aparecen sus propiedades ah puedes hacer tambin las modificaciones.
De la misma forma Modifica el Titulo de la aplicacin:

<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> Modifica page name por Navegador. Ahora el siguiente paso es arrastrar a la pantalla un botn, un texbox y un WebBrowser:

Te sugerimos realizar el siguiente posicionamiento de los elementos en pantalla:
Ahora modificaremos un poco las propiedades de los elementos que acabas de aadir y crearemos el evento del botn para que el usuario pueda ver en el navegador del centro la pgina que ingreso dentro del TextBox. Primero modificaremos los nombres de los controles en pantalla: Sugerencia: Usa nombres asociados con lo que hace el controlador como por ejemplo el Botn puedes llamarlo Navegar al TextBox

Direccin y al WebBrowser como Sitio te resultara ms sencillo recordar que hace cada control cuando tengas muchos de ellos en un proyecto. Para el TexBox modifica lo siguiente: <TextBox Height="72" HorizontalAlignment="Left" Margin="0,6,0,0" Name="Direccion" Text="TextBox" VerticalAlignment="Top" Width="340" /> Text = congresouniversitariomovil.com (ser la pgina que visitaremos inicialmente el usuario debe poder ingresar en ese control la direccin que desee) Recuerda que este cambio puedes realizar dentro del cdigo XAML o seleccionando el control en las propiedades que aparecen debajo del explorador de soluciones. Para el Botn modifica lo siguiente: <Button Content="Button" Height="72" HorizontalAlignment="Right" Margin="0,6,6,0" Name="Navegar" VerticalAlignment="Top" Width="126" /> Content = Ir Ahora agregaremos el evento para el botn: Lo que debes hacer es dar doble clic sobre el botn que acabamos de arrastrar a la vista del simulador del lado izquierdo dentro de la clase MainPage.cs se creara automticamente el mtodo del evento correspondiente:


La siguiente accin que debemos hacer es lograr que el usuario pueda poner en el TextBox que creamos anteriormente la direccin que desee consultar y cuando de un toque sobre el botn en la parte inferior se muestre la pgina que desea consultar. Para hacer esto agregaremos al mtodo del evento el siguiente cdigo: private void Navegar_Click(object sender, RoutedEventArgs e) { string url; //Variable donde almacenaremos el url que escribe el usuario url = "http://" + Direccion.Text.ToString(); //obteniendo el texto del TextBox y convirtiendo lo en string Sitio.Source = new Uri(url, UriKind.RelativeOrAbsolute); // hacemos la fuente del control WebBrowser Sitio la Url que escribi el usuario as al dar clic sobre el botn el usuario vera el sitio que desea consultar en el control se crea un objeto de la clase Uri ya que la fuente debe ser una direccin o una referencia a algn contenido la propiedad UriKind debe especificar que tipo de url es si es Absoluto o Relativo. } Ahora puedes ver lo que sucede compilando el proyecto para hacerlo puedes presionar F5 o dar clic en el resultado que debes ver despus de introducir google.com por ejemplo es el siguiente:


Ahora mejoraremos la apariencia de la aplicacin modificaremos el texto de inicio contenido en el TextBox para que muestre anote aqu la direccin y mejoraremos la apariencia del splash screen y los iconos de la aplicacin. Para realizar esto debemos recordar el tamao de cada una de estas imgenes: Splash Screen 480 x 800 Icon aplication 62 x 62 Background 172 x 172
Puedes usar las imgenes que se incluyen en este manual u otras de tu eleccin. Lo primero que modificaremos sern el icono de la aplicacin y el backgound (este es el icono que anclamos a la pantalla de inicio del dispositivo) Puedes eliminar las imgenes anteriores y agregar las nuevas o conservar las anteriores y agregar la nueva imagen cualquiera de las 2 opciones es correcta solo recuerda si eliminas las imgenes anteriores debes colocar las nuevas con el mismo nombre y las mismas propiedades de las imgenes anteriores esto es:

Agregando las nuevas imgenes: Selecciona el proyecto en el explorador de soluciones despus clic derecho y en el men add agregar existing item incluye la imagen que deseas agregar:
Una vez agregadas las imgenes puedes modificar las propiedades del proyecto para agregar el icono de la aplicacin y el background.

Para hacer esto da clic en la barra de herramientas de arriba en Project y luego en Navegador Properties veras lo siguiente:

Despus de recompilar el programa el resultado es el siguiente:
Splash screen background e icono

Crear diferentes vistas y Como comunicarlas?

Tipos de vista: Pivot Panorama
Tipo de orientacin: Pivot Esta vista permite insertar ms sub-vistas. Panorama Esta vista como su nombre lo dice permite poner de fondo una imagen como si fuera una foto panormica incluyendo controles para cada parte en pantalla Crea un nuevo proyecto y agrega una vista tipo Pivot y una Panormica para ilustrar el uso de ambas y tambin para comunicarlas. Para aadir una pantalla selecciona el proyecto principal da clic derecho y despus add y luego new item y selecciona Windows phone pivot page de la misma forma aade una panopanormica Aadiendo Vista: Portrait Landscape


Agregaremos 2 botones para ir a cada una de las vistas recin agregadas y en cada vista agregaremos un botn para regresar a la pantalla inicial el resultado es el siguiente:
Ahora agregaremos los eventos para navegar entre vistas: Primer damos doble clic en el botn ir a pivot para generar automticamente el mtodo que genera el evento que necesitamos y agregaremos la siguiente lnea de cdigo: private void button1_Click(object sender, RoutedEventArgs e)

{ NavigationService.Navigate(new Uri("/PivotPage.xaml", UriKind.Relative)); } private void button2_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/PanoramaPage.xaml", UriKind.Relative)); } Es importante que la direccin a la que haces referencia (/PanoramaPage.xaml) tenga el mismo nombre que le diste a al vista que creaste de otro modo obtendrs un error ya que no se encontrara la vista a la que haces referencia. Del mismo modo en los botones correspondientes para las vistas creadas Pivot y Panorama se agreg un botn para poder regresar a la vista principal y tambin debes agregar el evento para volver a la pgina principal el cual es el mismo solo que debes hacer referencia a la vista principal: private void button2_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative)); } private void button1_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative)); } Lo que veras en pantalla es lo siguiente:

Reto:
Crea un cliente de Twitter para Windows phone
Ejemplo cliente Twitter
Material de consulta y referencias del problema: Ejemplos Windows Phone 7 Windows Phone Developer Guide MSDN foros y recursos Descargar Libro
Contacto: Si tienes dudas o preguntas no olvides contactarnos: Luis Sandoval Correo: luis.sandoval@unam.mobi Twitter: @luismetmx Edgar Chavarra

Manual 1 Windows Phone 7

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Manual 1 Windows Phone 7

Hochgeladen von

Copyright:

Verfügbare Formate

Tutorial Windows Phone 7 Bsico

CONGRESO UNIVERSITARIO M VIL 2012 LUIS S ANDOVAL EDGAR CHAVARRA

Creacin de una aplicacin de ejemplo para Windows Phone 7

Tutorial Windows Phone 7 Bsico

Requerimientos del Sistema

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Cmo crear un proyecto en Visual Studio?

Tutorial Windows Phone 7 Bsico

2. Crear un nuevo Proyecto de Windows Phone 7:

Tutorial Windows Phone 7 Bsico

4. Estructura del Programa:

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Para mayor informacin de cada uno de los controles consulta: http://msdn.microsoft.com/en-us/library/ff402549(v=vs.92).aspx

Tutorial Windows Phone 7 Bsico

Para mas informacin sobre referencias a los namespaces consulta: http://msdn.microsoft.com/es-es/library/z2kcy19k(v=VS.100).aspx

Tutorial Windows Phone 7 Bsico

Primera aplicacin para Windows Phone7

Tamao 400 x 800

Tutorial Windows Phone 7 Bsico

Icono de la aplicacin y Backgroud:

Tamao 173x173 Pantalla Principal:

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

De la misma forma Modifica el Titulo de la aplicacin:

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Te sugerimos realizar el siguiente posicionamiento de los elementos en pantalla:

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Despus de recompilar el programa el resultado es el siguiente:

Splash screen background e icono

Tutorial Windows Phone 7 Bsico

Crear diferentes vistas y Como comunicarlas?

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Tutorial Windows Phone 7 Bsico

Crea un cliente de Twitter para Windows phone

Ejemplo cliente Twitter

Das könnte Ihnen auch gefallen