Operaciones básicas de programación con Metro y Windows 8 (XII)
Barras de botones o barras de aplicación
Barras de botones o barras de aplicación (I)
Introducción
El estilo Metro es muy particular.
Cuando digo muy particular me refiero a que Microsoft no nos recomienda salirnos de las guías de diseño establecidas para que una aplicación tenga ese aspecto.
Una de esas guías es la recomendación de usar barras de botones que tienen una determinada forma y que para facilitarnos la vida, ha incorporado Microsoft con un conjunto de iconos por defecto.
Todo lo que sea salirnos de esos márgenes, puede llevar con una posibilidad muy alta, a que nuestra aplicación no pase el corte de certificación.
Pero no nos preocupemos con esos detalles y veamos entonces como crear barras de botones con un aspecto Metro en nuestras aplicaciones.
Creación de nuestra aplicación
La primera acción que acometeremos es la de crear nuestra aplicación Metro.
En nuestro caso, iniciaremos Visual Studio 2012 y crearemos un aplicación como lo hemos venido haciendo en todas las entradas anteriores de esta pequeña guía.
Como nombre de nuestra aplicación, Sample4.
Nuestra aplicación en el Explorador de Soluciones quedará como se indica en la siguiente imagen:
Una vez hecho esto, vamos a ponernos manos a la obra.
Creación de la barra de aplicación
Para crear la barra de aplicación en nuestra página MainPage.xaml, vamos a acceder al código XAML de la misma.
Dentro del código XAML, vamos a centrarnos en una etiqueta Page que podemos variar en el caso de que queramos que nuestra barra de opciones aparezca en la parte superior de la página:
1: <Page.TopAppBar>
2: ...
3: </Page.TopAppBar>
O en la parte inferior de la misma:
1: <Page.BottomAppBar>
2: ...
3: </Page.BottomAppBar>
Dentro de estas etiquetas, prepararemos el menú de opciones de nuestra aplicación.
Dentro de la barra que vamos a crear, podemos insertar otros controles (una caja de texto, un botón,…) pero por defecto, Microsoft nos proporciona un conjunto de opciones que podemos reutilizar estableciendo un aspecto Metro de forma muy ágil.
Aún y así, aunque hayamos declarado la barra de botones superior o inferior a la página, todavía no hemos creado ninguna barra.
Para crear una barra de botones u opciones, vamos a utilizar la etiqueta AppBar:
1: <AppBar>
2: <Grid>
3: ...
4: </Grid>
5: </AppBar>
Y dentro de la etiqueta Grid, indicaremos cada uno de los botones o controles que queremos insertar dentro de la barra de botones.
Para hacerlo al revés, voy a mostrar en primer lugar lo que quiero lograr, y posteriormente como lo he hecho.
El aspecto de nuestra aplicación final es el que se muestra en la siguiente imagen:
El cómo lo he llevado a cabo, es creando dos barras de opciones para la página MainPage.xaml.
En el caso de la barra superior, el código XAML quedará de la siguiente manera:
1: <Page.TopAppBar>
2: <AppBar x:Name="MenuOptionTop" IsOpen="True" Opacity="1" IsSticky="True"
3: Background="#055565" VerticalAlignment="Bottom">
4: <Grid>
5: <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
6: <Button x:Name="Edit2" Style="{StaticResource EditAppBarButtonStyle}" Tag="Editar" />
7: <Button x:Name="Refresh2" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refrescar" />
8: <Button x:Name="Save2" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Guardar" />
9: </StackPanel>
10: <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
11: <Button x:Name="Help2" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Ayuda" />
12: <Button x:Name="Delete2" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Eliminar" />
13: </StackPanel>
14: </Grid>
15: </AppBar>
16: </Page.TopAppBar>
En el caso de la barra inferior, el código XAML quedará de una manera prácticamente idéntica:
1: <Page.BottomAppBar>
2: <AppBar x:Name="MenuOptionBottom" IsOpen="True" Opacity="0.75" IsSticky="True"
3: Background="#055565" VerticalAlignment="Bottom">
4: <Grid>
5: <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
6: <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Editar" />
7: <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refrescar" />
8: <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Guardar" />
9: </StackPanel>
10: <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
11: <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Ayuda" />
12: <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Eliminar" />
13: </StackPanel>
14: </Grid>
15: </AppBar>
16: </Page.BottomAppBar>
Como son dos barras de botones prácticamente idénticas con la salvedad de que una se muestra en la parte superior de la página y otra en la inferior, vamos a centrarnos en una de ellas, por ejemplo, en la de la barra inferior de la página y que corresponde con la etiqueta Page.BottomAppBar.
Etiqueta AppBar
Si analizamos esta barra de opciones, comprobamos que dentro de esta etiqueta tal y como explicaba anteriormente, nos encontramos con una etiqueta AppBar.
A esta etiqueta la he dado algunas propiedades que considero interesantes a destacar.
En el código XAML lo identificamos con el siguiente código:
1: <AppBar x:Name="MenuOptionBottom" IsOpen="True" Opacity="0.75"
2: IsSticky="False" Background="#055565" VerticalAlignment="Bottom">
La propiedad IsOpen nos indica si la barra de opciones debe estar abierta (visible) True o no False.
La propiedad Opacity nos indica la opacidad del fondo de la barra de botones. Esta propiedad vale 1 por defecto y su valor oscila de 0 a 1, siendo 1 el valor de opacidad más baja o nula, y 0 la de mayor opacidad o transparencia completa.
La propiedad IsSticky a False hará que nuestra barra se desvanezca cuando perdemos el foco.
La propiedad Background corresponde con el código de color de fondo de la barra, y la propiedad VerticalAlignment que he usado, me permite alinear verticalmente el contenido de la barra.
Botones de la barra de aplicación
Dentro de la etiqueta AppBar hemos creado una etiqueta Grid, y dentro de esta última, un par de etiquetas StackPanel.
El objetivo de cada bloque StackPanel es el de hacer que unos botones aparezcan en la parte izquierda de la barra, y otros en la parte derecha de la misma.
En el código XAML, nuestro código queda de la siguiente manera:
1: <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
2: <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Editar" />
3: <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refrescar" />
4: <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Guardar" />
5: </StackPanel>
6: <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
7: <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Ayuda" />
8: <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Eliminar" />
9: </StackPanel>
Como podemos apreciar, hemos creado dos bloques o paneles (StackPanel) dentro de nuestra barra de botones.
La propiedad Orientation nos permite indicar la orientación de nuestra barra de botones. En este caso, Horizontal.
De igual manera, aquí podemos alinear horizontalmente cada panel. De hecho, el primero de ellos lo hemos orientado a la izquierda y el segundo a la derecha.
Esto lo logramos con la propiedad HorizontalAlignment, dándole el valor que consideremos oportuno. Left o Right. Hay otros dos posibles valores Center o Stretch.
Igualmente, podríamos utilizar la propiedad VerticalAlignment que en este caso he obviado.
Finalmente y dentro de la cada StackPanel, he agregado los controles y botones que he considerado oportuno.
1: <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
2: <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Editar" />
3: <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refrescar" />
4: <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Guardar" />
5: </StackPanel>
Cada control Button que he insertado tiene tres propiedades.
La propiedad Name indica el nombre del botón.
La propiedad Tag indica una etiqueta o tag que podemos utilizar en nuestra aplicación si lo deseamos.
Finalmente, la propiedad Style indica el estilo del botón.
Respecto a los estilos cabe señalar algunos detalles que veremos a continuación.
(…Continúa…)