Udostępnij za pośrednictwem


Historia nawigacji i nawigacja wstecz dla aplikacji systemu Windows

Aby zaimplementować nawigację wstecz w aplikacji, umieść przycisk Wstecz w lewym górnym rogu interfejsu użytkownika aplikacji. Użytkownik oczekuje, że przycisk Wstecz przejdzie do poprzedniej lokalizacji w historii nawigacji aplikacji. Domyślnie kontrolka Ramka rejestruje akcje nawigacyjne w stosach BackStack i ForwardStack. Można jednak zmodyfikować akcje nawigacji dodawane do historii nawigacji.

Uwaga / Notatka

W przypadku większości aplikacji, które mają wiele stron, zalecamy użycie kontrolki NavigationView w celu zapewnienia struktury nawigacji dla aplikacji. Dostosowuje się do różnych rozmiarów ekranu i obsługuje zarówno górny, jak i lewy styl nawigacji. Jeśli aplikacja używa kontrolki NavigationView, możesz użyć wbudowanego przycisku NavigationView.

Wskazówki i przykłady w tym artykule powinny być używane podczas implementowania nawigacji bez używania kontrolki NavigationView . Jeśli używasz NavigationView, te informacje dostarczają przydatnej wiedzy kontekstowej, ale należy użyć określonych wskazówek i przykładów w artykule NavigationView

Przycisk Wstecz

Zalecamy umieszczenie przycisku Wstecz w lewym górnym rogu aplikacji. Jeśli dostosujesz pasek tytułu, umieść przycisk Wstecz na pasku tytułu. Aby uzyskać więcej informacji, zobacz projekt paska tytułu > Przycisk Wstecz .

Jeśli używasz kontrolki TitleBar do tworzenia niestandardowego paska tytułu, użyj wbudowanego przycisku Wstecz. Ustaw wartość IsBackButtonVisible na true, ustaw wartość IsBackButtonEnabled zgodnie z potrzebami i obsłuż zdarzenie BackRequested , aby nawigować.

Aby utworzyć autonomiczny przycisk Wstecz, użyj kontrolki Przycisk z zasobem TitleBarBackButtonStyle i umieść przycisk w lewym górnym rogu interfejsu użytkownika aplikacji (aby uzyskać szczegółowe informacje, zobacz poniższe przykłady kodu XAML).

Przycisk Wstecz w lewym górnym rogu interfejsu użytkownika aplikacji

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

Jeśli aplikacja ma górny pasek poleceń, umieść kontrolkę Button w CommandBar.Content obszarze.

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

Aby zminimalizować elementy interfejsu użytkownika poruszające się w aplikacji, pokaż wyłączony przycisk Wstecz, gdy nie ma nic w stosie zaplecza (IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}"). Jeśli jednak spodziewasz się, że aplikacja nigdy nie będzie miała stosu wstecznego, nie musisz w ogóle wyświetlać przycisku Wstecz.

Stany przycisku Wstecz

Nawigacja wstecz

W tej sekcji przedstawiono kod do obsługi nawigacji wstecznej. Typowe źródła żądania nawigacji wstecznej to zdarzenie TitleBar.BackRequested, zdarzenie NavigationView.BackRequested lub zdarzenie Click przycisku Wstecz.

W tym przykładowym kodzie pokazano, jak zaimplementować zachowanie nawigacji wstecz za pomocą przycisku Wstecz. Kod odpowiada na zdarzenie Kliknij przycisk , aby przejść.

Jeśli używasz przycisku Wstecz w kontrolce NavigationView lub TitleBar , możesz umieścić kod nawigacji ramki bezpośrednio w metodzie obsługi zdarzeń bez konieczności duplikowania go dla każdej strony. Jeśli jednak utworzysz przycisk Wstecz w zawartości stron aplikacji, konieczne będzie zduplikowanie kodu nawigacji ramki w pliku code-behind każdej strony. Aby uniknąć duplikowania, możesz umieścić kod związany z nawigacją w klasie App na stronie code-behind App.xaml.*, a następnie wywołać ten kod z dowolnego miejsca w aplikacji, jak pokazano tutaj.

Ważne

Musisz zaktualizować istniejący kod dla m_window w klasie App, aby utworzyć publiczną właściwość statyczną dla Window, jak pokazano w ostatnich wierszach kodu. Aby uzyskać więcej informacji, zobacz Change Window.Current to App.Window (Zmień okno.Current na App.Window ).

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