Operaciones básicas de programación con Metro y Windows 8 (XIII)
Barras de botones o barras de aplicación
Barras de botones o barras de aplicación (II)
Estilos a usar en los controles de la barra de aplicación
Los estilos utilizados en este ejemplo corresponden con los estilos que Microsoft nos ofrece y que nos simplifica el trabajo.
Situándonos en el Explorador de Soluciones y en nuestro proyecto Sample4, encontraremos dentro de la carpeta Common un fichero de nombre StandardStyles.xaml.
Este fichero contiene los estilos con los que podemos trabajar.
Si observamos el código XAML, veremos que por ejemplo para el control Button denominado Editar, utilizamos un estilo EditAppBarButtonStyle.
Como digo, este estilo no lo hemos creado, y hemos utilizado uno que Microsoft nos ha dado y que encontramos en el fichero de estilos mencionado anteriormente, StandardStyles.xaml.
1: <Style x:Key="EditAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
2: <Setter Property="AutomationProperties.AutomationId" Value="EditAppBarButton"/>
3: <Setter Property="AutomationProperties.Name" Value="Edit"/>
4: <Setter Property="Content" Value=""/>
5: </Style>
Si nos fijamos bien en este código XAML, éste estilo utiliza a su vez el estilo AppBarButtonStyle que es un estilo genérico de comportamiento de un botón en la barra de botones de la aplicación.
Aquí también, encontramos algo que nos puede interesar.
Es la propiedad AutomationProperties.Name y que por defecto, tiene un valor Value a Edit.
También tenemos otra propiedad no menos interesante, de nombre Content y que tiene valor Value a .
Si quisiéramos cambiar el valor concreto para un idioma y otro distinto para otro idioma, deberíamos empezar a jugar con la localización de nuestra aplicación en Content.
Nota: Ver las entradas sobre localización que tratan la internacionalización de nuestras aplicaciones.
Es interesante ver que la propiedad Content corresponde con un código de escritura, ya que se utiliza una fuente de letra que encontraremos en el estilo AppBarButtonStyle.
Es el Setter siguiente:
1: <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
Y es que en Metro, podemos hacer uso de la fuente de letra Segoe UI Symbol.
Una fuente de letra Metro con códigos que corresponden con iconos ya prediseñados para ser utilizados en nuestras aplicaciones.
Un ejemplo de uso de esta fuente de letra y un código de la misma sería:
1: <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
2: <Canvas>
3: <TextBlock Margin="200,200,0,0" FontFamily="Segoe UI Symbol"
4: FontSize="20" Text="Fotos " />
5: </Canvas>
6: </Grid>
He incluso si quisiéramos aprovechar lo que Microsoft nos ofrece, podríamos crear un botón fuera de la propia barra de botones rizando el rizo de la siguiente manera:
1: <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
2: <Canvas>
3: <Button Style="{StaticResource AppBarButtonStyle}"
4: Margin="200,200,0,0" FontFamily="Segoe UI Symbol"
5: FontSize="20" Content="" />
6: </Canvas>
7: </Grid>
No voy a descubrir ahora la bondad de los estilos, pero como podemos observar, podemos sacar mucho provecho de todo esto y en concreto de los estilos que encontraremos por defecto en el fichero StandardStyles.xaml.
Agregando eventos a un botón de la barra de aplicación
Como viene siendo habitual, la forma de agregar un evento a un botón de la barra de aplicación no difiere en nada con la forma estándar o habitual de hacerlo dentro del código XAML.
Imaginemos uno de los botones de la barra de aplicación. Bastará con indicarle el evento Click por ejemplo y asignarle el código del evento propiamente dicho.
1: <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}"
2: Tag="Editar" Click="Edit_Click_1" />
Dentro del código del evento en C# para el caso de MainPage.xaml.cs, escribiremos las acciones correspondientes.
Agregando otros controles a la barra de aplicación
Ya comenté anteriormente, que en la barra de aplicación podíamos agregar los controles que consideráramos oportunos.
Imaginemos que de acuerdo a la barra de aplicación con la que hemos estado jugando, quisiéramos agregar un control TextBlock en el que mostrásemos la fecha y hora actual.
Podríamos insertar nuestro control en uno de los dos StackPanel que existen, pero vamos a crear un tercer StackPanel para que veamos como quedaría todo.
Nuestro control en código XAML quedaría de la siguiente manera:
1: <TextBlock x:Name="FechaHora" Text="30/06/2012 11:56:12" FontSize="20" VerticalAlignment="Center" />
Y en nuestra barra de aplicación, los tres bloques o paneles StackPanel quedarían de la siguiente manera:
1: <Page.BottomAppBar>
2: <AppBar x:Name="MenuOptionBottom" IsOpen="True" Opacity="0.75" IsSticky="False"
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="Center">
11: <TextBlock x:Name="FechaHora" Text="30/06/2012 11:56:12" FontSize="20" VerticalAlignment="Center" />
12: </StackPanel>
13: <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
14: <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Ayuda" />
15: <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Eliminar" />
16: </StackPanel>
17: </Grid>
18: </AppBar>
19: </Page.BottomAppBar>
Nuestra aplicación en ejecución quedaría de la siguiente manera:
