Historique de navigation et navigation vers l’arrière pour les applications Windows

Pour implémenter la navigation vers l’arrière dans votre application, placez un bouton précédent en haut à gauche de l’interface utilisateur de votre application. L’utilisateur s’attend à ce que le bouton Précédent accède à l’emplacement précédent dans l’historique de navigation de l’application. Par défaut, le contrôle Frame enregistre les actions de navigation dans son BackStack et ForwardStack. Toutefois, vous pouvez modifier les actions de navigation ajoutées à l’historique de navigation.

Bouton Précédent

Nous vous recommandons de placer le bouton Retour dans le coin supérieur gauche de votre application. Si vous personnalisez la barre de titre, placez le bouton Précédent dans la barre de titre. Pour plus d'informations, consultez la barre de titre - Conception > Bouton Précédent .

Si vous utilisez le contrôle TitleBar pour créer une barre de titre personnalisée, utilisez le bouton Précédent intégré. Définissez IsBackButtonVisible sur true si nécessaire, définissez IsBackButtonEnabled en fonction des besoins, et gérez l’événement BackRequested pour naviguer.

Pour créer un bouton précédent autonome, utilisez le contrôle Bouton avec la ressource TitleBarBackButtonStyle et placez le bouton dans le coin supérieur gauche de l'interface utilisateur de votre application (pour plus d’informations, consultez les exemples de code XAML ci-dessous).

<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 votre application possède une barre de commandes supérieure, placez le Button contrôle dans la CommandBar.Content zone.

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

Pour réduire les éléments d’interface utilisateur qui se déplacent dans votre application, affichez un bouton Précédent désactivé lorsqu’il n’y a rien dans la pile inverse (IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}"). Toutefois, si vous pensez que votre application n’aura jamais d'historique de navigation, vous n’avez pas besoin d’afficher le bouton Retour du tout.

Navigation arrière

Cette section illustre le code permettant de gérer la navigation arrière. Les sources classiques d’une demande de navigation arrière sont l’événement TitleBar.BackRequested , l’événement NavigationView.BackRequested ou l’événement Click du bouton Précédent.

Cet exemple de code montre comment implémenter le comportement de navigation vers l’arrière avec un bouton Précédent. Le code répond à l’événement Button Click pour naviguer.

Si vous utilisez le bouton Précédent dans un contrôle NavigationView ou TitleBar, vous pouvez placer le code de cadre de navigation directement dans la méthode du gestionnaire d’événements sans le dupliquer pour chaque page. Toutefois, si vous créez un bouton Précédent dans le contenu de vos pages d’application, vous devez dupliquer le code de navigation de la fenêtre dans le fichier code-behind de chaque page. Pour éviter la duplication, vous pouvez placer le code lié à la navigation dans la classe App dans la page code-behind App.xaml.*, puis l'appeler depuis n'importe quel endroit de votre application, comme illustré ici.

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

Articles connexes

• Notions de base sur la navigation
• Implémenter la navigation de base