Navigeringshistorik och bakåtnavigering för Windows-appar

Om du vill implementera bakåtnavigering i appen placerar du en bakåtknapp i det övre vänstra hörnet i appens användargränssnitt. Användaren förväntar sig att bakåtknappen navigerar till den tidigare platsen i appens navigeringshistorik. Som standard registrerar Frame-kontrollen navigeringsåtgärder i sin BackStack och ForwardStack. Du kan dock ändra vilka navigeringsåtgärder som läggs till i navigeringshistoriken.

Bakåtknapp

Vi rekommenderar att du placerar bakåtknappen i det övre vänstra hörnet av appen. Om du anpassar namnlisten placerar du bakåtknappen i namnlisten. Mer information finns i designen av titelraden och backknappen>.

Om du använder TitleBar-kontrollen för att skapa en anpassad namnlist, använd den inbyggda bakåtknappen. Ange IsBackButtonVisible till true, ange IsBackButtonEnabled efter behov och hantera backrequested-händelsen för att navigera.

Om du vill skapa en fristående bakåtknapp använder du knappkontrollen med resursen TitleBarBackButtonStyle och placerar knappen i det övre vänstra hörnet i appens användargränssnitt (mer information finns i XAML-kodexemplen nedan).

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

Om din app har en översta Kommandorad placerar du Button kontrollen i området 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>

För att minimera UI-element som rör sig i din app visar du en inaktiverad bakåtknapp när det inte finns något i backstack (IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}"). Men om du förväntar dig att din app aldrig kommer att ha en backstack behöver du inte visa bakåtknappen alls.

Bakåtnavigering

Det här avsnittet visar kod för att hantera bakåtnavigering. Vanliga källor till en bakåtnavigeringsbegäran är händelsen TitleBar.BackRequested, händelsen NavigationView.BackRequested eller bakåtknappens Klick-händelse.

Den här exempelkoden visar hur du implementerar bakåtnavigeringsbeteende med en bakåtknapp. Koden svarar på händelsen Knappklick för att navigera.

Om du använder bakåtknappen i en NavigationView eller TitleBar -kontroll kan du placera bildrutenavigeringskoden direkt i händelsehanterarmetoden utan att behöva duplicera den för varje sida. Men om du skapar en bakåtknapp i innehållet på appsidorna måste du duplicera ramnavigeringskoden i varje sidas kodbakom-fil. För att undvika duplicering kan du placera den navigeringsrelaterade koden i App klassen på App.xaml.* sidan bakom koden och sedan anropa den var som helst i appen, som du ser här.

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

Relaterade artiklar

• Navigeringens grunder
• Implementera grundläggande navigering