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.

<Page.BottomAppBar> <CommandBar> </CommandBar> </Page.BottomAppBar>

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.

: 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.

: 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.

<AppBarButton Icon= "Add" Label= "Add" />

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.

<AppBarButton Label= "Mail" > <AppBarButton.Icon> <FontIcon FontFamily= "Segoe UI Symbol" Glyph= "" /> </AppBarButton.Icon> </AppBarButton>

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

<AppBarButton Label= "Path" > <AppBarButton.Icon> <PathIcon Data= "F1 M 20,20L 24,10L 24,24L 5,24" /> </AppBarButton.Icon> </AppBarButton>

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.

<AppBarButton Icon= "AllApps" Label= "apps" />

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

public enum Symbol { Previous = 57600, Next = 57601, ... }

Es muy simple de usar:

<AppBarButton Label= "Calendar" > <AppBarButton.Icon> <SymbolIcon Symbol= "Calendar" /> </AppBarButton.Icon> </AppBarButton>

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:

<AppBarToggleButton Label= "Shuffle" Checked= "ShuffleAppBarButton_Checked" Unchecked= "ShuffleAppBarButton_Unchecked" > <AppBarToggleButton.Icon> <SymbolIcon Symbol= "Shuffle" /> </AppBarToggleButton.Icon> </AppBarToggleButton>

Podemos controlar el estado:

private void ShuffleAppBarButton_Checked(object sender, RoutedEventArgs e) { } private void ShuffleAppBarButton_Unchecked(object sender, RoutedEventArgs e) { }

AppBarSeparator

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

<AppBarSeparator Foreground= "White" />

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.

: 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.

<Page.BottomAppBar> <CommandBar Background= "DarkOrange" > <AppBarButton Icon= "AllApps" Label= "apps" /> <AppBarButton Icon= "Emoji" Label= "emotion" /> <AppBarSeparator Foreground= "White" /> <AppBarButton Icon= "Pin" Label= "pin" /> <AppBarButton Icon= "Refresh" Label= "refresh" /> <CommandBar.SecondaryCommands> <AppBarButton Icon= "Help" Label= "help" /> </CommandBar.SecondaryCommands> </CommandBar> </Page.BottomAppBar>

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:

<AppBarButton Icon= "AllApps" Label= "apps" > <AppBarButton.Flyout> <MenuFlyout> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton>

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

<AppBarButton Icon= "AllApps" Label= "apps" > <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text= "App01" /> <MenuFlyoutItem Text= "App02" /> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton>

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

<AppBarButton Icon= "AllApps" Label= "apps" > <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text= "App01" Command= "{Binding MenuFlyoutCommand}" /> <MenuFlyoutItem Text= "App02" /> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton>

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