Saltar al contenido
Menú
El blog de Kañaz
  • Inicio
  • Acerca de
  • Github
  • Youtube
  • LinkedIn
  • Twitter
El blog de Kañaz

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

Publicada el 30 enero, 201116 julio, 2012
Twittear

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

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.

img802 img801

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

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

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

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.

img803 img804 img805

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

Descargar código

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Busca en este sitio

MI perfil de Github

Github profile

Sígueme en Twitter

Seguir a @aminespinoza
©2023 El blog de Kañaz | Funciona con SuperbThemes y WordPress