[Windows Phone 8.1] Transiciones entre páginas

transitionsIntroducció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.

NavigationThemeTransitions

NavigationThemeTransitions

Tipos de transiciones

Contamos con tres tipos de transiciones:

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

Nuevo proyecto

Nuevo proyecto

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" />
Página 1

Página 1

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ñadir nueva página

Añadir nueva página

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>
Página 2

Página 2

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:

Resultado final

Resultado final

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

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