Windows Phone. Transiciones entre páginas.

Ya vimos una introducción a la navegación entre páginas (la bases del sevicio de navegación, como pasar de una página a otra y como pasar parámetros simples como cadenas de una página a otra) en la siguiente entrada:

Windows Phone. Navegación entre páginas. 1º Parte.

Además, analizamos todos los eventos de navegación en esta otra entrada:

Windows Phone. Navegación entre páginas. 2º Parte.

En esta entrada vamos a mejorar la experiencia del usuario al utilizar la aplicación cuando se produce la navegación entre páginas utilizando transiciones. Las transiciones entre páginas las tenemos disponibles dentro del Windows Phone Silverlight Toolkit, paquete de controles totalmente gratuito disponible tanto en Codeplex como utilizando Nuget. Ya hablamos de que como instalar y que contenía el Toolkit en la siguiente entrada:

Introducción al Windows Phone Silverlight Toolkit

Vamos a realizar como de costumbre un ejemplo donde realizar las pruebas necesarias para entender las transiciones entre páginas.

La plantilla seleccionada será “Windows Phone Application” para simplificar al máximo el ejemplo.

Tras crear el proyecto lo primero que debemos hacer es agregar la referencia a la librería del Toolkit para tener acceso al control. Para ello agregamos la referencia a la librería Microsoft.Phone.Controls.Toolkit.dll.

Lo primero que debemos hacer para poder utilizar las transiciones es dirigirnos a la clase App.xaml.cs y localizar la siguiente línea:

RootFrame = new PhoneApplicationFrame();

La debemos modificar por la siguiente:

RootFrame = new TransitionFrame();

En nuestra página principal modificamos el color de fondo para una fácil identificación de la página en la que nos encotramos:

<Grid x:Name="LayoutRoot" Background="Red">

Añadimos un simple botón que nos permite la navegación a otra página:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
          <TextBlock Text="Página Principal" FontSize="38" HorizontalAlignment="Center" Margin="0,50"/>
          <Button Content="Navegar a la Página 1" Click="Button_Click" />
     </StackPanel>
</Grid>

A continuación en el evento clic del botón:

private void Button_Click(object sender, RoutedEventArgs e)
{
     NavigationService.Navigate(new Uri("/Pagina1.xaml", UriKind.Relative));
}

Simple, recordamos que en Windows Phone tenemos disponible el servicio de navegación llamado NavigationServiceque nos permite realizar operaciones como, navegar de una página a otra, navegar de una página a otra pasando parámetros, volver a una página en la que hemos estado, etc.

Nos centramos en añadir la transición a la página. En el Toolkit de Windows Phone contamos con una amplia variedad de transiciones:

  • Turnstile Transition. La más sencilla de usar. La transición es similar al pasar una página de un libro desde una esquina. Dispone de los siguientes modos BackwardIn, ForwardIn, BackwardOut y ForwardOut. Se pueden aplicar tanto al salir de la página o al entrar a la misma.
  • Swivel Transition. La transición consiste en la rotación de la página.
  • Slide Transition. La transición consiste en el deslizamiento de la página apareciendo o desapareciendo dependiendo del modo utilizado. Tenemos a nuestra disposición los siguientes modos, SlideUpFadeIn, SlideUpFadeOut, SlideDownFadeIn, SlideDownFadeOut, SlideLeftFadeIn, SlideLeftFadeOut, SlideRightFadeIn ySlideRightFadeOut. Es una de las transiciones más dificiles de utilizar (debido a la enorme cantidad de modos disponibles) pero de las que resultados más atractivos visualmente nos ofrece.
  • Roll Transition. Transición fácil de usar. No tiene ningún modo.
  • Rotate Transition. Transición muy agradable visualmente. Rota las páginas (hacia delante o hacia detrás dependiendo del modo usado). Tiene una gran variedad de modos: In90Clockwise, In90Counterclockwise, In180Clockwise, In180Counterclockwise, Out90Clockwise, Out90Counterclockwise, Out180Clockwise y Out180Counterclockwise.

Lo primero que debemos hacer para utilizar las transiciones en nuestras páginas es añadir el namespace del Toolkit:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Utilizamos en nuestra página principal la transición de tipo Turnstile Transition:

<toolkit:TransitionService.NavigationInTransition>
     <toolkit:NavigationInTransition>
          <toolkit:NavigationInTransition.Backward>
               <toolkit:TurnstileTransition Mode="BackwardIn"/>
          </toolkit:NavigationInTransition.Backward>
          <toolkit:NavigationInTransition.Forward>
               <toolkit:TurnstileTransition Mode="ForwardIn"/>
          </toolkit:NavigationInTransition.Forward>
     </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
     <toolkit:NavigationOutTransition>
          <toolkit:NavigationOutTransition.Backward>
               <toolkit:TurnstileTransition Mode="BackwardOut"/>
          </toolkit:NavigationOutTransition.Backward>
          <toolkit:NavigationOutTransition.Forward>
               <toolkit:TurnstileTransition Mode="ForwardOut"/>
          </toolkit:NavigationOutTransition.Forward>
     </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

Añadimos una nueva página (en el ejemplo que puedes descargar al final de la entrada, llamada Pagina1.xaml). Utilizamos en esta página la transición de tipo Slide Transition:

<toolkit:TransitionService.NavigationInTransition>
     <toolkit:NavigationInTransition>
          <toolkit:NavigationInTransition.Backward>
               <toolkit:SlideTransition Mode="SlideDownFadeIn"/>
          </toolkit:NavigationInTransition.Backward>
          <toolkit:NavigationInTransition.Forward>
               <toolkit:SlideTransition Mode="SlideUpFadeIn"/>
          </toolkit:NavigationInTransition.Forward>
     </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
         <toolkit:NavigationOutTransition.Backward>
              <toolkit:SlideTransition Mode="SlideRightFadeOut"/>
         </toolkit:NavigationOutTransition.Backward>
         <toolkit:NavigationOutTransition.Forward>
              <toolkit:SlideTransition Mode="SlideLeftFadeOut"/>
         </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

Como en la página principal le cambiamos el color de fondo (a azul) para una rápida identificación:

<Grid x:Name="LayoutRoot" Background="Blue">

Añadimos un botón que nos permita navegar a otra página para seguir probando más transiciones:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
          <TextBlock Text="Página 1" FontSize="38" HorizontalAlignment="Center" Margin="0,50"/>
          <Button Content="Navegar a la Página 2" Click="Button_Click"/>
     </StackPanel>
</Grid>

En el evento clic del botón navegamos a una tercera página:

private void Button_Click(object sender, RoutedEventArgs e)
{
     NavigationService.Navigate(new Uri("/Pagina2.xaml", UriKind.Relative));
}

Añadimos una nueva página (Pagina2.xaml). Utilizamos en esta página la transición de tipo Rotate Transition:

<toolkit:TransitionService.NavigationInTransition>
     <toolkit:NavigationInTransition>
          <toolkit:NavigationInTransition.Backward>
               <toolkit:RotateTransition Mode="In90Clockwise"/>
          </toolkit:NavigationInTransition.Backward>
          <toolkit:NavigationInTransition.Forward>
               <toolkit:RotateTransition Mode="In90Counterclockwise"/>
          </toolkit:NavigationInTransition.Forward>
     </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
     <toolkit:NavigationOutTransition>
          <toolkit:NavigationOutTransition.Backward>
               <toolkit:RotateTransition Mode="Out180Clockwise"/>
          </toolkit:NavigationOutTransition.Backward>
          <toolkit:NavigationOutTransition.Forward>
               <toolkit:RotateTransition Mode="Out180Counterclockwise"/>
          </toolkit:NavigationOutTransition.Forward>
     </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

De nuevo, modificamos el color de fondo (a verde) y añadimos un botón que nos permitirá realizar la navegación a otra página para poder utilizar la transición entre páginas:

<Grid x:Name="LayoutRoot" Background="Green">

 

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
          <TextBlock Text="Página 2" FontSize="38" HorizontalAlignment="Center" Margin="0,50"/>
          <Button Content="Navegar a la Página 3" Click="Button_Click" />
     </StackPanel>
</Grid>

 

private void Button_Click(object sender, RoutedEventArgs e)
{
     NavigationService.Navigate(new Uri("/Pagina3.xaml", UriKind.Relative));
}

Por último, añadimos otra nueva página (Pagina3.xaml). Utilizaremos la transición Swivel Transition.

<toolkit:TransitionService.NavigationInTransition>
     <toolkit:NavigationInTransition>
          <toolkit:NavigationInTransition.Backward>
               <toolkit:SwivelTransition Mode="BackwardIn"/>
          </toolkit:NavigationInTransition.Backward>
          <toolkit:NavigationInTransition.Forward>
               <toolkit:SwivelTransition Mode="ForwardIn"/>
          </toolkit:NavigationInTransition.Forward>
     </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
     <toolkit:NavigationOutTransition>
          <toolkit:NavigationOutTransition.Backward>
               <toolkit:SwivelTransition Mode="BackwardOut"/>
          </toolkit:NavigationOutTransition.Backward>
          <toolkit:NavigationOutTransition.Forward>
               <toolkit:SwivelTransition Mode="ForwardOut"/>
          </toolkit:NavigationOutTransition.Forward>
     </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

Modificamos el color de fondo de la página (púrpura):

<Grid x:Name="LayoutRoot" Background="Purple">

Añadimos un botón que nos permitirá navegar de nuevo a nuestra página inicial:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
          <TextBlock Text="Página 3" FontSize="38" HorizontalAlignment="Center" Margin="0,50"/>
          <Button Content="Navegar a la Página Principal" Click="Button_Click"/>
     </StackPanel>
</Grid>

 

private void Button_Click(object sender, RoutedEventArgs e)
{
     NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
}

Puedes ver en video el resultado de nuestro ejemplo a continuación (lo recomiendo para ver de manera rápida las transiciones aplicadas):

Puedes descargar el ejemplo realizado:

Nada más en esta entrada. Recordar que cualquier duda o sugerencia podéis plantearlas en los comentarios. Espero que lo visto en la entrada os sea de utilidad.

Nota: El paquete de controles ofrecidos por Telerik para Windows Phone (99$) nos ofrece una solución muy similar a la vista en esta entrada pero aportando de manera muy simple varias opciones extras sumamente interesantes por si deseáis echarle un vistazo.

Más información:

WindowsPhoneGeek: Windows Phone 7 Navigation Transitions Step By Step guide

6 pensamientos en “Windows Phone. Transiciones entre páginas.

    • Hola Juan Pablo!

      Muchísimas gracias. Me alegro que te haya gustado la entrada. Ese es el principal objetivo, la búsqueda del aprendizaje continuo. Compartir entre todos nuestros conocimientos. Personalmente me encantaron entradas de tu blog como el control panorama realizado con WPF o la entrada hablando del efecto Tilt para WPF. Me fueron muy útiles. Por lo tanto si alguna de las entradas que escriba son de utilidad ya estaré muy satisfecho.

      Un saludo.

  1. Enhorabena por el blog Javier!
    De lo poco bueno en español que se puede encontrar por la red.
    Explicaciones claras y concisas…

    Un saludo!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s