Histórico de navegação e navegação para trás em aplicativos do Windows

Para implementar a navegação de retorno em seu aplicativo, coloque um botão voltar no canto superior esquerdo da interface do aplicativo. O usuário espera que o botão voltar navegue até o local anterior no histórico de navegação do aplicativo. Por padrão, o controle Frame registra ações de navegação em seu BackStack e ForwardStack. No entanto, você pode modificar quais ações de navegação são adicionadas ao histórico de navegação.

Botão Voltar

Recomendamos que você coloque o botão Voltar no canto superior esquerdo do aplicativo. Se você personalizar a barra de título, coloque o botão Voltar na barra de título. Consulte o design da barra de título > botão Voltar para obter mais informações.

Se você usar o controle TitleBar para criar uma barra de título personalizada, use o botão voltar interno. Defina IsBackButtonVisible como true, defina IsBackButtonEnabled conforme necessário e manipule o evento BackRequested para navegar.

Para criar um botão voltar autônomo, use o controle Botão com o TitleBarBackButtonStyle recurso e coloque o botão no canto superior esquerdo da interface do usuário do aplicativo (para obter detalhes, consulte os exemplos de código XAML abaixo).

<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>

Se o aplicativo tiver um CommandBar superior, coloque o Button controle na CommandBar.Content área.

<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 os elementos de interface do usuário que se movem em seu aplicativo, mostre um botão voltar desabilitado quando não houver nada no backstack (IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}"). No entanto, se você espera que seu aplicativo nunca tenha um backstack, não será necessário exibir o botão Voltar.

Navegação de volta

Esta seção demonstra o código para lidar com a navegação de volta. As fontes típicas de uma solicitação de navegação traseira são o evento TitleBar.BackRequested , o evento NavigationView.BackRequested ou o evento Clique no botão Voltar.

Este código de exemplo demonstra como implementar o comportamento de navegação para trás com um botão de voltar. O código responde ao evento Clique no Botão para navegar.

Se você usar o botão voltar em um controle NavigationView ou TitleBar, poderá colocar o código de navegação de quadro diretamente no método do manipulador de eventos sem a necessidade de duplicá-lo para cada página. No entanto, se você criar um botão de voltar no conteúdo das páginas do aplicativo, precisará duplicar o código de navegação de quadros no arquivo code-behind de cada página. Para evitar a duplicação, você pode colocar o código relacionado à navegação na App classe na App.xaml.* página code-behind e chamá-lo de qualquer lugar em seu aplicativo, conforme mostrado aqui.

// 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 };

Artigos relacionados

• Noções básicas de navegação
• Implementar navegação básica