[Windows Phone 8.1] Transiciones entre páginas

Introducción

Ya hemos visto como se realiza la navegación entre
páginas en aplicaciones universales. Como desarrolladores, debemos
preocuparnos por múltiples factores a la hora de desarrollar la
aplicación. No debemos quedarnos solo en aportar una funcionalidad útil,
si no que además la experiencia sea sólida y compacta. Por ese motivo,
en el artículo de hoy veremos como añadir distintas transiciones entre
las páginas de la aplicación.

NavigationThemeTransitions

Al navegar a una página B desde una página A, la transición
especificada en la página B será la utilizada tanto al entrar como al
salir. Toda la sincronización será realizada automáticamente por el
framework.

Tipos de transiciones

Contamos con tres tipos de transiciones:

Vamos a crear un ejemplo muy sencillo donde ver todos los tipos de transiciones disponibles.

En la página principal añadimos un botón que nos permita navegar a una segunda página:

<Button Content="Navegar a página 2" HorizontalAlignment="Center" />

Añadimos varias páginas más (en nuestro ejemplo añadimos tres páginas
más, Pagina2, Pagina3 y Pagina4) que permitan la navegación entre ellas
mostrando distintas transiciones:

Añadimos el comando:

<Button Content="Volver"
        HorizontalAlignment="Center"
        Command="{Binding NavigateBackCommand}" />

Donde realizaremos la navegación a la siguiente página:

private ICommand _navigateCommand;
 
public ICommand NavigateCommand
{
     get { return _navigateCommand = _navigateCommand ?? new DelegateCommand(NavigateCommandDelegate); }
}
 
public void NavigateCommandDelegate()
{
     _navigationService.NavigateTo<Pagina2View>("Esto es un parámetro");
}

En las siguientes páginas, añadimos dos botones para navegar hacia delante y atrás:

<StackPanel VerticalAlignment="Center">
     <Button Content="Navegar a página 3"
             HorizontalAlignment="Center"
             Command="{Binding NavigateCommand}" />
     <Button Content="Volver"
             HorizontalAlignment="Center"
             Command="{Binding NavigateBackCommand}" />
</StackPanel>

En la viewmodel:

private ICommand _navigateBackCommand;
private ICommand _navigateCommand;
 
public ICommand NavigateBackCommand
{
     get { return _navigateBackCommand = _navigateBackCommand ?? new DelegateCommand(NavigateBackCommandDelegate); }
}
 
public ICommand NavigateCommand
{
     get { return _navigateCommand = _navigateCommand ?? new DelegateCommand(NavigateCommandDelegate); }
}
 
public void NavigateBackCommandDelegate()
{
     _navigationService.NavigateBack();
}
 
public void NavigateCommandDelegate()
{
     _navigationService.NavigateTo<Pagina3View>();
}

En la segunda página añadimos una transición de tipo SlideNavigationTransitionInfo:

<Page.Transitions>
        <TransitionCollection>
            <NavigationThemeTransition>
                <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                    <SlideNavigationTransitionInfo />
                </NavigationThemeTransition.DefaultNavigationTransitionInfo>
            </NavigationThemeTransition>
        </TransitionCollection>
</Page.Transitions>

NavigationThemeTransition cuenta con una propiedad llamada DefaultNavigationTransitionInfo que especifica que transición usara la página.

En la tercera, CommonNavigationTransitionInfo (recordamos que es la aplicada por defecto):

<Page.Transitions>
        <TransitionCollection>
            <NavigationThemeTransition>
                <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                    <CommonNavigationTransitionInfo IsStaggeringEnabled="True" />
                </NavigationThemeTransition.DefaultNavigationTransitionInfo>
            </NavigationThemeTransition>
        </TransitionCollection>
</Page.Transitions>

En la última página añadimos ContinuumNavigationTransitionInfo:

<Page.Transitions>
        <TransitionCollection>
            <NavigationThemeTransition>
                <NavigationThemeTransition.DefaultNavigationTransitionInfo>
                    <ContinuumNavigationTransitionInfo />
                </NavigationThemeTransition.DefaultNavigationTransitionInfo>
            </NavigationThemeTransition>
        </TransitionCollection>
</Page.Transitions>

El resultado final lo podéis ver a continuación:

NOTA: Haced clic sobre la imagen anterior para visualizar un gif animado del ejemplo.

Podéis descargar el ejemplo realizado a continuación:

Como hemos podido ver a lo largo de este artículo, tenemos una gran
flexibilidad a la hora de controlar las transiciones entre páginas
directamente con el SDK del sistema sin necesidad de frameworks
externos. Además, veremos en próximos artículos que podemos realizar
animaciones en partes del contenido de la pantalla y que contamos con
transiciones aplicadas a elementos en concreto que se lanzan con cambios
de estado (Theme Transitions).

Más información

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *