mauroDev.NINJA

Entradas recientes


Comentarios recientes


Archivos


Categorías


Meta


BackButton Navigation Pt. 2

Mauricio AndrésMauricio Andrés

En BackButton Navigation Pt. 1 vimos cómo podíamos modificar el comportamiento por defecto del botón Back existentes en todos los smartphones con Windows 10. Pero probablemente trataste de ejecutar la aplicación en Tablet y Desktop, pero boom!, no existe el botón Back en aplicaciones de escritorio, y tampoco en Tablets ejecutándose en modo escritorio.

back_notfound

La solución a este problema que he encontrado y que me ha funcionado muy bien, es que cuando estemos ejecutando Windows en modo Tablet, podremos navegar atrás utilizando el botón nativo de tablet y cuando estemos en modo Escritorio aparecerá un botón en el encabezado de nuestra aplicación, con el cual podremos ir atrás.

Esto, en combinación con la implementación de Smartphone que te mostré anteriormente, harán que tu aplicación mantenga UX rica y robusta, adecuada a cada dispositivo en donde la ejecutes.

Lo que haremos será trabajar en base a la aplicación que creamos anteriormente, que puedes descargar aquí .

En nuestro App.xaml.cs, agregaremos en la línea 70 de nuestra clase, el siguiente código, para implementar el manejador de eventos para nuestro método BackButtonRequested

Como podrás apreciar, sólo mostraremos el botón atrás en la cabecera de nuestra aplicación cuando haya alguna página a donde volver, en el caso de no existir, simplemente no lo mostraremos, como sería por ejemplo en nuestro MainPage.

SystemNavigationManager.GetForCurrentView().BackRequested += BackButtonRequested;

 SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
 rootFrame.CanGoBack ? AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed;

Nota que nos marcará errores debido a que para utilizar SystemNavigationManager debes decirle a nuestra aplicación que utilice el namespace Windows.UI.Core, para esto hacemos “ctrl + .” sobre nuestro error y elegimos la opción Using Windows.UI.Core, o bien pinchando la ampolleta amarilla que nos sugiere cambios en el código.

using_wcore

Una vez corregido eso, implementaremos la funcionalidad a nuestro método BackButtonRequested, puedes ejecutar el atajo ctrl + . sobre el error que nos marca sobre nuestro método y presionar Generar el método ‘App.BackButtonRequested’.

Aquí repetiremos el código genérico que utilizamos en nuestro demo anterior, declararemos un Frame llamado rootFrame y le asignaremos el contenido actual que estamos visualizando como un frame, luego verificaremos si podemos volver a alguna página anterior.

private void BackButtonRequested(object sender, BackRequestedEventArgs e)
        {
            Frame rootFrame = Window.Current.Content as Frame;

            if (rootFrame.CanGoBack)
            {
                e.Handled = true;
                rootFrame.GoBack();
            }
        }

El último paso, y el más importante, es que en cada página a la que naveguemos verifiquemos si podemos mostrar o no el botón Back, ya que actualmente nuestra implementación sólo lo pregunta la primera vez que ejecutamos nuestra aplicación.

Para esto, declararemos dentro de OnLaunched, un manejador de eventos para cuando naveguemos entre pantallas, todo el código que implementemos dentro de este eventhandler se ejecutará cuando encontremos contenido a donde queremos navegar, asi que es perfecto para lo que necesitamos!

En la línea 83 aproximadamente agrega el siguiente código

rootFrame.Navigated += OnNavigated;

Nuestro OnNavigated debe quedar de la siguiente manera, al igual que hicimos en OnLaunched, mostraremos el botón Back sólo si nuestro frame tiene a donde volver.

private void OnNavigated(object sender, NavigationEventArgs e)
        {
            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
                ((Frame)sender).CanGoBack ?
                AppViewBackButtonVisibility.Visible :
                AppViewBackButtonVisibility.Collapsed;
        }

Eso es todo! ahora probemos en todos los dispositivos, a ver como se comporta nuestra aplicación!

Ejecutandose en modo Escritorio 1_pc
Ejecutandose en modo Tablet2_tablet

Excelente y felicitaciones! ahora tienes una aplicación que puede navegar atrás en todos los escenarios posibles 🙂

Espero que puedas aplicar lo aprendido aquí a todos tus futuros proyectos en Windows 10 Universal Apps!

Gracias por visitarme y recuerda que puedes descargar el código de ejemplo aquí abajo.

No olvides compartir esto con tus amigos, hasta la próxima.

Descarga el Código desde GitHub

I love to make impact through #coding and #technology, I'm a #software #developer and #musician!

Comments 0
There are currently no comments.