ApplicationBar Remodelado {Windows Phone 8.1}


El día de hoy amanecí con ganas de empezar a trabajar en una (y primera) aplicación para Windows Phone 8.1 y para mi sorpresa al llegar el momento en que quería insertar el ApplicationBar, este me genero un error de sintaxis, el cual después de revisar la barra de herramientas me percate de un gran cambio.

Windows Phone 8.0
Como muchos sabemos en Windows Phone 8.0 la barra de aplicación podría ser algo como esto:

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar BackgroundColor=”#FFE61702″ Opacity=”0.8″ ForegroundColor=”White”>

<shell:ApplicationBarIconButton x:Name=”btnAcercaDe” IconUri=”/Assets/AppBar/questionmark.png” Text=”acerca de” Click=”btnAcercaDe_Click”/>

<shell:ApplicationBarIconButton x:Name=”btnPintoStart” IconUri=”/Assets/AppBar/pin.png” Text=”anclar” Click=”btnPintoStart_Click”/>

<shell:ApplicationBar.MenuItems>

<shell:ApplicationBarMenuItem Text=”MenuItem 1″/>

<shell:ApplicationBarMenuItem Text=”MenuItem 2″/>

</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

Windows Phone 8.1
La barra de aplicación ha sido completamente remodelada para trabajar como la barra de aplicaciones de Windows 8.1.
Cabe mencionar que tiene algunos inconvenientes pero sobre todo más ventajas.

Una cosa que difiere entre Windows 8 y Windows Phone 8.1 es el AppBar, que no existe en Windows Phone 8.1, esto significa que solo podemos usar AppBarButton y AppBarToggleButton, ya que supongo que Microsoft cree que la pantalla del teléfono es demasiado pequeña para el AppBarSeparator, ya que no está disponible.

Si nos ponemos a revisar minuciosamente también nos daremos cuenta que en Windows 8 hay un TopAppBar que no está presente en Windows Phone 8.1

Sintaxis
A continuación les dejo un pequeño ejemplo de una barra de aplicaciones en Windows Phone 8.1 con la nueva sintaxis.

<Page.BottomAppBar>

<CommandBar>

<CommandBar.Background>

<ImageBrush Stretch=”Fill”/>

</CommandBar.Background>

<CommandBar.PrimaryCommands>

<AppBarButton x:Name=”AppBarSettings” Label=”settings” Icon=”Setting” Click=”AppBarSettings_Click” >

<AppBarButton.Background>

<ImageBrush Stretch=”Fill”/>

</AppBarButton.Background>

</AppBarButton>

</CommandBar.PrimaryCommands>

<CommandBar.SecondaryCommands>

<AppBarButton x:Uid=”AppBarSec” Label=”about” Command=”{Binding SomeCommand}”>

</AppBarButton>

</CommandBar.SecondaryCommands>

</CommandBar>

</Page.BottomAppBar>

¿Cómo funciona?
Les explicare un poco del ejemplo previo.

Al inicio siempre se debe de comenzar por definir un BottomAppBar, el cual debe ser seguido por un CommandBar . Dentro de la CommandBar hay dos bloques, PrimaryCommands y SecondaryCommands. En Windows 8.1 los comandos primarios van a la derecha en la barra de aplicaciones y comandos secundarios a la izquierda. En Windows Phone 8.1 funciona un poco diferente ya que la pantalla es demasiado pequeña para la derecha y la izquierda. En cambio los comandos principales aparecen como botones y comandos secundarios se convierten en los elementos de menú. Los elementos de menú ignoran iconos eventuales.

Y en la barra de herramientas podemos encontrar…

AppBarButton

Este es una de los posibles dos controles que pueden ser utilizados dentro de los comandos primarios o secundarios. Esto funciona igual que ApplicationBarIconButton hizo antes, se crea un botón en la barra de aplicaciones. La propiedad Text es ahora llamado Label y IconUri es Icon. Cuando uno pone un AppBarButton en los comandos secundarios se convierte en un elemento de menú, esto es una consecuencia del hecho de que Windows Phone 8.1 ahora comparte código con Windows 8. Tal vez no sea la sintaxis más intuitiva, pero así es como funciona.

AppBarToggleButton

Este es el segundo control posible en los comandos primarios o secundarios. Esto funciona igual que AppBarButtom pero tiene una propiedad IsChecked por lo que puede cambiar como su nombre indica, si se comprueba que los cambios de interfaz de usuario para mostrar el estado. Si AppBarToggleButton se pone en los comandos de secundaria se ve como un elemento del menú. El elemento de menú no tiene ninguna indicación de si está activada o no según la versión de botón no así que esto debe ser tomado en consideración si se usa el mismo XAML tanto en Windows Phone 8.1 y Windows 8. En Windows 8 parece como un botón en el lado izquierdo y así poder mostrar su estado de conmutación.

Icon

La propiedad Icon (Barra de Propiedades) puede que en lugar de utilizar las imágenes de nuestras rutas, se pueden utilizar rutas de fabricación propia.
Cuando necesite un icono de la barra de aplicaciones, por favor antes eche un vistazo a la construcción en los iconos de símbolos, hay un montón de ellos y probablemente uno que se ajuste a su necesidad a menos que tenga necesidades muy específicas.

Conclusión

A pesar de que la sintaxis es tomada desde Windows 8.1 y no encaja del todo en el desarrollo de teléfonos, hay muchas ventajas en la nueva barra de aplicaciones, una de ellas y quizá la mas importante es la de contar con código compartido entre Windows 8.1 y Windows Phone 8.1.

Hasta la próxima!!
Happy Coding!!

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s