MSDN España

Noticias, avisos, reflexiones... del equipo que hay detrás de MSDN en España... también tendremos alguna que otra firma invitada :)

Windows 8 Tips & Tricks. Cómo implementar Snap View (XAML/C#)

 

Windows 8 Tips & Tricks. Cómo implementar Snap View (XAML/C#)

[Nota: Este artículo pertenece a nuestra serie de Windows 8 Tips & Tricks]

La vista Snap View permite que nuestra aplicación sea usada en la misma pantalla con otra. Obviamente para permitir esto, el espacio en pantalla que nuestra aplicación tiene disponible es mucho menor. Por ello es necesario adaptar nuestras aplicaciones al modo Snap View. En este Tips & Tricks vemos como hacerlo.

[Channel9, YouTube]

Supongamos que tenemos una aplicación que funciona adecuadamente en vista FullScreenLandscape presentando los datos mediante un GridView definido de la siguiente forma:

        <GridView x:Name="gridViewKittens" 
                  Grid.Row="1" 
                  ItemTemplate="{StaticResource Standard250x250ItemTemplate}" 
                  Padding="120,0,0,0" />

La información se muestra adecuadamente, pero si se hace uso de la vista SnapView, la interfaz no se adapta al nuevo espacio y se hace prácticamente inusable:

  

Para evitarlo, podemos hacer que cuando se entre en Snap View en vez de usar un GridView, se use un ListView:

        <ListView x:Name="listViewKittens"
                  Grid.Row="1" 
                  ItemTemplate="{StaticResource Standard80ItemTemplate}" 
                  Visibility="Collapsed" />

El ListView está con visibilidad Collapsed, es decir, oculto, porque de otro modo aparecería sobreimpreso en el GridView, ya que los dos están en la fila 1. Sin embargo, lo que queremos es que el GridView se muestre en FullScreenLandscape y el ListView en SnapView. Para definir esto tenemos que hacer uso de los Visual States.

Un VisualState realiza modificaciones en las declaraciones de la página cuando se entra en ese estado. En nuestro ejemplo necesitamos soportar dos estados: FullScreenLandscape y SnapView.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="FullScreenLandscape" />
        <VisualState x:Name="Snapped">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames 
                    Storyboard.TargetName="backButton" 
                    Storyboard.TargetProperty="Style">
                    <DiscreteObjectKeyFrame 
                        KeyTime="0" 
                        Value="{StaticResource SnappedBackButtonStyle}"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames 
                    Storyboard.TargetName="pageTitle" 
                    Storyboard.TargetProperty="Style">
                    <DiscreteObjectKeyFrame 
                        KeyTime="0"                     
                        Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames 
                    Storyboard.TargetName="pageTitle" 
                    Storyboard.TargetProperty="Text">
                    <DiscreteObjectKeyFrame 
                        KeyTime="0" 
                        Value="SnapView"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames 
                    Storyboard.TargetName="gridViewKittens" 
                    Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame 
                        KeyTime="0" 
                        Value="Collapsed"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames 
                    Storyboard.TargetName="listViewKittens" 
                    Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame 
                        KeyTime="0" 
                        Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>                        
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

El estado FullScreenLandscape no contiene ninguna modificación, ya que el comportamiento por defecto de la página es el que queremos, GridView mostrado y ListView oculto.

En el estado Snapped sí queremos hacer algunas modificaciones:

  • Cambiamos el estilo del botón back por el adecuado en modo Snapped
  • Cambiamos el estilo del título de la página por el adecuado en modo Snapped
  • Cambiamos el título de la página por "SnapView", simplemente como ejemplo de que se puede hacer
  • Ocultamos el GridView
  • Mostramos el ListView

Sin embargo, con esto hemos definido los cambios que queramos que ocurran cuando se esté en uno u otro estado, pero aún tenemos que decir cuándo queremos activar esos estados. Para ello, en el constructor de la página, nos subscribimos al evento SizeChanged de la ventana y le decimos al VisualStateManager que realice los cambios que hemos definido para el estado en el que nos encontremos:

Loaded += (sender, e) =>
{
    Window.Current.SizeChanged += (x, y) =>
    {
        VisualStateManager.GoToState(this, ApplicationView.Value.ToString(), false);
    };
};

Lo hacemos subscribiéndonos al evento Loaded para asegurarnos de que se realice el cambio una vez que todos los elementos de la página han sido creados.

Si tienes alguna duda, recuerda que tienes a tu disposición el foro de desarrollo de aplicaciones para Windows 8 en castellano, donde podrás compartir tus conocimientos con la comunidad de desarrolladores y encontrar ayuda para resolver tus dudas técnicas, y una Introducción al desarrollo de aplicaciones para Windows 8.

También puedes estar al día de todas las novedades a través de nuestros rincones en las redes sociales:

Un saludo,

      Pablo Carballude