Como usar una Application bar (global y local) en Windows Phone 7

Bueno, pues resulta que me metí con un gran problema esta semana, estaba haciendo una aplicación para WP7 y resulta que cuando quise usar la Application bar de una forma mas personalizada me costó un buen rato entender que efectivamente no es un control nativo de Silverlight, por lo tanto requiere cierto trato personalizado, entonces comenzaré de lo sencillo a lo complejo, así que vamos por lo mas básico.

Crear una barra global usando XAML

Eso es sencillo, simplemente inserta esto en tu XAML y ya.

Hay que mencionar si no lo has hecho antes que la mejor herramienta para diseñar una barra de este tipo lo mejor que puedes hacer es usar Expression Blend, es mucho mas cómodo.

Y por el lado de C# simplemente lo dejaremos así.

private void btnSi_Click(object sender, System.EventArgs e)
{
MessageBox.Show("Presionaste Si");
}
 
private void btnNo_Click(object sender, System.EventArgs e)
{
MessageBox.Show("Presionaste No");
}

Ok, si corres tu aplicación tendrás uno de los siguientes resultados.

Ahora la cosa es crearla vía C# exclusivamente, nada mas.

using System;
using System.Windows;
using System.Windows.Controls;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
 
namespace ApplicationBar
{
public partial class MainPage : PhoneApplicationPage
{
ApplicationBarIconButton btnGuardar = new ApplicationBarIconButton(new Uri("/icons/appbar.save.rest.png", UriKind.Relative));
ApplicationBarIconButton btnCancelar = new ApplicationBarIconButton(new Uri("/icons/appbar.cancel.rest.png", UriKind.Relative));
public MainPage()
{
InitializeComponent();
FuncionalidadNecesaria();
}
 
private void FuncionalidadNecesaria()
{
ApplicationBar = new Microsoft.Phone.Shell.ApplicationBar();
 
btnGuardar.Text = "Guardar";
btnCancelar.Text = "Cancelar";
 
btnGuardar.Click += new EventHandler(btnGuardar_Click);
btnCancelar.Click += new EventHandler(btnCancelar_Click);
 
ApplicationBar.Buttons.Add(btnGuardar);
ApplicationBar.Buttons.Add(btnCancelar);
}
 
void btnCancelar_Click(object sender, EventArgs e)
{
MessageBox.Show("Presionaste No");
}
 
void btnGuardar_Click(object sender, EventArgs e)
{
MessageBox.Show("Presionaste Si");
}
}
}

Crear una ApplicationBar para cada ventana

Como puedes notar no hay mucho problema ahí, pero la cosa se pone complicada cuando intentas navegar a otra página, así que empezaremos usar la primera opción, vía XAML, en donde colocaremos un botón que al ser presionado nos mandará a una segunda página (no explico como crear una página, si te metiste con WP7 es por que ya llevas algo de experiencia en el camino), pero lo importante es que cuando cambies de página, igualmente cambies de funcionalidad en la barra, así que comienza por poner tu barra en el XAML de tu aplicación principal como en el inicio quedando de esta forma.

Y en el code behind así:

private void btnIr_Click(object sender, System.EventArgs e)
{
NavigationService.Navigate(new Uri("/Pagina2.xaml", UriKind.Relative));
}

Así habremos pasado de una a otra página utilizando los controles de nuestra ApplicationBar, pero igualmente vamos a querer pasar de la página 2 a la número 3 o a la número 1, así que podríamos hacer algo así como esto, primero en el XAML de nuestra página 2 insertamos esto casi al final de nuestro código, justo una línea antes de terminar y después del grid.

Y para el code behind:

private void btnIr_Click(object sender, System.EventArgs e)
{
NavigationService.Navigate(new Uri("/Pagina3.xaml", UriKind.Relative));
}
 
private void btnVolver_Click(object sender, System.EventArgs e)
{
NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
}

Como puedes notar, en la página 3 no contemplamos ninguna ApplicationBar, es aquí en donde puedes dar clic en el botón “Atrás” de tu dispositivo y te enviará de vuelta a la página 2.

Y de esta manera te quitarás de muchos problemas y dolores de cabeza, así que disfrútalo!

Descargar código