Nuevo control CommandBar en Windows 8.1 y Windows Phone 8.1

Introducción

En versiones anteriores, desarrollar una aplicación en Windows 8 o en Windows Phone no era lo mismo, ya que no compartían APIs prácticamente. Ahora la versión de Windows Phone 8.1 converge con la plataforma de Windows Store compartiendo las mayoría de las APIs de Windows RT con lo que tenemos el mismo XAML para las dos plataformas, comparten la mayoría de los controles y tienen los mimos namespaces. Hay algunas particularidades para cosas que solo tienen sentido en tablet, pc o móvil.

Este post es el primero en el voy a explicar novedades que existen en ambas plataformas, similitudes y diferencias que puedan existir.

La nueva barra CommandBar existe en ambas plataformas, en Windos Phone 8.1 sustituye al control ApplicationBar y en Windows 8.1 tenemos AppBar, que ya existía, y se añade CommandBar.

CommandBar facilita el trabajo para añadir botones en la barra de aplicación y adapta su contenido automáticamente según va cambiando el tamaño de la pantalla.

ComnmandBar

Simplifica la creación de AppBar básicas.

CommandBar solo puede contener controles que hereden de ICommandBarElement, y estos son los nuevos controles AppBarButton, AppBarToogleButton y AppBarSeparator, para otro tipos de AppBars más complejas con controles como barras de progreso, imágenes, usaremos AppBar en Windows 8.1.

En el control CommandBar existen dos áreas donde situar el contenido, PrimaryCommands y SecondaryCommands. Por defecto si no se lo indicamos los controles se situaran en la sección PrimaryCommands.

En Windows 8.1 PrimaryCommands se sitúa a la parte de la derecha y SecondaryCommands se sitúa a la izquierda.

CommandBar también cambia el tamaño de los botones que contiene cuando cambia el tamaño de la pantalla. Los botones para las barras tienen dos tamaños, normal y compacto. El control CommandBar cuando la pantalla se reduce cambia los botones a tamaño compacto, donde se reduce el padding y no se muestra el texto inferior del botón.

Si se reduce la pantalla a un punto donde no caben todos los botones, solo se muestran los se encuentran dentro de PrimaryCommands.

En Windows Phone 8.1 PrimaryCommand ocupa toda la barra y los botones se muestran inicialmente en tamaño compacto y SecondaryCommands se sitúa como una opción de menú.

Al pulsar sobre el menú, la barra se expande mostrándose los botones en tamaño normal y se visualizan los los menús, que son los botones de la zona SecondaryCommands.

CommandBar extendida en Windows Phone 8.1

AppBarButton

Ahora ya no necesitamos tener botones con un estilo particular como en la versión anterior, ahora existe este botón especifico para la barra de aplicación.

La propiedades principales son:

Label, texto que aparece debajo del icono
IsCompact, si esta a true el padding del botón es inferior y el label no se visualiza
Icon, icono del botón, puede contener elementos que herede de IconElement

SymbolIcon, icono basado el la fuente Segoe UI Symbol, hay una enumeración con las posibles opciones
```
<AppBarButton Label="Account">
    <AppBarButton.Icon>
        <SymbolIcon Symbol="Account"/>
    </AppBarButton.Icon>
</AppBarButton>
```
es la opción por defecto en caso de dar valor directamente a la propiedad si anidar un control.
```
<AppBarButton Label="Account" Icon="Account"/>
```

FontIcon, icono basado en la fuente que se especifique

<AppBarButton Label="Account">
    <AppBarButton.Icon>
        <FontIcon FontFamily="Wingdings" Glyph="&#x004D;"/>
    </AppBarButton.Icon>
</AppBarButton>

BitmapIcon, icono cargado desde URI.

<AppBarButton Label="Telephone">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Assets/telephone.png"/>
    </AppBarButton.Icon>
</AppBarButton>

PathIcon, icono basado en datos Path

<AppBarButton.Icon>
    <PathIcon Data="F1 M 30,27C 30,24.3766 32.3767,22 35,22L 41,22C 43.6234,22 46,24.3766 46,27L 50.9999,27.0001C 53.7613,27.0001 55.9999,29.2387 55.9999,32.0001L 55.9999,46.0001C 55.9999,48.7615 53.7613,51.0001 50.9999,51.0001L 25,51.0001C 22.2385,51.0001 20,48.7615 20,46.0001L 20,32.0001C 20,29.2387 22.2385,27.0001 25,27.0001L 30,27 Z M 25.5,30C 24.6716,30 24,30.8954 24,32C 24,33.1046 24.6716,34 25.5,34C 26.3284,34 27,33.1046 27,32C 27,30.8954 26.3284,30 25.5,30 Z M 38,32C 34.134,32 31,35.134 31,39C 31,42.866 34.134,46 38,46C 41.866,46 45,42.866 45,39C 45,35.134 41.866,32 38,32 Z M 38,34.5C 40.4853,34.5 42.5,36.5147 42.5,39C 42.5,41.4853 40.4853,43.5 38,43.5C 35.5147,43.5 33.5,41.4853 33.5,39C 33.5,36.5147 35.5147,34.5 38,34.5 Z"/>

AppBarToggleButton

Es prácticamente igual al AppBarButton y añade el estado Checked que se puede comprobar mediante la propiedad IsChecked y tiene los eventos Checked y UnChecked para el momento donde se pulsa el botón y cuando deja de estar pulsado.

AppBarSeparator

Control que como su nombre indica sirve para separar zonas de botones en la barra.

Como resultado de esta convergencia entre las plataformas este código

<Page.BottomAppBar>
    <CommandBar Background="#00ACF6">
        <AppBarButton Icon="Back" Label="Back"/>
        <AppBarButton Icon="Stop" Label="Stop"/>
        <AppBarButton Icon="Play" Label="Play"/>
        <AppBarButton Icon="Forward" Label="Forward"/>

        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Like" Label="Like"/>
            <AppBarButton Icon="Dislike" Label="Dislike"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

podemos usarlo para una aplicación de Windows 8. y una de Windows Phone.

Libros Relacionados

Windows 8.1: The Missing Manual

Windows 8.1 Apps with XAML and C# Unleashed

Pages