mauroDev.NINJA

Entradas recientes


Comentarios recientes


Archivos


Categorías


Meta


BackButton Navigation Pt. 1

Mauricio AndrésMauricio Andrés

Anteriormente hemos visto cómo navegar a través de distintas pantallas, avanzar y retroceder utilizando el método Navigate de nuestros Frames, pero les tenía prometido que mostraría como implementar el retroceso a través de los botones físicos y virtuales de nuestros dispositivos móviles.

Si no te has percatado aún, la funcionalidad que tiene por defecto el botón Back de nuestros dispositivos es sacarte de la aplicación que estás ejecutando, esto nos da una experiencia de usuario horrible!, pero ahora te mostraré cómo darle a este botón una mejor funcionalidad.
Una vez que hayamos navegado a alguna página y presionemos Back, volveremos hacia atrás pasando por todas las páginas que hayamos visitado anteriormente, y una vez que lleguemos al principio de nuestra app, sólo en ese momento podremos salir de nuestra aplicación.
backphone

Lo primero que haremos será crear un nuevo proyecto de tipo Windows -> Universal -> Aplicación Vacía (Windows Universal) y lo llamaremos BackButtonDemo.

Ahora modificaremos nuestro MainPage.xaml, y agregaremos un TextBlock que diga “Pagina 1” y un botón para avanzar a la siguiente pantalla.

<Grid Background="DodgerBlue">
        <StackPanel>
            <StackPanel>
                <TextBlock Text="Pagina 1" 
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center"
                   FontSize="80"
                   Foreground="White"/>
            </StackPanel>
            <StackPanel Margin="0,200,0,0">
                <Button Content="Go to Page 2" 
                        Background="Gray" 
                        HorizontalAlignment="Center"
                        Foreground="White"
                        FontSize="30"
                        Click="Button_Click"/>
            </StackPanel>
        </StackPanel>
    </Grid>

Luego de haber editado nuestro MainPage, iremos al code behind del mismo (MainPage.xaml.cs), para implementar el evento Click de nuestro botón “Go to Page 2”.

private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(Page2));
        }

Luego de que tengamos nuestro MainPage listo agregaremos dos nuevas páginas a nuestro proyecto, llamadas Page2 y Page3, las podemos agregar haciendo botón derecho sobre nuestro proyecto -> Agregar -> Nuevo Elemento -> Página en blanco.
add_new_page

Repetiremos el mismo procedimiento que hicimos en MainPage, pero cambiaremos los título de las páginas correspondientes, y les agregaremos las navegaciones que serían de la siguiente manera: MainPage -> Page2 -> Page3.

Llegó el momento!

Antes que todo debemos agregar una nueva referencia a nuestro proyecto, ésta es una extensión que nos va a dar la opción de poder manejar este botón que es específico de Windows Phone. Para esto debemos hacer click con el botón derecho sobre los References de nuestro proyecto -> Agregar Referencia -> Universal Windows -> Extensions

mobile_extension

Gracias a nuestra clase ApiInformation la cual nos permite obtener información relevante de llamadas API desde nuestra aplicación sólo necesitamos agregar dos líneas de código para que nuestro botón back sea detectado al momento de ser presionado.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
                Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_BackPressed;

Pero, ¿dónde debo implementarlo?, claro… podríamos hacerlo en el code behind de nuestras pantallas, pero eso no es práctico, ya que imaginen tener más de 10 páginas en nuestra aplicación, ¿tedioso no?

Para solucionar esto, haremos uso de nuestra clase App.xaml.cs, en ella declararemos el código anterior además de la funcionalidad para nuestro método HardwareButtons_BackPressed.

Dentro de nuestro constructor public App() agregaremos el código que te mostré anteriormente, todo el constructor nos debería quedar así.

        public App()
        {
            this.InitializeComponent();
            this.Suspending += OnSuspending;

            if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
                Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_BackPressed;
        }

Fuera del constructor implementaremos la funcionalidad para nuestro método HardwareButtons_BackPressed, primero vamos a verificar que nuestro frame no sea nulo, y luego con CanGoBack revisaremos si existe al menos una página por la que hayamos navegado anteriormente.

Finalmente debemos notificarle a nuestra aplicación que hemos manejado el botón Back, esto lo conseguimos definiendo nuestro BackPressedEventArgs como Handled = true. Si todo esto se cumple, debiesemos poder volver atrás con GoBack(). Nuestro método debe quedar así:

private void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e)
        {
            Frame frame = Window.Current.Content as Frame;
            if (frame == null)
            {
                return;
            }

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

Hora de ejecutar nuestra aplicación!

Ahora deberías poder navegar hasta Page3 con la navegación que creamos a través de los botones “Go To” y devolverte hasta MainPage utilizando el Back Button de nuestro emulador, una vez que llegues a MainPage, si presionas el botón nuevamente te saldrás de la aplicación como es lo esperado en un flujo normal de navegación.

Con esto hemos llegado al final de nuestra primera parte sobre la navegación hacia atrás utilizando el botón Back de nuestros smartphones. En el siguiente post veremos cómo implementar el botón Back en nuestras Tablets y cómo lograr el mismo objetivo en dispositivos que no tienen estos botones de manera nativa, como lo es el computador.

Recuerda que puedes bajar el código de ejemplo a continuación.

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.