[Windows Phone 8.1] La nueva CommandBar

Introducción

En la plataforma Windows el peso principal de
las aplicaciones recae en el contenido de las mismas. Para lograr este
objetivo, separamos los comandos y las acciones del contenido principal.
En Windows Phone hasta ahora, la forma habitual para conseguir esto era
mostrando un menu de opciones era usando el ApplicationBar,
barra situada en la parte inferior de la pantalla. En Windows 8
contábamos con dos tipos de app bar, uno en la parte inferior usado para
agrupar las acciones de la aplicación y otro en la parte superior
utilizado habitualmente para otorgart al usuario de una experiencia de
navegación avanzada.

En Windows 8.1 y en Windows Phone 8.1 se introduce un nuevo concepto llamado CommandBar, una nueva forma de crear app bars compartida y sencilla.

En este artículos vamos a ver:

• Implementar CommandBar en aplicaciones Windows y Windows Phone
• Gestión de iconos en los AppBarButton de la CommandBar
• MenuFlyouts desde la CommandBar

El control CommandBar

El control CommandBar esta compartido entre Windows y Windows Phone. Nos permite crear application bars con facilidad.

NOTA: En Windows Phone sustituye al control
ApplicationBar. En Windows existe también el control AppBar, la
diferencia recae en el tipo de contenido que puede albergar, el
CommandBar solo puede contener controles ICommandBarElement.

Sólo puede contener controles que deriven de ICommandBarElement:

AppBarButton

Cuenta con tres propiedades básicas:

• Label: Usado para el texto que aparece debajo del botón.
• Icon: Permite definir el icono utilizado en el botón. El icono debe ser representativo de la acción que ejecuta.
• IsCompact: Fuerza al AppBarButton a utilizar el
  modo compacto. En este caso, se oculta el texto del label para reducir
  el tamaño y márgenes del mismo.

En el ejemplo anterior la propiedad Icon la rellenamos con una simple
cadena que especifica el identificador del icono. La propiedad Icon es
de tipo IconElement. Tenemos cuatro opciones, cuatro clases que heredan de IconElement:

• BitmapIcon: Se utiliza una imagen para definir el icono. Lo haremos utilizando la propiedad UriSource:

NOTA: Podemos utilizar una Windows Store URI como ms-appx o ms-appdata.

• FontIcon: Se utiliza una fuente específica para definir el icono.

La clase FontIcon cuenta con dos propiedades principales. Por un lado contamos con la propiedad Glyph usada para indicar el código del carácter utilizado y por otro lado FontFamily usada para indicar la fuente.

• PathIcon: Se utiliza un Path para definir el icono. Utilizamos la propiedad Data para indicar la figura a dibujar:

• SymbolIcon: Se utiliza la fuente Segoe UI Symbol para
  representar al icono. Esta opción es la que se utiliza por defecto
  cuando pasamos una cadena en la propiedad Icon.

SymbolIcon define una propiedad Symbol para definir el icono. Symbol es una enumeración que contiene cada uno de los iconos que podemos usar:

Es muy simple de usar:

AppBarToggleButton

Control sumamente similar al AppBarButton, con sus mismas propiedades
principales, Label, Icon e IsCompact. La diferencia principal radica en
que este control cuenta con dos estados: checked y un checked.

La definición es muy similar a lo anterior:

Podemos controlar el estado:

AppBarSeparator

El control AppBarSeparator es muy sencillo, dibuja una línea vertical con el objetivo de separar controles del CommandBar.

Continuamos profundizando en el control CommandBar. Cuenta con dos propiedades principales:

• PrimaryCommands: Colección de comandos principales
  de la página. En aplicaciones Windows Store se muestran automáticamente
  en la parte derecha del CommandBar. En aplicaciones Windows Phone se
  muestran como botones del CommandBar.
• SecondaryCommands: Colección de comandos
  secundarios de la página. En aplicaciones Windows Store se muestran
  automáticamente en la derecha del CommandBar. En aplicaciones Windows
  Phone se muestran como elementos de menu del CommandBar.

NOTA: Si no especificamos ninguna colección en concreto, los controles se añadirán a la colección PrimaryCommands.

MenuFlyouts. Añadir menus

En ocasiones tenemos la necesidad de contar con varios botones
relacionamos profundamente en su cometido. Por ejemplo, tenemos un
listado de elementos y en la CommandBar queremos permitir filtrar por:

• Puntuación
• Descargas

¿Añadimos dos botones a la CommandBar?. Es una opción, aunque sin
duda añadir un menu que aparezca al pulsar un simple botón filtrar es
una opción mejor. Veamos como sería.

Añadimos un MenuFlyout a la propiedad Flyout de un botón:

Por último, añadimos elementos MenuFlyoutItem al Menu:

El comportamiento de los MenuFlyOutItem es similar al de los botones teniendo capacidad de poder hacer data binding:

Podéis descargar la aplicación universal de ejemplo a continuación:

Diseño

Al utilizar el mismo código en aplicaciones universales tenemos
ciertas peculiaridades en el diseño y forma de interactuar con la
CommandBar dependiendo de si estamos en una aplicación de teléfono o de
tableta.

Al añadir AppBarButton al CommandBar por defecto se colocan en la
colección de botones PrimaryCommands. En aplicaciones Windows Store los
botones de la colección PrimaryCommands se situan a la derecha mientras
que los botones de la SecondaryCommands se situan en la izquierda:

Mientras que en Windows Phone, el mismo código coloca los botones de la colección SecondaryCommands como elementos de menu:

NOTA: El icono del botón es ocultado de manera automática.

Añ añadir MenuFlyouts a un botón de la CommandBar, el aspecto en Windows Store es el siguiente:

En Windows Phone, tenemos esta novedad que aparece con una animación con el siguiente aspecto:

Más información

• JayWay Blog: Windows Phone 8.1 for Developers – Application bar
• Windows Dev Center: How to add a menu to an app bar