Windows Phone. El ApplicationBar.

Introducción

El ApplicationBar nos permite crear de manera rápida y sencilla un menú de botones. Es una barra situada en la parte inferior de la pantalla.

Está compuesto de dos partes diferenciadas:

• Listado de botones. Cada botón compuesto por un icono junto a un texto descriptivo. Es lo único visible por defecto en el ApplicationBar. Junto al listado de botones podemos ver también tres puntos suspensivos en la parte inferior derecha.
• Menu de opciones. Oculto por defecto. Lo podemos desplegar al pulsar sobre los tres puntos suspensivos.

Como de costumbre, vamos a realizar un ejemplo práctico. Creamos un nuevo proyecto:

La plantilla seleccionada será “Windows Phone Application” para simplificar al máximo el ejemplo.

Al crear el proyecto podemos ver en el archivo MainPage.xaml el código necesario para añadir un ApplicationBar a nuestra aplicación, solo que por defecto está comentado. Para utilizar el ApplicationBar necesitamos la referencia a la siguiente librería:

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

La clase PhoneApplicationPage contiene una propiedad ApplicationBar. Para definir el ApplicationBar:

<phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Añadimos imágenes a utilizar en los botones del ApplicationBar (ApplicationBarIconButton). Debemos definir en las propiedades de la imágen a tipo Content la propiedad Build Action:

NOTA: El círculo que rodea a cada icono se coloca de manera automática por el sistema, no es necesario definirlo en la imágen.

Añadimos cuatro botones (indicamos una imágen inexistente al último, fijáos en el resultado):

<phone:PhoneApplicationPage.ApplicationBar>
     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
          <shell:ApplicationBarIconButton IconUri="/IMGS/appbar.heart2.rest.png" Text="IconButton1" Click="ApplicationBarIconButton_Click"/>
          <shell:ApplicationBarIconButton IconUri="/IMGS/appbar.lamp.rest.png" Text="IconButton2"/>
          <shell:ApplicationBarIconButton IconUri="/IMGS/appbar.mic.rest.png" Text="IconButton3"/>
          <shell:ApplicationBarIconButton IconUri="/IMGS/appbar.mic.rest2.png" Text="IconButton4"/>
     </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Hemos definido el evento Click del primero botón:

private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{

}

Añadimos también un menu de opciones. La definición completa del ApplicationBar quedaría:

<phone:PhoneApplicationPage.ApplicationBar>
     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
          <shell:ApplicationBarIconButton IconUri="/IMGS/appbar.heart2.rest.png" Text="IconButton1" Click="ApplicationBarIconButton_Click"/>
          <shell:ApplicationBarIconButton IconUri="/IMGS/appbar.lamp.rest.png" Text="IconButton2"/>
          <shell:ApplicationBarIconButton IconUri="/IMGS/appbar.mic.rest.png" Text="IconButton3"/>
          <shell:ApplicationBarIconButton IconUri="/IMGS/appbar.mic.rest2.png" Text="IconButton4"/>
          <shell:ApplicationBar.MenuItems>
               <shell:ApplicationBarMenuItem Text="MenuItem1"/>
               <shell:ApplicationBarMenuItem Text="MenuItem2"/>
               <shell:ApplicationBarMenuItem Text="MenuItem3"/>
               <shell:ApplicationBarMenuItem Text="MenuItem4" Click="ApplicationBarMenuItem4_Click"/>
               <shell:ApplicationBarMenuItem Text="MenuItem5"/>
               <shell:ApplicationBarMenuItem Text="MenuItem6"/>
          </shell:ApplicationBar.MenuItems>
     </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

El evento Click definido en el cuarto ApplicationBarMenuItem:

private void ApplicationBarMenuItem4_Click(object sender, EventArgs e)
{

}

Puedes ver de un vistazo todo el ejemplo realizado en video a continuación:

También puedes descargar el ejemplo realizado:

Espero que lo visto en esta entrada os sea de utilidad. Cualquier duda o sugerencia podéis plantearlas en los comentarios. En próximas entradas profundizaremos en el uso del ApplicationBar.

Propiedades del ApplicationBar

• Mode. indica el tamaño del ApplicationBar la primera vez que aparece en la página. Puede ser: Mini o Default. El valor por defecto es Default.
• Opacity. Se espera un valor entre 0.0 y 1.0 aunque es recomendable utilizar 0.0, 0.5 o 1.0 ya que el valor de esta propiedad afecta al aspecto de la página. Si el valor de la opacidad es 1, el contenido de la página se redimensiona para no ocupar el tamaño del ApplicationBar. Si el valor de la opacidad es inferior a 1, la barra del ApplicationBar se superpone a los elementos de la página.
• BackgroundColor. Color de fondo del ApplicationBar.
• ForegroundColor. Define el color del texto de los botones y de los elementos definidos en el menu.
• IsVisible. Indica si el ApplicationBar está visible o no.

A tener en cuenta

• Los iconos utilizados en los botones del ApplicationBar deben de ser de un tamaño de 48x48px.
• Los iconos utilizados en los botones del ApplicationBar deben añadirse como recurso de tipo Content.
• Los iconos utilizados en los botones del ApplicationBar deben ser blancos con el fondo transparente. Si se cambia es tema del sistema, automáticamente se modificará el color a negro.
• El círculo que rodea a cada icono se coloca de manera automática por el sistema.
• Los textos de cada botón independientemente de como lo escribamos se convierte a minúscula. Cuida el texto evitando usar textos de una longitud elevada.
• Tienes disponible ya directamente una interesante colección de iconos en Program Files \ Microsoft SDK\Windows Phone\Icons.
• Estamos limitados a un maximo de 4 ApplicationBarIconButtons.
• No tenemos límite de ApplicationBarMenuItems. Sin embargo, recuerda que solo se verán directamente los cinco primeros elementos por que piensa correctamente el orden.
• Por defecto, en la mayoría de ocasiones se recomienda el uso del ApplicationBar en lugar de crear nuestros propios menús. Los usuarios están acostumbrados a usarlo además logramos una experiencia de usuario consistente y más cercana a lo reproducido en el sistema y el resto de aplicaciones.
• El ApplicationBar no soporta el uso de comandos solo eventos. Por lo tanto nos limita el correcto uso del patrón MVVM. Este punto es importante y analizaremos en profundidad en próximas entradas como solucionar este punto (un pequeño adelanto).

Más información

• Windows Phone Dev Center: Application Bar Overview for Windows Phone.
• La Liga Silverlight: Como usar una Application bar (global y local) en Windows Phone 7.

Extra

• Más de 700 iconos gratuitos: Windows Phone Icons (Templarian).
• MetroStudio. Syncfusion nos proporciona esta herramienta destinada desarrolladores que quieran incorporar iconos Metro en sus aplicaciones. Es gratis y los iconos son libres.