Pues eso… te voy a explicar cómo agregar una AppBar en una aplicación para Windows 8, pero de las que se descargan desde Windows Store (o tienda de Windows).

Una AppBar es la barra de opciones que se muestra en las aplicaciones para Windows 8 cuando pulsas con el botón derecho (o secundario) del ratón (o mouse).

La definición de la clase AppBar (en inglés):
Represents the container control that holds app UI components for commanding and experiences.

Que traducido al español viene a decir:
Representa el control contenedor que contiene los componentes de interfaz de usuario para aplicaciones de mando y experiencias.

Pero mejor lo vemos.

En las figura 1 tienes esa barra de opciones en la aplicación de Reloj para Windows 8 en la que me estoy basando en estos "consejos" o trucos y que al final parece que va a ser un paso a paso para crear una aplicación para la tienda de Windows 8, si no me crees… ¡ya verás, ya! jejeje.

Figura 1. La AppBar de la aplicación de Reloj para Windows 8

 

Como puedes comprobar en la figura 1, la aplicación muestra dos botones en la parte izquierda de la barra de opciones y otro botón a la derecha, veremos qué fácil es hacer ese diseño con los StackPanel.

Fíjate también que estoy usando los iconos predeterminados de Windows 8, ahora veremos cómo usarlos y lo fácil que resultará, ya que todos esos "estilos" están definidos en la plantilla usada para crear aplicaciones de la tienda de Windows.

Aunque también debo avisarte que dos de esos iconos están modificados para indicar un texto alternativo, ya verás cómo modificar un "estilo" existente y lo fácil que puede ser… sobre todo si alguien te lo explica, ¡ejem! jeje.

 

Lo primero que haremos es abrir el archivo MainPage.xaml, y posicionar el cursor justo después de la declaración inicial de Page y antes de que se defina el Grid que contiene todo lo que se muestra en la aplicación. Una vez ahí añadimos un "control" AppBar.

Si añadimos ese "control" desde el Toolbox, decirte que AppBar te lo mostrará en la sección All XAML Controls (ver la figura 2).

Figura 2. El control AppBar está en otra sección de la barra de controles

 

Pero en nuestro caso lo escribiremos manualmente ya que nos interesa que esa barra sea la de la aplicación y que se muestre en la parte inferior, por tanto escribe lo siguiente y deja que el intellisense de Visual Studio 2012 te ayude…

Lo primero es definir que es una AppBar para mostrarse en la parte inferior:

<Page.BottomAppBar>

Dentro de esta definición añadimos la AppBar propiamente dicha:

<AppBar x:Name="bottomAppBar1" Padding="10,0,10,0">

Ahora añadimos un Grid con dos StackPanel:

<Grid>
    <StackPanel>
    </StackPanel>
    <StackPanel>
    </StackPanel>
</Grid>

Le indicamos que el primer panel se debe ajustar a la izquierda y el segundo a la derecha y que la orientación es horizontal. Una vez hecho esto, el código de nuestra AppBar será como te muestro a continuación:

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar1" Padding="10,0,10,0">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

Ahora le añadimos dos botones al primero de los dos StackPanel y un botón al segundo panel.

Los dos primeros botones servirán para parar y reanudar el temporizador, el tercero es para mostrar un mensaje del tipo "About…" (sobre la aplicación), pero de ese botón ya nos encargaremos en otra ocasión.

Como te comenté antes, esos botones usarán recursos definidos en la aplicación, concretamente los que se incluyen de forma predeterminada con las plantillas de las aplicaciones para Windows Store. Concretamente esos recursos están definidos en el fichero StandardStyles.xaml que se encuentra en la carpeta Global Common.

Y como te darás cuenta aunque están definidos no están todos disponibles, ahora veremos cómo ponerlos a nuestra disposición y cómo modificarlos.

Pero primero vamos a añadir el código XAML con la definición de los tres botones a los dos paneles. Te comento que sólo está definido el segundo de ellos el de parar (stop), pero aunque está definido no está disponible, por tanto te mostrará un error en los nombres de los recursos.

Pero no te preocupes, ahora lo arreglamos.

Figura 3. Los botones usan recursos que "supuestamente" no están definidos.

Como te he dicho, sólo el segundo de los recursos está definido, mientras que los otros dos están basados en dos ya existentes, es decir, dos recursos que utilizan esos iconos pero se llaman de otra forma.

Para solucionar esos errores vamos a hacer que los tres recursos estén disponibles.

Abre el fichero StandardStyles.xaml que está en la carpeta Common (antes te dije que era la carpeta Global, pero no, es la Common, de hecho la carpeta Global no existe en este tipo de proyectos, bueno, es igual, lo corrijo y seguimos).

Busca la cadena StopAppBarButtonStyle y verás que es la definición de un estilo que está comentado (el editor de Visual Studio te lo mostrará en color verde).

Para habilitarlo puedes hacer dos cosas:

1. Quitar todos los comentarios de esas definiciones, o
2. Copiar ese código y ponerlo fuera de los comentarios.

Yo he hecho lo segundo, más que nada para no tener tantos estilos disponibles y que en realidad no voy a usar.

Por tanto selecciona esa definición y ponla fuera de los comentarios, por ejemplo antes del <!– que está un poco más arriba de dicha definición. De esa forma la definición del recurso para el botón Stop quedará así:

<Style x:Key="StopAppBarButtonStyle" TargetType="ButtonBase"
       BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="StopAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Stop"/>
    <Setter Property="Content" Value="&#xE15B;"/>
</Style>

Ahora vamos a definir los otros dos recursos para los botones Play y About Clock.

Como te dije estos están basados en dos recursos existentes, el primero es: PlayAppBarButtonStyle y el segundo es: ClockAppBarButtonStyle.

Por tanto, busca en ese mismo fichero de estilos las dos definiciones que te acabo de indicar, las copias una a una y las pegas fuera de los comentarios (junto a la definición del botón Stop).

Después las modificas para que queden tal como te muestro a continuación:

<Style x:Key="StartAppBarButtonStyle" TargetType="ButtonBase" 
       BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="StartAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="Start"/>
    <Setter Property="Content" Value="&#xE102;"/>
</Style>

<Style x:Key="AboutClockAppBarButtonStyle" TargetType="ButtonBase" 
       BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId" Value="AboutClockAppBarButton"/>
    <Setter Property="AutomationProperties.Name" Value="About Clock"/>
    <Setter Property="Content" Value="&#xE121;"/>
</Style>

Los cambios realizados son básicamente en el nombre (x:Key), en la propiedad AutomationId y en Name, el segundo es para indicar el texto a mostrar bajo el dibujo, el cual es el valor indicado en la propiedad Content.

Esos dibujos son caracteres del tipo de letra Segoe UI Symbol, y debemos indicar el valor del "icono" a mostrar.

 

Una vez que tenemos las definiciones de los estilos ya podemos poner nuestro código y veremos que se muestran los dibujos y textos adecuados.

En este código también están los nombres de los métodos de evento que usaremos al pulsar en ellos. Ahora veremos el código de esos eventos.

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar1" Padding="10,0,10,0">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Button x:Name="buttonStart" Click="button_Start"
                        Style="{StaticResource StartAppBarButtonStyle}" />
                <Button x:Name="buttonStop" Click="button_Stop" 
                        Style="{StaticResource StopAppBarButtonStyle}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button x:Name="buttonClock" Click="button_Clock" 
                        Style="{StaticResource AboutClockAppBarButtonStyle}" />
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

En el código de evento de los botones de iniciar (start) y detener (stop) el temporizador es donde vamos a poner el código para iniciar o detener el temporizador (en el ejemplo anterior estaba en el evento Click del botón btnStop, también modificaremos ese código para que utilice los nuevos métodos).

También haremos que se habiliten o deshabiliten adecuadamente, es decir, una vez que el temporizador está funcionando no hace falta el botón de iniciar (start), por tanto lo deshabilitaremos, ídem de lo mismo en el botón de detener (stop), si está parado el temporizador ¿para qué tener una opción de parar? pues eso…

Este es el código para VB y C# de esos dos eventos (el de button_Clock no te lo muestro, ya que, como te he dicho antes, es un tema para otro artículo).

El código mostrado a continuación incluye las modificaciones de (digámoslo así) la primera entrega de este paso a paso (aquí te muestro tanto el código de Visual Basic como el de C# para que elijas el que más te guste, que tampoco es plan de mostrarte sólo el que yo prefiero… jeje).

Código para Visual Basic:

Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
    actualizarHora()

    button_Start(Nothing, Nothing)
End Sub

Private Sub btnStop_Click(sender As Object, e As RoutedEventArgs)
    ' En el ejemplo anterior, aquí usaba Handles
    ' pero ahora al usar la propiedad Click en el código XAML
    ' ya no es necesario indicar el Handles

    If btnStop.Content.ToString = "Stop" Then
        button_Stop(Nothing, Nothing)
    Else
        button_Start(Nothing, Nothing)
    End If
End Sub

Private Sub button_Stop(sender As Object, e As RoutedEventArgs)
    timer1.Stop()
    btnStop.Content = "Start"
    buttonStart.IsEnabled = True
    buttonStop.IsEnabled = False
End Sub

Private Sub button_Start(sender As Object, e As RoutedEventArgs)
    timer1.Start()
    btnStop.Content = "Stop"
    buttonStart.IsEnabled = False
    buttonStop.IsEnabled = True
End Sub

Private Async Sub button_Clock(sender As Object, e As RoutedEventArgs)
    ' Mostrar la imagen del SplashScreen o el mismo texto del Tooltip...

    ' (este código para otra ocasión)
    ' si te da error, quítale el Async de la definición
End Sub

 

Nota:

Fíjate que en la definición del evento Click del botón btnStop ahora no uso Handles para indicar que ese es el método de evento de dicho evento, ya que ahora en el código XAML está indicado cuál será el método para interceptar el evento Click de dicho botón.

 

Código para C#:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    actualizarHora();

    button_Start(null, null);
}

private void btnStop_Click(object sender, RoutedEventArgs e)
{
    if (btnStop.Content.ToString() == "Stop")
        button_Stop(null, null);
    else
        button_Start(null, null);
}

private void button_Stop(object sender, RoutedEventArgs e)
{
    timer1.Stop();
    btnStop.Content = "Start";
    buttonStart.IsEnabled = true;
    buttonStop.IsEnabled = false;
}

private void button_Start(object sender, RoutedEventArgs e)
{
    timer1.Start();
    btnStop.Content = "Stop";
    buttonStart.IsEnabled = false;
    buttonStop.IsEnabled = true;
}

private async void button_Clock(object sender, RoutedEventArgs e)
{
    // Mostrar la imagen del SplashScreen o el mismo texto del Tooltip...

    // (este código para otra ocasión)
    // si te da error, quítale el async de la definición
}

 

Y esto es todo por ahora… ¡pronto más! 😉

 

Espero que te sea de utilidad.

Nos vemos.

Guillermo

 

Enlaces a los otros artículos de este "paso a paso":

1. Usar un temporizador en las aplicaciones de Windows store (Visual Basic)
2. Usar un temporizador en las aplicaciones de Windows store (C#)
3. Pon una AppBar en tu aplicación de Windows Store
4. Acceder a los recursos de una aplicación de Windows Store desde código (vb, c#, xaml)
5. Actualizar el icono (tile) de una aplicación de Windows Store (cada minuto)
6. Saber cuando la aplicación está en modo Snapped y actuar en consecuencia

…