Taller WP8 en TEC de Monterrey

@StellaSoftMX

Vicente G. Guzman Lucio Windows Phone Developer

MI PRIMERA

APLICACIÓN PARA

WINDOWS PHONE 8

@StellaSoftMX


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.

http://www.microsoft.com/es-mx/download/details.aspx?id=40778

@StellaSoftMX


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:

@StellaSoftMX


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:

 <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:



<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:

 <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.

@StellaSoftMX


Le añadiremos un Header que diga “Conferencistas”.

 <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.

 <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.

@StellaSoftMX


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.

 <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>

@StellaSoftMX


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:

 <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.

@StellaSoftMX


 <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).

@StellaSoftMX


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));

@StellaSoftMX


¿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)

@StellaSoftMX


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.

@StellaSoftMX


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:

@StellaSoftMX


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:

@StellaSoftMX


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.

@StellaSoftMX


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>

@StellaSoftMX


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.

@StellaSoftMX


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!

http://luciomsp.wordpress.com/

http://1drv.ms/1mZBj11

Taller WP8 en TEC de Monterrey

Mobile

Transcript of Taller WP8 en TEC de Monterrey