Navigationsverlauf und Rückwärtsnavigation für Windows-Apps

Wenn Sie die Rückwärtsnavigation in Ihrer App implementieren möchten, platzieren Sie eine Zurück-Schaltfläche in der oberen linken Ecke der Benutzeroberfläche Ihrer App. Der Benutzer erwartet, dass die Zurück-Schaltfläche zur vorherigen Position im Navigationsverlauf der App zurückkehrt. Standardmäßig zeichnet das Frame-Steuerelement Navigationsaktionen in backStack und ForwardStack auf. Sie können jedoch ändern, welche Navigationsaktionen dem Navigationsverlauf hinzugefügt werden.

Schaltfläche "Zurück"

Es wird empfohlen, die Schaltfläche "Zurück" in der oberen linken Ecke Der App zu platzieren. Wenn Sie die Titelleiste anpassen, platzieren Sie die Zurück-Schaltfläche in der Titelleiste. Weitere Informationen finden Sie unter „Titelleisten-Design“ > sowie „Zurück-Schaltfläche“.

Wenn Sie das Titelleisten-Steuerelement verwenden, um eine benutzerdefinierte Titelleiste zu erstellen, verwenden Sie die integrierte Zurück-Schaltfläche. Legen Sie IsBackButtonVisible auf true, legen Sie IsBackButtonEnabled nach Bedarf fest, und behandeln Sie das BackRequested-Ereignis , um zu navigieren.

Um eine eigenständige Zurück-Schaltfläche zu erstellen, verwenden Sie das Schaltflächensteuerelement mit der TitleBarBackButtonStyle Ressource, und platzieren Sie die Schaltfläche in der oberen linken Ecke der Benutzeroberfläche Ihrer App (ausführliche Informationen finden Sie in den folgenden XAML-Codebeispielen).

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

Wenn Ihre App über eine obere CommandBar verfügt, platzieren Sie das Button Steuerelement im CommandBar.Content Bereich.

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

Um das Bewegen von UI-Elementen in Ihrer App zu minimieren, zeigen Sie eine deaktivierte Zurück-Schaltfläche an, wenn im Zurück-Stack (IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}") nichts vorhanden ist. Wenn Sie jedoch erwarten, dass Ihre App nie einen Backstack hat, müssen Sie die Schaltfläche "Zurück" überhaupt nicht anzeigen.

Rückwärtsnavigation

In diesem Abschnitt wird Code zum Behandeln der Rückwärtsnavigation veranschaulicht. Typische Quellen einer Zurücknavigationsanforderung sind das TitleBar.BackRequested-Ereignis , das NavigationView.BackRequested-Ereignis oder das Click-Ereignis der Zurück-Schaltfläche.

Dieser Beispielcode veranschaulicht, wie das Rückwärtsnavigationsverhalten mit einer Zurück-Schaltfläche implementiert wird. Der Code antwortet auf das Button Click-Ereignis , um zu navigieren.

Wenn Sie die Zurück-Schaltfläche in einem NavigationView Oder TitleBar Steuerelement verwenden, können Sie den Framenavigationscode direkt in die Ereignishandlermethode einfügen, ohne sie für jede Seite duplizieren zu müssen. Wenn Sie jedoch eine Zurück-Schaltfläche im Inhalt Ihrer App-Seiten erstellen, müssen Sie den Framenavigationscode in der CodeBehind-Datei jeder Seite duplizieren. Um Duplizierungen zu vermeiden, können Sie den navigationsbezogenen Code in der App Klasse auf der App.xaml.* Code-Behind-Seite platzieren und dann von überall in Ihrer App aufrufen, wie hier gezeigt.

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

Verwandte Artikel

• Navigationsgrundlagen
• Implementieren der grundlegenden Navigation