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

<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.
  • 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.
<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:
<AppBarButton Label="Add">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Assets/Add.png" />
    </AppBarButton.Icon>
</AppBarButton>

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

Published 4/5/2014 20:09 por jsuarezruiz
Comparte este post: