Your SlideShare is downloading. ×
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Taller WP8 en TEC de Monterrey
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Taller WP8 en TEC de Monterrey

213

Published on

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

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

Published in: Mobile
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
213
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer MI PRIMERA APLICACIÓN PARA WINDOWS PHONE 8
  • 2. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer SISCTI 39 - 5 de Abril del 2014 Introducción 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 añadiremos 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 imágenes 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 aplicación, es por eso que nos enfocaremos en el diseño 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: <!--Lista de una línea con ajuste automático de texto--> <phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding Items}"> <phone:LongListSelector.ItemTemplate> <DataTemplate> <StackPanel Margin="0,-6,0,12"> <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/> </StackPanel> </DataTemplate> </phone:LongListSelector.ItemTemplate> </phone:LongListSelector> que se encuentra dentro de: <!--Elemento Panorama uno--> <phone:PanoramaItem Header="first item"> </phone:PanoramaItem> Ahora agreguemos dos TextBlocks dentro de un Grid en el espacio que acabamos de liberar, dichos cuadros de texto serán lo primero que visualice el usuario a la hora de entrar a nuestra aplicación, ya que será el menú principal. Ya por ultimo cambiemos el contenido de Header="first item" por el Header="Menú" Asi debe de quedar: <!--Elemento Panorama uno--> <phone:PanoramaItem Header="Menú"> <Grid> <TextBlock Text="Acerca de" x:Name="txtAcerca" Margin="10,0,0,434" FontSize="25"/> <TextBlock Text="Anclar al inicio" x:Name="txtAnclar" Margin="10,49,0,389" FontSize="25" /> </Grid> </phone:PanoramaItem> 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 añadiremos un Header que diga “Conferencistas”. <!--Elemento Panorama dos--> <phone:PanoramaItem Header="Conferencistas"> </phone:PanoramaItem> 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. <!--Elemento Panorama dos--> <phone:PanoramaItem Header="Conferencistas"> <ListBox> <Grid> <Image Source="/Assets/imgSpeakers/LuisSamra.jpg" Height="115" Margin="0,0,293,0" /> <TextBlock Text="Luis Samra - Evernote" Height="54" Margin="132,31,0,30" /> </Grid> <Grid> <Image Source="/Assets/imgSpeakers/Alession Hagen.jpg" Height="115" Margin="0,0,293,0" /> <TextBlock Text="Alessio Hagen - Dell" Height="54" Margin="132,31,0,30" /> </Grid> <Grid > <Image Source="/Assets/imgSpeakers/joel_spolsky.jpg" Height="115" Margin="0,0,293,0" /> <TextBlock Text="Joel Spolsky - StackExchange" Height="54" Margin="132,31,0,30" /> </Grid> <Grid Margin="0,10" > <Image Source="/Assets/imgSpeakers/Jaime Niels Olivas.jpg" Height="115" Margin="0,0,293,0" /> <TextBlock Text="Jaime Niels Olivas - TEC de Mty" Height="54" Margin="132,31,0,30" /> </Grid> <Grid Margin="0,10" > <Image Source="/Assets/imgSpeakers/Exal Alejandro Gomez.png" Height="115" Margin="0,0,293,0" /> <TextBlock Text="Exal Alejandro - FireFox OS" Height="54" Margin="132,31,0,30" /> </Grid> </ListBox> </phone:PanoramaItem> 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. <!--TitlePanel contiene el nombre de la aplicación y el título de la página--> <StackPanel Grid.Row="0" Margin="12,17,0,28"> <TextBlock Text="MI APLICACIÓN" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock Text="nombre de la página" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel>
  • 7. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Cambiemos el contenido de cada Text MI APLICACIÓN = 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: <!--ContentPanel. Colocar aquí el contenido adicional--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Image Source="/Assets/imgSpeakers/LuisSamra.jpg" Margin="0,0,0,285" /> <TextBlock Text="Luis se unió al equipo de Evernote en el 2011 y cuenta con varias décadas de experiencia como emprendedor creando empresas móviles y de internet en toda América Latina. En Evernote, Luis es responsable del manejo de las operaciones de Evernote en América Latina. Previamente a Evernote, Luis fue CEO de varias empresas de internet móvil que él mismo fundó." Margin="0,346,0,33" TextWrapping="Wrap" /> </Grid> 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 <ScrollViewer> y un <Grid> antes del <Textblock>. 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 detrás de la imagen.
  • 8. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer <!--ContentPanel. Colocar aquí el contenido adicional--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <ScrollViewer> <Grid> <TextBlock Text="Alessio Hagen funge como …… " Margin="0,272,0,10" TextWrapping="Wrap" /> </Grid> </ScrollViewer> <Image Source="/Assets/imgSpeakers/Alession Hagen.jpg" Margin="0,0,0,340" /> </Grid> Ahora añadamos 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 imágenes, 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 aplicación. 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 aplicación 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 aplicación en panorama, la cual nos permitira hacer que las imágenes que ingresemos puedan ser puestas como LockScreenImage. Para esto trabajaremos con imágenes estaticas que agregaremos a nuestra aplicación. Empezemos creando una carpeta denominada “imgPicks”, en donde insertaremos 8 imágenes (aquí pueden agregar las que gusten). Ahora en la tercera seccion primero cambiemos el texto del header por el de “imágenes”. Despues de esto, seleccionemos el primer Border y vayamos a la barra de propiedades, en donde podremos poner nuestra primera imagen seleccionándola desde la categoría 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 imágenes 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 añadiremos 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 diseño debajo de cada </Border.Background>. <toolkit:ContextMenuService.ContextMenu> <toolkit:ContextMenu> <toolkit:MenuItem Header="fijar como pantalla de bloqueo" Click="imgLockScreen1"/> </toolkit:ContextMenu> </toolkit:ContextMenuService.ContextMenu> Dándole de una vez su evento con su determinado id (nombre) que nos permitirá darle la funcionalidad correcta, para esto pasémonos al archivo MainPage.xaml.cs (Codigo C#). El código 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.", "Notificación", 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 cuestión de posicionarnos sobre el texto: LockScreenManager y nos mostrara la solución. Tarea 5: Repetir el mismo procedimiento para todas las imágenes faltantes.
  • 15. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Pero aquí no terminamos, ya que si ejecutamos la aplicación, 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 opción "Abrir con" – Editor XML (texto) y, a continuación, hacemos clic en Aceptar. Ahora solo debemos de añadir un nuevo elemento <Extensión> en la sección <extensions> del manifiesto. Este elemento declara que la aplicación es un proveedor de fondo de la pantalla de bloqueo. Si el elemento <extensions> no aparece en el archivo de manifiesto, pegue todo el código de abajo en el archivo. <Extensions> <Extension ExtensionName="LockScreen_Background" ConsumerID="{111DFF24-AA15- 4A96-8006-2BFF8122084F}" TaskID="_default" /> </Extensions>
  • 16. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Así es como debe de lucir la parte de debajo de nuestro archivo ya editado. Ya con esto podemos hacer que la imagen que seleccionemos se ponga como pantalla de bloqueo. Guardemos, limpiemos, compilemos y ejecutemos. ¿Qué nos hace falta? Algo que normalmente el usuario toma en cuenta o lo primero que ve al abrir una aplicación es la famosa imagen conocida en Windows Phone como SplashScreen. Para poner un SplashScreen y que esta se muestre cuando la aplicación se abra, es solo cuestion de saber la medida neutral de la imagen e insertarla en la raiz de nuestro proyecto, la cual es 768px por 1280px en un formato .jpeg. Nos situamos en la raiz, despues damos clic derecho (boton secundario), Agregar- Elemento existente y elegimos la imagen: SplashScreenImage.
  • 17. @StellaSoftMX Vicente G. Guzman Lucio Windows Phone Developer Dicha image se colocara hasta el final de nuestro proyecto, ahora solo limpiemos la solucion, compilemos y ejecutemos. NOTA: Se recomienda esta medida por que si un telefono con menor resolucion o mayor instala nuestra aplicación, esta se adopta, evitando asi el pixelearse. Con esto hemos terminado nuestro pequeño tutorial de Windows Phone 8, los espero en mi blog para seguir conociendo esta plataforma movil que dia a dia va tomando mas fuerza. http://luciomsp.wordpress.com Aquí el código del tutorial. Happy Coding!

×