Historial de navegación y navegación hacia atrás para aplicaciones de Windows

Para implementar la navegación hacia atrás en la aplicación, coloque un botón Atrás en la esquina superior izquierda de la interfaz de usuario de la aplicación. El usuario espera que el botón Atrás navegue hasta la ubicación anterior en el historial de navegación de la aplicación. De forma predeterminada, el control Frame registra acciones de navegación en su BackStack y ForwardStack. Sin embargo, puede modificar qué acciones de navegación se agregan al historial de navegación.

Botón Atrás

Se recomienda colocar el botón Atrás en la esquina superior izquierda de la aplicación. Si personaliza la barra de título, coloque el botón Atrás en la barra de título. Consulta Diseño de barra de título> Botón Atrás para obtener más información.

Si usa el control TitleBar para crear una barra de título personalizada, use el botón Atrás integrado. Establezca IsBackButtonVisible en true, establezca IsBackButtonEnabled según sea necesario y controle el evento BackRequested para navegar.

Para crear un botón atrás independiente, usa el control Botón con el TitleBarBackButtonStyle recurso y coloca el botón en la esquina superior izquierda de la interfaz de usuario de la aplicación (para obtener más información, consulta los ejemplos de código XAML a continuación).

<Page>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Button x:Name="BackButton"
                Click="BackButton_Click"
                Style="{StaticResource TitleBarBackButtonStyle}"
                IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}" 
                ToolTipService.ToolTip="Back"/>

    </Grid>
</Page>

Si la aplicación tiene una barra de comandos superior, coloque el control en el área CommandBar.Content.

<Page>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <CommandBar>
            <CommandBar.Content>
                <Button x:Name="BackButton"
                        Click="BackButton_Click"
                        Style="{StaticResource TitleBarBackButtonStyle}"
                        IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}" 
                        ToolTipService.ToolTip="Back"/>
            </CommandBar.Content>
        
            <AppBarButton Icon="Delete" Label="Delete"/>
            <AppBarButton Icon="Save" Label="Save"/>
        </CommandBar>
    </Grid>
</Page>

Para minimizar el movimiento de elementos de la interfaz de usuario en su aplicación, muestre un botón de retroceso deshabilitado cuando no haya nada en la pila de navegación hacia atrás (IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}"). Sin embargo, si esperas que tu aplicación nunca tenga un historial de navegación, no necesitas mostrar el botón Atrás en absoluto.

Navegación hacia atrás

En esta sección se muestra el código para controlar la navegación hacia atrás. Los orígenes típicos de una solicitud de navegación inversa son el evento TitleBar.BackRequested , el evento NavigationView.BackRequested o el evento Click del botón Atrás.

En este código de ejemplo se muestra cómo implementar el comportamiento de navegación hacia atrás con un botón Atrás. El código responde al evento Button Click para navegar.

Si usa el botón Atrás en un control NavigationView o TitleBar, puede colocar el código de navegación de fotogramas directamente en el método del controlador de eventos sin necesidad de duplicarlo para cada página. Sin embargo, si creas un botón Atrás en el contenido de las páginas de la aplicación, tendrías que duplicar el código de navegación de marco en el archivo de código de fondo de cada página. Para evitar la duplicación, puedes colocar el código relacionado con la navegación en la clase App en la página de código detrás App.xaml.* y, a continuación, llamarlo desde cualquier lugar de la aplicación, como se muestra aquí.

// MainPage.xaml.cs
private void BackButton_Click(object sender, RoutedEventArgs e)
{
    App.TryGoBack();
}

// App.xaml.cs
//
// Add this method to the App class.
public static bool TryGoBack()
{
    Frame rootFrame = Window.Content as Frame;
    if (rootFrame.CanGoBack)
    {
        rootFrame.GoBack();
        return true;
    }
    return false;
}

public static Window Window { get { return m_window; } }
private static Window m_window;

// MainPage.h
namespace winrt::AppName::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();
 
        void MainPage::BackButton_Click(IInspectable const&, RoutedEventArgs const&)
        {
            App::TryGoBack();
        }
    };
}

// App.xaml.h
using namespace winrt;
using namespace Windows::UI::Xaml::Controls;

struct App : AppT<App>
{
    App();

    static winrt::Microsoft::UI::Xaml::Window Window() { return window; };

    // ...

    // Perform back navigation if possible.
    static bool TryGoBack()
    {
        Frame rootFrame{ nullptr };
        auto content = App::Window().Content();
        if (content)
        {
            rootFrame = content.try_as<Frame>();
            if (rootFrame.CanGoBack())
            {
                rootFrame.GoBack();
                return true;
            }
        }
        return false;
    }

private:
    static winrt::Microsoft::UI::Xaml::Window window;
};

// App.xaml.cpp
winrt::Microsoft::UI::Xaml::Window App::window{ nullptr };

Artículos relacionados

• Conceptos básicos de navegación
• Implementación de la navegación básica