Cronologia di navigazione e navigazione all'indietro per le app di Windows

Per implementare lo spostamento indietro nell'app, posizionare un pulsante Indietro nell'angolo superiore sinistro dell'interfaccia utente dell'app. L'utente si aspetta che il pulsante Indietro passi alla posizione precedente nella cronologia di navigazione dell'app. Per impostazione predefinita, il controllo Frame registra le azioni di spostamento nel relativo BackStack e ForwardStack. Tuttavia, è possibile modificare quali azioni di navigazione vengono aggiunte alla cronologia di navigazione.

Pulsante Indietro

Ti consigliamo di posizionare il pulsante Indietro nell'angolo superiore sinistro dell'app. Quando si personalizza la barra del titolo posizionare il tasto Indietro nella barra del titolo. Per ulteriori informazioni, vedi Progettazione della barra del titolo > Pulsante Indietro.

Se si usa il controllo TitleBar per creare una barra del titolo personalizzata, usare il pulsante Indietro predefinito. Impostare IsBackButtonVisible su true, impostare IsBackButtonEnabled in base alle esigenze e gestire l'evento BackRequested per spostarsi.

Per creare un pulsante Indietro autonomo, usa il controllo Pulsante con la TitleBarBackButtonStyle risorsa e posiziona il pulsante nell'angolo superiore sinistro dell'interfaccia utente dell'app (per informazioni dettagliate, vedi gli esempi di codice XAML riportati di seguito).

<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 l'app ha un controllo CommandBar superiore, posizionare il Button controllo nell'area 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>

Per ridurre al minimo gli elementi dell'interfaccia utente che si spostano nella tua app, mostra un pulsante Indietro disabilitato quando non c'è nulla nel backstack (IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}"). Tuttavia, se prevedi che l'app non abbia mai un backstack, non devi visualizzare affatto il pulsante Indietro.

Spostamento indietro

Questa sezione illustra il codice per gestire lo spostamento indietro. Le origini tipiche di una richiesta di spostamento indietro sono l'evento TitleBar.BackRequested , l'evento NavigationView.BackRequested o l'evento Click del pulsante Indietro.

Questo codice di esempio illustra come implementare il comportamento di spostamento indietro con un pulsante Indietro. Il codice risponde all'evento Button Click per navigare.

Se si usa il pulsante Indietro in un controllo NavigationView o TitleBar, è possibile inserire il codice di navigazione dei frame direttamente nel metodo del gestore degli eventi senza dover duplicarlo per ogni pagina. Tuttavia, se crei un pulsante Indietro nel contenuto delle pagine della tua app, dovrai duplicare il codice di navigazione dei frame nel file "code-behind" di ciascuna pagina. Per evitare la duplicazione, è possibile inserire il codice relativo alla navigazione nella classe App della pagina code-behind App.xaml.* e quindi chiamarlo da qualsiasi punto dell'app, come illustrato di seguito.

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

Articoli correlati

• Nozioni di base sulla navigazione
• Implementare la navigazione di base