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.

@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>
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">
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>
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!

Taller WP8 en TEC de Monterrey

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (20)

Similar a Taller WP8 en TEC de Monterrey

Similar a Taller WP8 en TEC de Monterrey (20)

Más de Vicente Gerardo Guzman Lucio

Más de Vicente Gerardo Guzman Lucio (20)

Taller WP8 en TEC de Monterrey