Taller WP8 en TEC de Monterrey

download Taller WP8 en TEC de Monterrey

of 17

  • date post

    24-May-2015
  • Category

    Mobile

  • view

    210
  • download

    1

Embed Size (px)

description

Tutoral básico en donde se aprende a realizar una aplicación para Windows Phone 8 desde 0.

Transcript of Taller WP8 en TEC de Monterrey

  • 1. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer MI PRIMERA APLICACIN PARA WINDOWS PHONE 8

2. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer SISCTI 39 - 5 de Abril del 2014 Introduccin Antes de comenzar con este tutorial debemos de tener intalados el SDK de Visual Studio 2013, el cual pueden descargalo desde aqu. Si ya contamos con esto, empezemos creando un nuevo proyecto (App). Para efectos de este tutorial seleccionaremos la plantilla panorama y le daremos el nombre de SISCTI. 3. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Antes de iniciar aadiremos dentro de la carpeta /Assets una carpeta que nombraremos imgSpeakers. Para esto solo nos posesionamos en la Assets, le damos boton secundario (clic derecho), Agregar Nueva Carpeta. Dentro de esta agregaremos las imgenes de los conferencistas (Carpeta de Conferencistas) realizando el mismo proceso: Clic Derecho (en imgSpeakers) Agregar- Elemento Existente. Asi debe de lucir nuestro proyecto de momento: 4. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Continuando con el tutorial, cabe destacar que la parte grafica es la mas importante en toda aplicacin, es por eso que nos enfocaremos en el diseo de nuestra App, para esto solo trabajaremos con XAML, la cual es la parte de en medio. Lo primero que haremos sera eliminar todo esto: que se encuentra dentro de: Ahora agreguemos dos TextBlocks dentro de un Grid en el espacio que acabamos de liberar, dichos cuadros de texto sern lo primero que visualice el usuario a la hora de entrar a nuestra aplicacin, ya que ser el men principal. Ya por ultimo cambiemos el contenido de Header="first item" por el Header="Men" Asi debe de quedar: En el siguiente elemento panorama (que se encuentra mas abajo del cual trabajamos hasta ahora) eliminaremos lo mismo que en el primero. 5. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Le aadiremos un Header que diga Conferencistas. A este elemento le insertaremos los siguientes elementos: 1 - ListBox (el cual sera general) 1 - Grid , 1 - Image y 1 TextBlock por cada confenrecista. Asi debe de quedar al agregar 5 conferencistas. Tarea 1: Repetir el mismo procedimiento para todo los conferencistas faltantes. 6. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Ahora agreguemos una carpeta, la cual llamaremos Paginas. Despues dentro de esta insertaremos un nuevo elemento por cada conferencista, hay que nombrarlos con una enumeracion para llevar un control. En la pagina Conferencista1 ubiquemos el panel de titulo, el cual contiene el nombre de la aplicacion y el titulo de la pagina. 7. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Cambiemos el contenido de cada Text MI APLICACIN = SISCTI nombre de la pagina = Luis Samra (Nombre del conferencista correspondiente) Una vez realizado esto, en la parte de abajo, encontraremos el panel de contenido, donde se agrega el contenido adicional. Aqu en este Grid insertaremos: 1- Imagen, 1- TextBlock En el TextBlock insertaremos la biografia que se encuentra en la pagina, y agregaremos una propiedad que habilite el acomodo del texto, el cual es TextWrapping="Wrap". Asi nos debe de quedar: Tarea 2: Repetir el mismo procedimiento para todo los conferencistas faltantes. Tip: Si el texto no sabe en el espacio se debera de agregar un y un antes del . Cabe destacar que la imagen la deberan de pasar al frente, para que el texto, al momento de hacer el scroll se oculte o mejor dicho, pase detrs de la imagen. 8. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Ahora aadamos la navegacion hacia estas paginas, para esto a cada Grid que se encuentre dentro del Listbox en la seccion 2 (Conferencistas) del panorama de nuestro archivo MainPage.xaml le daremos la propiedad Tap y les daremos un nombre (id) para poder tener un codigo limpio y ordenado. Un ejemplo sencillo seria seleccionar el primer Grid en donde se encuentra la imagen y el textblock con el texto de Luis Samra, despues de nuestro lado derecho en la barra de propiedades buscamos la propiedad antes mencionada, y en el espacio en blanco, le daremos doble clic primario (boton izquierdo). 9. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Lo que sucedera sera que nos creara el metodo correspondiente para nada mas ingresarle el codigo de navegacion. private void GridConferencista1_Tap(object sender, System.Windows.Input.GestureEventArgs e) { } El cual es: NavigationService.Navigate(new Uri("/Paginas/Conferencista1.xaml", UriKind.Relative)); 10. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Por qu usamos la propiedad Tap en el Grid? Es sencillo, por que asi si tocamos el texto o la imagen, realizara la navegacion, esto en UX es muy importante. Hacemos lo mismo con el Grid que engloba al conferencista 2. private void GridConferencista2_Tap(object sender, System.Windows.Input.GestureEventArgs e) { NavigationService.Navigate(new Uri("/Paginas/Conferencista2.xaml", UriKind.Relative)); } Comprobemos el correcto funcionamiento hasta ahora presionando F5, no sin antes guardar el proyecto. Tarea 3: Repetir el mismo procedimiento para todo los conferencistas faltantes y para el textblock de Acerca de que se encuentra en la primera parte del panorama. Y el segundo textblock? Para el segundo textblock que se encuentra en nuestro menu (Anclar al inicio), lo que haremos antes de ingresar el codigo, sera agregar 2 imgenes, las cuales miden 300x300 px y 150x150px, estas las ubicaremos en la carpeta de Assets, claro esta que las imagenes son alucibas al tema de nuestra aplicacin. Assets/Agregar/Elemento existente: SISCTI39 y SISCTI39(2) 11. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Una ves hecho esto, el codigo es el siguiente: try { FlipTileData flipTile = new FlipTileData(); flipTile.Title = "SISCTI 39"; flipTile.SmallBackgroundImage = new Uri("/Assets/SISCTI39(2).png", UriKind.Relative); flipTile.BackgroundImage = new Uri("/Assets/SISCTI39.png", UriKind.Relative); ShellTile.Create(new Uri("/MainPage.xaml?id=tile", UriKind.Relative), flipTile, true); } catch (Exception ex) { var message = new MessagePrompt { Title = "Error!", Message = "Esta aplicacin ya est anclada." }; message.Show(); } Si a la hora de ingresar el codigo nos aparece este error: La solucion es sencilla, vayamos a References, damos clic secundario (como si fuesemos a agregar una carpeta) y seleccionamos agregar referencia. Navegemos en la carpeta donde me encontraron y ah veran un .dll llamado Coding4Fun.Toolkit.Controls Seleccionenlo y agreguenlo. Ahora bien, regresemos al error, posicionemos el cursor encima y veremos como ahora nos aparece un cuadrito, demos clic en el y nos aparecera la solucion. 12. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Guardemos, limpiemos y compilemos. Hasta el momento tenemos 2 secciones completamente funcionales, ahora regresemos y editemos la tercera seccion de nuestra aplicacin en panorama, la cual nos permitira hacer que las imgenes que ingresemos puedan ser puestas como LockScreenImage. Para esto trabajaremos con imgenes estaticas que agregaremos a nuestra aplicacin. Empezemos creando una carpeta denominada imgPicks, en donde insertaremos 8 imgenes (aqu pueden agregar las que gusten). Ahora en la tercera seccion primero cambiemos el texto del header por el de imgenes. Despues de esto, seleccionemos el primer Border y vayamos a la barra de propiedades, en donde podremos poner nuestra primera imagen seleccionndola desde la categora Pincel, al hacer esto, nuestro XAML cambiara de: A: 13. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Tarea 4: Repetir el mismo procedimiento para todas las imgenes faltantes Ahora para poder darle la funcionalidad de bloqueo de pantalla, lo primero que debemos de hacer sera agregar un .dll mas: Microsoft.Phone.Controls.Toolkit Este .dll lo que nos permitira hacer sera mostrar un ContextMenu al dejar presionado la imagen o a lo que le demos la funcion, para esto aadiremos su referencia al inicio del proyecto. xmlns:toolkit="clr- namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" Previsualizacion: 14. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Para hacer que se muestre dicho ContextMenu, insertaremos el siguiente codigo de diseo debajo de cada . Dndole de una vez su evento con su determinado id (nombre) que nos permitir darle la funcionalidad correcta, para esto pasmonos al archivo MainPage.xaml.cs (Codigo C#). El cdigo correspondiente para el primer evento Click de la imagen que pondremos como bloqueo de pantalla es: private async void imgLockScreen1(object sender, EventArgs e) { if (!LockScreenManager.IsProvidedByCurrentApplication) { await LockScreenManager.RequestAccessAsync(); } if (LockScreenManager.IsProvidedByCurrentApplication) { Uri imageUri = new Uri("ms-appx:///Assets/imgPicks/1.jpg", UriKind.RelativeOrAbsolute); LockScreen.SetImageUri(imageUri); MessageBox.Show("Tu imagen se ha fijado como pantalla de bloqueo.", "Notificacin", MessageBoxButton.OK); } } Error (de nuevo...) Si nos aparece este error: Recordemos como resolverlo, previamente lo hicimos, solo que ahora ya adelantamos un paso, y fue el de agregar la referencia, ahora solo es cuestin de posicionarnos sobre el texto: LockScreenManager y nos mostrara la solucin. Tarea 5: Repetir el mismo procedimiento para todas las imgenes faltantes. 15. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Pero aqu no terminamos, ya que si ejecutamos la aplicacin, aun no nos pondra nuestra imagen seleccionada como LockScreenImage y esto es por que nos hace falta agregar una extension en el WMAppManifest.xml. Para esto hagamos clic secundario en el WMAppManifest.xml, y eligamos la opcin "Abrir con" Editor XML (texto) y, a continuacin, hacemos clic en Aceptar. Ahora solo debemos de aadir un nuevo