Etiqueta: .NET

Pues eso… seguimos con la aplicación Reloj para Windows 8, en esta ocasión vamos a añadir un par de cadenas a los recursos de la aplicación y veremos cómo acceder a esos recursos tanto desde código de Visual Basic y C# como desde el código de XAML.

El recurso es para usarlo como cadena de texto en varias partes de la aplicación, por tanto lo definiremos a nivel de aplicación, pero más que nada porque es más fácil de recuperar (o al menos a mí me ha parecido más fácil).

De todas formas, tal como veremos en el código XAML de la página principal, el uso desde el código XAML no afecta dónde esté definido, pero ese sitio si que lo tendremos que tener en cuenta a la hora de acceder a dichos recursos desde el código de VB o C#.

 

Figura 1. El reloj en funcionamiento

 

Te cuento que a la hora de buscar cómo hacer esto me encontré con ejemplos que utilizan FindResource, entre otros sitios, los que vienen en el libro Windows Presentation Foundation Unleashed (que tengo desde febrero de 2007 y que no usaba desde hace unos cuantos años, pero que he tenido que retomar para consultar las posibles dudas que me vayan surgiendo en mi "pelea" con el código XAML que hay que usar para las aplicaciones de Windows Store).

En ese mismo libro indicaba que se podían acceder indicando el nombre de la clase (página XAML) en la que están definidos los recursos, pero que, tal como te he dicho, a mi no me ha funcionado. Que a lo mejor funciona, que no digo yo que no, pero yo no he sido capaz de utilizarlos como yo quería, así que…

Bueno, vamos al tema…

Lo primero que tenemos que hacer es crear los recursos como cadenas, en mi caso, estoy usando dos cadenas, una para el título de una especie de MessageBox (especie, ya que no son avisos como los que estamos acostumbrados en las aplicaciones de escritorio) y el otro para usarlo como texto de ese aviso y como Tooltip del botón "Acerca de…"

Dichas cadenas las defino de esta forma:

<x:String x:Key="ClockTitle_en">Clock for Windows 8 app Store</x:String>
<x:String x:Key="AboutClock_en">A simple clock for Windows 8 app Store by elGuille.info</x:String>

 

Yo he definido estas dos cadenas en el fichero App.xaml, es decir, en la "aplicación".

Si abrimos el fichero App.xaml veremos que justo después de la cabecera tenemos un elemento llamado Application.Resources y dentro de ese hay otro elemento llamado ResourceDictionary que es el que contiene la definición de ResourceDictionary.MergedDictionaries que es donde está indicado el fichero de los estilos que vimos en el artículo anterior (StandardStules.xaml).

Pues bien, esas dos definiciones de las cadenas las pondremos justo después del inicio del elemento ResourceDictionary, de forma que nos quede de esta forma:

<Application.Resources>
    <ResourceDictionary>
        <x:String x:Key="ClockTitle_en">Clock for Windows 8 app Store</x:String>
        <x:String x:Key="AboutClock_en">A simple clock for Windows 8 app Store by elGuille.info</x:String>

        <ResourceDictionary.MergedDictionaries>

            <!-- 
                Styles that define common aspects of the platform look and feel
                Required by Visual Studio project and item templates
             -->
            <ResourceDictionary Source="Common/StandardStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>

    </ResourceDictionary>
</Application.Resources>

 

Ahora vamos a modificar MainPage.xaml para asignar el Tooltip al botón buttonClock. Este será el código a usar para definir el botón que está en el segundo panel:

<Button x:Name="buttonClock" Click="button_Clock" 
        Style="{StaticResource AboutClockAppBarButtonStyle}"
        ToolTipService.ToolTip="{StaticResource AboutClock_en}" />

 

Como puedes comprobar, la forma de usar ese recurso desde XAML es igual que el resto de recursos definidos en nuestro proyecto.

Pero al usarlo desde el código tendremos que indicar "dónde" está (obvio por otro lado).

Así que, vamos a modificar el código, particularmente el evento Click del botón buttonClock.

Lo que haremos es mostrar una especie de "popup" que viene a ser como el MessageBox de las aplicaciones de escritorio, pero al estilo de Windows 8.

Para mostrar ese mensaje usaremos la clase MessageDialog que está definida en Windows.UI.Popups y que por medio del método ShowAsync mostraremos el mensaje.

¿Te has fijado en el nombre del método?

Acaba con la palabra Async… lo cual significa que es un método asíncrono… y si queremos usarlo de esa forma (asíncronamente) tendremos que hacer la llamada desde un método asíncrono y por tanto usando Await (los que han visto mi presentación en la gira que hice el mes pasado por Perú sabrán de qué hablo, y tú también, claro, porque ya sabes de qué va esto de Async… ¡ejem! ¡ojú que carraspera tengo!)

Bueno, dejemos las carrasperas y vamos a lo que vamos.

Para acceder a la cadena del recurso ClockTitle_en y asignarlo al título del diálogo haremos algo así:

En C#:

dlg.Title = App.Current.Resources["ClockTitle_en"].ToString();

 

En Visual Basic:

dlg.Title = App.Current.Resources("ClockTitle_en").ToString()

 

Es decir, accedemos a la colección Resources de la aplicación y le indicamos el nombre del recurso al que queremos acceder. Como es una cadena, usamos el ToString para convertirlo adecuadamente.

 

Si en lugar definirlo en el fichero App.xaml queremos definirlo en la propia página en la que tenemos el código (y el diseño de la aplicación), es decir en MainPage.xaml, podemos hacerlo de esta forma:

dlg.Title = Me.Resources("ClockTitle_en").ToString()

 

dlg.Title = this.Resources["ClockTitle_en"].ToString();

 

En ese caso, la definición de las cadenas las tendremos que poner justo después de la definición de la cabecera de la página y encerrarlas en el elemento Page.Resources tal como podemos ver a continuación (aquí sólo he puesto una de las dos cadenas):

<Page.Resources>
    <x:String x:Key="ClockTitle_en">Clock for Windows 8 app Store</x:String>
</Page.Resources>

 

Por supuesto, también podemos definirlo en el fichero StandardStyles.xaml, y la forma de usarlo desde el código (o desde XAML) será de la misma forma que definiéndolo en el fichero App.xaml.

De hacerlo ahí, tendrás que definir las cadenas justo después del "ResourceDictionary" que hay en la parte superior, por tanto lo tendrías que añadir a partir del cierre del elemento, concretamente después de esta línea:

</ResourceDictionary.ThemeDictionaries>.

 

Bien, dicho todo esto, veamos el código completo del evento Click del botón buttonClock y una captura de la pantalla al mostrar el mensaje.

Visual Basic:

Private Async Sub button_Clock(sender As Object, e As RoutedEventArgs)
    ' Mostrar la imagen del SplashScreen o el mismo texto del Tooltip...
    Dim dlg = New Windows.UI.Popups.MessageDialog(
                                        App.Current.Resources("AboutClock_en").ToString())
    dlg.Title = App.Current.Resources("ClockTitle_en").ToString()

    Await dlg.ShowAsync()

 

C#:

private async void button_Clock(object sender, RoutedEventArgs e)
{
    // Mostrar la imagen del SplashScreen o el mismo texto del Tooltip...
    var dlg = new Windows.UI.Popups.MessageDialog(
                                        App.Current.Resources["AboutClock_en"].ToString());
    dlg.Title = App.Current.Resources["ClockTitle_en"].ToString();
    await dlg.ShowAsync();

 

Como la llamada al método ShowAsync queremos que sea asíncrona, tenemos que definir el método como asíncrono (con el modificador Async / async) y para que dicho método "realmente" sea asíncrono, tenemos que realizar la llamada con Await / await.

 

Al pasar el ratón por el botón de la derecha (el que estamos modificando) se mostrará el ToolTip tal como vemos en la figura 2, y al pulsar en el botón se mostrará el mensaje que vemos en la figura 3.

Figura 2. El mensaje (Tooltip) al pasar el cursor del ratón por el icono

 

Figura 3. El mensaje mostrado al pulsar en el botón de la derecha

 

 

Y esto es todo por ahora… espero que te sea de utilidad… 😉

 

Nos vemos.

Guillermo

 

Temas relacionados:

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

 

…

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

…