Trabajar con la barra de aplicaciones: Tutorial de desarrollo de aplicaciones de Windows Phone – Parte 22

En la última parte de nuestra serie de desarrollo de aplicaciones de Windows Phone 7.5 Mango, vimos cómo navegar entre las páginas de XAML mientras que en este tutorial echaremos un vistazo a la Barra de Aplicaciones.

La barra de aplicaciones es similar a un menú. Tiene iconos en la parte superior que sólo miran por encima de la parte inferior y un botón de elipsis que al hacer clic muestra una serie de opciones de menú de texto. Podemos usar estas opciones para realizar alguna operación en la página actual de XAML o para navegar al usuario a un área completamente nueva de nuestra aplicación. Lo bueno de la barra de aplicaciones es que permanece oculta en su mayor parte y no interfiere con la interfaz de usuario básica de la aplicación.

Sigamos adelante y trabajemos con un ejemplo vivo.

Cree un nuevo proyecto de Windows Phone 7.5 con un nombre único; algo así como «ApplicationBarDemo». A continuación, hacemos clic con el botón derecho del ratón en el nombre del proyecto en la ventana del Explorador de soluciones y seleccionamos Añadir en el menú. Seleccione Nueva Carpeta en el submenú y nombre la nueva carpeta creada como «Iconos». La carpeta Iconos almacenará los iconos que se mostrarán en la barra de aplicaciones. Ahora navegue hasta «C:\Program Files\Microsoft SDKs\Windows Phone\V7.0\Icons\Dark» y arrastre y suelte los iconos (signo de más y menos) en la carpeta Iconos de su proyecto para que pasen a formar parte del mismo. Cambiar la propiedad Build Action de cada uno de los iconos de Resource a Content.

Trabajar con la barra de aplicaciones: Tutorial de desarrollo de aplicaciones de Windows Phone - Parte 22 1

Visual Studio nos proporciona un marco básico de la barra de aplicaciones en el código XAML para cada página. Navegue hasta la parte inferior del código XAML en la ventana de diseño para localizar el código de la Barra de aplicaciones. Edite el código XAML de forma que se parezca a lo siguiente

<ApplicationBar>

<shell:ApplicationBar IsVisible=»True» IsMenuEnabled=»True»>

ApplicationBarIconButton IconUri=»/Images/appbar.minus.rest.png» Text=»Remove» Click=»ApplicationBarIconButton_Click»/>

ApplicationBarIconButton IconUri=»/Images/appbar.new.rest.png» Text=»Add» Click=»ApplicationBarIconButton_Click_1″/>

ApplicationBarIconButton IconUri=»/Images/appbar.minus.rest.png» Text=»Remove» Click=»ApplicationBarIconButton_Click»/>

ApplicationBarIconButton IconUri=»/Images/appbar.new.rest.png» Text=»Add» Click=»ApplicationBarIconButton_Click_1″/>

<shell:ApplicationBar.MenuItems>

ApplicationBarMenuItem Text=»Menu 1″ Click=»ApplicationBarMenuItem_Click»/>

ApplicationBarMenuItem Text=»Menu 2″ Click=»ApplicationBarMenuItem_Click_1″/>

ApplicationBarMenuItem Text=»Menu 3″ Click=»ApplicationBarMenuItem_Click»/>

ApplicationBarMenuItem Text=»Menu 4″ Click=»ApplicationBarMenuItem_Click_1″/>

ApplicationBarMenuItem Text=»Menu 5″ Click=»ApplicationBarMenuItem_Click»/>

ApplicationBarMenuItem Text=»Menu 6″ Click=»ApplicationBarMenuItem_Click_1″/>

ApplicationBarMenuItem Text=»Menu 7″ Click=»ApplicationBarMenuItem_Click»/>

ApplicationBarMenuItem Text=»Menu 8″ Click=»ApplicationBarMenuItem_Click_1″/>

ApplicationBarMenuItem Text=»Menu 9″ Click=»ApplicationBarMenuItem_Click»/>

ApplicationBarMenuItem Text=»Menu 10″ Click=»ApplicationBarMenuItem_Click_1″/>

ApplicationBarMenuItem Text=»Menu 11″ Click=»ApplicationBarMenuItem_Click»/>

ApplicationBarMenuItem Text=»Menu 12″ Click=»ApplicationBarMenuItem_Click_1″/>

</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

La barra de aplicaciones puede contener cuatro botones de iconos al máximo y un número ilimitado de elementos textuales del menú.

Echemos un vistazo al código XAML para el código de iconos de barras de la aplicación

ApplicationBarIconButton IconUri=»/Images/appbar.minus.rest.png» Text=»Remove» Click=»ApplicationBarIconButton_Click»/>

Cada botón del icono de la barra de aplicaciones contiene varias propiedades. La propiedad IconUri se utiliza para definir uri para el icono. La propiedad text establece el texto en miniatura que se mostrará debajo del icono. El evento de clic nos ayuda a definir la funcionalidad que se ejecutará cuando se haga clic en el icono.

Del mismo modo, el elemento de menú de la barra de aplicaciones contiene una serie de propiedades y eventos. No entraremos en detalles, ya que este tutorial es para principiantes, puede obtener más información en el sitio web de MSDN. Ahora veamos cómo usar el lienzo como un diálogo.

Contenido Relacionado

Deja un comentario