Informatica en Gnral.

Jugando con el ApplicationBar en los elementos de una App Panorama


Hola amigos, el día de hoy les quiero compartir un pequeño tutorial sobre como manipular el ApplicationBar en todos los ítems que agreguemos en una aplicación estilo Panorama, es decir, hacer que se muestre el ApplicationBar solo en ciertos elementos de la Aplicación en Panorama y es que me encontré con varios problemas cuando quise realizar esto, ya que no encontré ningún material que me explicara al 100% lo que quería, además de que varias personas me comentaban que no se podía, o que no sabían, es por eso que quiero darlo a conocer.

Parte 1

Empezaremos creando un nuevo proyecto, seleccionaremos “Windows Phone Panorama Application”, después seleccionan la ruta en donde se guardara.

image

Después lo que haremos será agregar otros 2 elementos a nuestro panorama, esto con la finalidad de que se puedan percibir los cambios en el ApplicationBar conforme a cada elemento.
Así deberá de verse nuestro XAML del MainPage:

image

 

Después en el mismo XAML agregaremos en nuestro control del panorama lo siguiente:

Antes:

image

Después:

image

Lo anterior fue solo darle un nombre para poder identificarlo y así saber cuando nuestro panorama haga el cambio.
Una ves realizado lo anterior, agregaremos la referencia: Microsoft.Phone.Controls.Toolkit a nuestro proyecto.

image

Ya contando con la referencia, pasaremos a ingresarla en nuestro XAML, en el archivo MainPage.XAML

image

Ahora para concluir de modificar nuestro MainPage, nos pasaremos al código del mismo archivo.
Lo primero que haremos será agregar la librería : using Microsoft.Phone.Shell;

Después lo que haremos será declarar nuestros ApplicationBars para cada uno de los elementos que manejemos, en este ejemplo se manejan 4.
Realizando lo anterior,  declararemos nuestro elemento de cambio, el cual es el “PanoramaPrinc_SelectionChanged”, en donde se especifica que según el elemento que este seleccionado, será el ApplicationBar que mostrara.
Quedando todo el código de la siguiente manera:

image

Acabando con MainPage, nos pasaremos a modificar nuestro App.xaml.
Aquí lo que haremos será declarar los ApplicationBars que mostraremos al usuario a la hora de pasar de un elemento a otro.

Lo primero a realizar en el App.xaml, será la adición de la referencia:

image

Después lo que agregaremos serán los recursos, es decir, los ApplicationBar para cada elemento de nuestra aplicación.

Así quedaría nuestro AplicacionBar en el primer elemento.

image

Como se darán cuenta, lo que hacemos es simplemente identificar nuestra primera barra, a la cual le damos las propiedades de que sea visible, que este habilitado (esto es decir, que pueda tener alguna acción), un color de fondo y el modo en que queremos que aparezca, este puede ser “Default” o “Minimized”.
Después de “Dibujarla” lo que hacemos es indicarle que tenga algún elemento, aquí solo contiene uno, pero se le pueden indicar mas.

Así quedarían los 4 ApplicationBar que definimos:

image

Como se darán cuenta solo en el elemento 3 no se mostrara nada.
Después lo que hare será agregar una carpeta, en donde agregare el icono que definí.

image

Para que el icono si se pueda ver, lo que haremos será seleccionarlo y darle clic secundario, propiedades y en donde dice: Build Action, lo cambiaremos de Resource a Content.

image

Y ya con esto, habremos terminado, ahora solo será cuestión de que lo ejecutemos.

Si quieren descargar el ejemplo, lo pueden hacer desde aquí.

Espero y les haya servido.
En la segunda parte veremos cual es el código que se maneja en cada elemento, para la navegación.

Agradecimiento a Jimmy Saenz por su apoyo en la realizacion de este tutorial.

Hasta la próxima!!

 

Anuncios

6 thoughts on “Jugando con el ApplicationBar en los elementos de una App Panorama”

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s