Pues eso… que en las aplicaciones de Windows 8 (Windows Store) la forma de verla puede ser de tres formas distintas: que ocupe toda la pantalla (el modo predeterminado), que ocupe una parte más pequeña en uno de los laterales (modo snapped o acoplada) o que ocupe la parte grande (filled o vista de relleno) cuando otra aplicación esté en modo snapped.

Para aclarar estos conceptos, te muestro en la figura 1 cómo se vería una aplicación a vista completa o en modo acoplado (esta imagen está sacada de: Directrices para vistas acopladas y rellenas (aplicaciones de la Tienda Windows).

 

Figura 1. Una aplicación que va de pantalla completa a vista acoplada

 

Cuando la aplicación está en modo "relleno" el tamaño es aceptablemente grande como para que tengamos que preocuparnos demasiado, pero cuando está en modo acoplado (snapped) ahí si que hay que tener en cuenta que el contenido puede que no sea el adecuado.

Por ejemplo, nuestra aplicación de reloj se vería así:

Figura 2. La aplicación de reloj acoplada a la izquierda

 

Por tanto, para que el texto se adapte cuando esté en modo acoplado (snapped) vamos a escribir unas pocas líneas en las que simplemente cambiaremos el tamaño de la fuente de los dos textos mostrados, de esa forma, al acoplar la aplicación se verá más o menos como vemos en la figura 3.

 

Figura 3. Al acoplar la ventana de nuestra aplicación el texto se adapta

 

Nota:
El cambio de color (y aparentemente de tamaño) del botón Stop es porque la figura 2 está capturada del proyecto de C# y la captura de la figura 3 es del proyecto de Visual Basic en el que he cambiado el color predeterminado de los iconos y demás con idea de que no sean grises, si no de ese color azul.

 

Veamos el código, el cual está en MainPage_SizeChanged y lo único que haremos es "empequeñecer" el tamaño de las fuentes cuando esté en modo Snapped y volver a poner el tamaño inicial al mostrarse en cualquiera de las otras dos formas.

VB:

' En el evento SizeChanged de la página principal comprobamos
' si estamos en modo de vista Snapped y adaptamos el tamaño de las fuentes
Private Sub MainPage_SizeChanged(sender As Object, e As SizeChangedEventArgs) _
            Handles Me.SizeChanged
    If ApplicationView.Value = ApplicationViewState.Snapped Then
        txtHora.FontSize = 36
        txtFecha.FontSize = 18
    Else
        txtHora.FontSize = 72
        txtFecha.FontSize = 36
    End If
End Sub

 

C#:

// En el evento SizeChanged de la página principal comprobamos
// si estamos en modo de vista Snapped y adaptamos el tamaño de las fuentes
private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (ApplicationView.Value == ApplicationViewState.Snapped)
    {
        txtHora.FontSize = 36;
        txtFecha.FontSize = 18;
    }
    else
    {
        txtHora.FontSize = 72;
        txtFecha.FontSize = 36;
    }
}

 

En el caso de VB no tienes que hacer nada especial con ese código, simplemente lo pegas en MainPage.vb y ya está, pero en C# debes agregar el evento a ese método, eso lo tendrás que hacer (por ejemplo) en el código de diseño de MainPage.xaml justo antes del cierre de la definición de la página (elemento Page):

mc:Ignorable="d" SizeChanged="MainPage_SizeChanged">

 

Lo que hacemos en ese método de evento es bien simple, comprobamos si el valor de la propiedad Value de la clase ApplicationView (que está definida en el espacio de nombres Windows.UI.ViewManagement) tiene un valor Snapped, de ser así reducimos el tamaño de las fuentes y en caso contrario asignamos los valores "normales".

En la página (de MSDN) de la enumeración ApplicationViewState puedes ver los cuatro valores soportados por esa enumeración y la descripción de cada uno de ellos.

 

Y esto es todo por hoy… dentro de poco más… ¿el qué? ya veremos… porque en teoría la aplicación ya está como en un principio yo quería que estuviera, así que… lo mismo te pongo un resumen completo y el código fuente… ya veremos.

En cualquier caso, espero que te sea de utilidad todo esto que te he contado, tanto en esta ocasión como en las anteriores (abajo tienes todos los enlaces).

 

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

…