Implementera navigering mellan två sidor

Lär dig hur du använder en ram och sidor för att aktivera grundläggande peer-to-peer-navigering i din app.

Nästan alla appar kräver navigering mellan sidor. Även en enkel app med en enda innehållssida har vanligtvis en inställningssida som kräver navigering. I den här artikeln går vi igenom grunderna för att lägga till en XAML Page i din app och använda en Frame för att navigera mellan sidor.

1. Skapa en tom app

Så här skapar du en tom app i Visual Studio:

1. Information om hur du konfigurerar utvecklingsdatorn finns i Börja utveckla Windows-appar.
2. I Microsoft Visual Studio-startfönstret väljer du Skapa ett nytt projekt, ELLER, på Visual Studio-menyn väljer du Arkiv>nytt>projekt.
3. I dialogrutan Skapa ett nytt projekt väljer du i listrutorna C# eller C++, Windowsoch WinUI.
4. Välj Tom app, Paketerad (WinUI 3 i Desktop) projektmall och klicka på Nästa. Mallen skapar en skrivbordsapp med ett WinUI 3-baserat användargränssnitt.
5. I rutan Projektnamn anger du BasicNavigationoch klickar på Skapa.
6. Om du vill köra programmet väljer du Felsöka>Starta felsökning på menyn eller trycker på F5. Skapa och kör din lösning på utvecklingsdatorn för att bekräfta att appen körs utan fel. En tom sida visas.
7. Om du vill sluta felsöka och återgå till Visual Studio avslutar du appen eller klickar på Stoppa felsökning från menyn.
8. Ta bort eventuell exempelkod som ingår i mallen från MainWindow.xaml och MainWindow kod-bakomsfiler.

2. Använd en ram för att navigera mellan sidor

När appen har flera sidor använder du en ram för att navigera mellan dem. Klassen Frame stöder olika navigeringsmetoder som Navigate, GoBack och GoForward och egenskaper som BackStack, ForwardStack och BackStackDepth.

När du skapar ett nytt Windows App SDK-projekt i Visual Studio skapar projektmallen en MainWindow klass (av typen Microsoft.UI.Xaml.Window). Den skapar dock ingen ram eller sida och tillhandahåller ingen navigeringskod.

Om du vill aktivera navigering mellan sidor lägger du till en Frame som rotelement i MainWindow. Du kan göra det i Application.OnLaunched-metod åsidosättning i App.xaml kod bakom-filen. Öppna filen App code-behind, uppdatera åsidosättningen av OnLaunched och hantera händelsen NavigationFailed som visas här.

// App.xaml.cs

protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
{
    m_window = new MainWindow();

    // Create a Frame to act as the navigation context and navigate to the first page
    Frame rootFrame = new Frame();
    rootFrame.NavigationFailed += OnNavigationFailed;
    // Navigate to the first page, configuring the new page
    // by passing required information as a navigation parameter
    rootFrame.Navigate(typeof(MainPage), args.Arguments);

    // Place the frame in the current Window
    m_window.Content = rootFrame;
    // Ensure the MainWindow is active
    m_window.Activate();
}

void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
{
    throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
}

// App.xaml.h

// Add after OnLaunched declaration.
void OnNavigationFailed(IInspectable const&, Microsoft::UI::Xaml::Navigation::NavigationFailedEventArgs const&);

///////////////
// App.xaml.cpp

void App::OnLaunched(LaunchActivatedEventArgs const& e)
{
    window = make<MainWindow>();
    Frame rootFrame = Frame();
    rootFrame.NavigationFailed({ this, &App::OnNavigationFailed });
    rootFrame.Navigate(xaml_typename<BasicNavigation::MainPage>(), box_value(e.Arguments()));
    window.Content(rootFrame);
    window.Activate();
}

void App::OnNavigationFailed(IInspectable const&, NavigationFailedEventArgs const& e)
{
    throw hresult_error(E_FAIL, hstring(L"Failed to load Page ") + e.SourcePageType().Name);
}

Metoden Navigate används för att visa innehåll i den här Frame. MainPage.xaml skickas till Navigate-metoden, så metoden laddar MainPage i Frame.

Om navigeringen till appens första fönster misslyckas inträffar en NavigationFailed händelse och den här koden utlöser ett undantag i händelsehanteraren.

3. Lägg till grundläggande sidor

Mall Blank App skapar inte flera app-sidor åt dig. Innan du kan navigera mellan sidor måste du lägga till några sidor i din app.

Så här lägger du till ett nytt objekt i din app:

1. I Solution Explorer högerklickar du på projektnoden BasicNavigation för att öppna snabbmenyn.
2. Välj Lägg till>nytt objekt på snabbmenyn.
3. I dialogrutan Lägg till nytt objekt väljer du noden WinUI i den vänstra rutan och väljer sedan Tom sida (WinUI 3) i mittenfönstret.
4. I rutan Namn anger du MainPage och trycker på knappen Lägg till .
5. Upprepa steg 1–4 för att lägga till den andra sidan, men i rutan Namn anger du Page2.

Nu bör dessa filer visas som en del av projektet BasicNavigation .

Lägga till innehåll på sidorna

I MainPage.xamlersätter du det befintliga sidinnehållet med följande innehåll:

<Grid>
    <TextBlock x:Name="pageTitle" Text="Main Page"
               Margin="16" Style="{StaticResource TitleTextBlockStyle}"/>
    <HyperlinkButton Content="Click to go to page 2"
                     Click="HyperlinkButton_Click"
                     HorizontalAlignment="Center"/>
</Grid>

Denna XAML lägger till:

• Ett TextBlock-element med namnet pageTitle med egenskapen Text inställt på Main Page som ett underordnat element i rotrutnätet.
• Ett HyperlänkButton--element som används för att navigera till nästa sida som ett underordnat element i roten Grid.

I filen MainPage code-behind lägger du till följande kod för att hantera Click händelsen för HyperlänkButton du lade till för att aktivera navigering till Page2.xaml.

// MainPage.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(Page2));
}

// pch.h
// Add this include in pch.h to support winrt::xaml_typename

#include <winrt/Windows.UI.Xaml.Interop.h>

////////////////////
// MainPage.xaml.h

void HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e);

////////////////////
// MainPage.xaml.cpp

void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::Page2>());
}

MainPage är en underklass till klassen Page . Klassen Page har en skrivskyddad Frame-egenskap som hämtar den Frame som innehåller Page. Click När händelsehanteraren för HyperlinkButton i MainPage anropar Frame.Navigate(typeof(Page2)), Frame visar innehållet i Page2.xaml.

När en sida läses in i ram läggs den sidan till som en PageStackEntry till BackStack eller ForwardStack i Frame, vilket möjliggör historik och navigering bakåt.

Gör nu samma sak i Page2.xaml. Ersätt det befintliga sidinnehållet med följande innehåll:

<Grid>
    <TextBlock x:Name="pageTitle" Text="Page 2"
               Margin="16" Style="{StaticResource TitleTextBlockStyle}"/>
    <HyperlinkButton Content="Click to go to main page"
                     Click="HyperlinkButton_Click"
                     HorizontalAlignment="Center"/>
</Grid>

I filen Page2 code-behind lägger du till följande kod för att hantera Click händelse för HyperlinkButton för att navigera till MainPage.xaml.

// Page2.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(MainPage));
}

// Page2.xaml.h

void HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e);

/////////////////
// Page2.xaml.cpp

void winrt::BasicNavigation::implementation::Page2::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::MainPage>());
}

Skapa och kör appen. Klicka på länken med texten "Klicka för att gå till sidan 2". Den andra sidan med texten "Sida 2" längst upp ska läsas in och visas i ramen. Klicka nu på länken på sida 2 för att gå tillbaka till huvudsidan.

4. Skicka information mellan sidor

Appen navigerar nu mellan två sidor, men den gör egentligen inget intressant ännu. När en app har flera sidor måste sidorna ofta dela information. Nu ska du skicka lite information från den första sidan till den andra sidan.

I MainPage.xamlersätter du det HyperlinkButton du lade till tidigare med följande StackPanel. Detta lägger till en TextBlock-etikett och en textrutaname för att ange en textsträng.

<StackPanel VerticalAlignment="Center">
    <TextBlock HorizontalAlignment="Center" Text="Enter your name"/>
    <TextBox HorizontalAlignment="Center" Width="200" x:Name="name"/>
    <HyperlinkButton Content="Click to go to page 2"
                              Click="HyperlinkButton_Click"
                              HorizontalAlignment="Center"/>
</StackPanel>

Nu ska du använda den andra överlagringen av metoden Navigate och skicka texten från textrutan som den andra parametern. Här är signaturen för den här Navigate överbelastningen:

public bool Navigate(System.Type sourcePageType, object parameter);

bool Navigate(TypeName const& sourcePageType, IInspectable const& parameter);

I HyperlinkButton_Click händelsehanteraren i MainPage-filen code-behind lägger du till en andra parameter till metoden Navigate som refererar till Text-egenskapen för textrutan name.

// MainPage.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(Page2), name.Text);
}

// MainPage.xaml.cpp

void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{ 
    Frame().Navigate(xaml_typename<BasicNavigation::Page2>(), winrt::box_value(name().Text()));
}

I Page2.xamlersätter du det HyperlinkButton du lade till tidigare med följande StackPanel. Detta lägger till en TextBlock för att visa textsträngen som skickas från MainPage.

<StackPanel VerticalAlignment="Center">
    <TextBlock HorizontalAlignment="Center" x:Name="greeting"/>
    <HyperlinkButton Content="Click to go to page 1"
                     Click="HyperlinkButton_Click"
                     HorizontalAlignment="Center"/>
</StackPanel>

I filen Page2 code-behind lägger du till följande kod för att åsidosätta OnNavigatedTo metoden:

// Page2.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (e.Parameter is string && !string.IsNullOrWhiteSpace((string)e.Parameter))
    {
        greeting.Text = $"Hello, {e.Parameter.ToString()}";
    }
    else
    {
        greeting.Text = "Hello!";
    }
    base.OnNavigatedTo(e);
}

// Page2.xaml.h

void Page2::OnNavigatedTo(Microsoft::UI::Xaml::Navigation::NavigationEventArgs const& e)
{
	auto propertyValue{ e.Parameter().as<Windows::Foundation::IPropertyValue>() };
	if (propertyValue.Type() == Windows::Foundation::PropertyType::String)
	{
		auto name{ winrt::unbox_value<winrt::hstring>(e.Parameter()) };
		if (!name.empty())
		{
			greeting().Text(L"Hello, " + name);
			__super::OnNavigatedTo(e);
			return;
		}
	}
	greeting().Text(L"Hello!");
	__super::OnNavigatedTo(e);
}

Kör appen, skriv ditt namn i textrutan och klicka sedan på länken som säger Click to go to page 2.

När händelsen Click i HyperlinkButton anropar MainPage, skickas egenskapen Frame.Navigate(typeof(Page2), name.Text) till name.Text, och värdet från händelsedata används för meddelandet som visas på sidan.

5. Cacha en sida

Sidinnehåll och status cachelagras inte som standard, så om du vill cachelagras information måste du aktivera det på varje sida i appen.

I vårt grundläggande peer-to-peer-exempel, när du klickar på länken Click to go to page 1 på Page2, anges TextBox (och alla andra fält) på MainPage till standardtillståndet. Ett sätt att kringgå detta är att använda egenskapen NavigationCacheMode för att ange att en sida ska läggas till i ramens sidcache.

Som standard skapas en ny sidinstans med standardvärdena varje gång navigeringen sker. I MainPage.xamlställer du in NavigationCacheMode till Enabled (i den inledande Page-taggen) för att lagra sidan i cache och behålla sidans innehåll och tillstånd tills ramens sidcache har överskridits. Ange NavigationCacheMode till Obligatoriskt om du vill ignorera CacheSize-gränser , som anger antalet sidor i navigeringshistoriken som kan cachelagras för ramen. Tänk dock på att storleksbegränsningar för cacheminnet kan vara avgörande, beroende på enhetens minnesgränser.

<Page
    x:Class="BasicNavigation.MainPage"
    ...
    mc:Ignorable="d"
    NavigationCacheMode="Enabled">

När du klickar tillbaka till huvudsidan finns det namn som du angav i textrutan kvar.

6. Anpassa animeringar för sidövergång

Som standard animerads varje sida i ramen när navigeringen sker. Standardanimeringen är en "ingångsanimering" som gör att sidan skjuts upp från botten av fönstret. Du kan dock välja olika animeringsalternativ som passar bättre för navigeringen i din app. Du kan till exempel använda en "drill in"-animering för att ge en känsla av att användaren går djupare in i din app eller en vågrät bildanimering för att ge känslan av att två sidor är peer-sidor. Mer information finns i Sidövergångar.

Dessa animeringar representeras av underklasser av NavigationTransitionInfo. Om du vill ange den animering som ska användas för en sidövergång använder du den tredje överlagringen Navigate av metoden och skickar en NavigationTransitionInfo underklass som den tredje parametern (infoOverride). Här är signaturen för den här Navigate överbelastningen:

public bool Navigate(System.Type sourcePageType, 
                     object parameter,
                     NavigationTransitionInfo infoOverride);

bool Navigate(TypeName const& sourcePageType, 
              IInspectable const& parameter, 
              NavigationTransitionInfo const& infoOverride);

I HyperlinkButton_Click-händelsehanteraren för MainPage code-behind-fil lägger du till en tredje parameter i metoden Navigate som ställer in parametern infoOverride till en SlideNavigationTransitionInfo- med egenskapen Effect ställd på FromRight.

// MainPage.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(Page2), 
                   name.Text,
                   new SlideNavigationTransitionInfo() 
                       { Effect = SlideNavigationTransitionEffect.FromRight});
}

// pch.h

#include <winrt/Microsoft.UI.Xaml.Media.Animation.h>

////////////////////
// MainPage.xaml.cpp

using namespace winrt::Microsoft::UI::Xaml::Media::Animation;

// ...

void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{   
    // Create the slide transition and set the transition effect to FromRight.
    SlideNavigationTransitionInfo slideEffect = SlideNavigationTransitionInfo();
    slideEffect.Effect(SlideNavigationTransitionEffect(SlideNavigationTransitionEffect::FromRight));
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::Page2>(),
        		     winrt::box_value(name().Text()),
                     slideEffect);
}

I HyperlinkButton_Click händelsehanteraren för filen Page2 code-behind anger du parametern infoOverride till en SlideNavigationTransitionInfo- med egenskapen Effect inställd på FromLeft.

// Page2.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(MainPage),
                   null,
                   new SlideNavigationTransitionInfo() 
                       { Effect = SlideNavigationTransitionEffect.FromLeft});
}

// Page2.xaml.cpp

using namespace winrt::Microsoft::UI::Xaml::Media::Animation;

// ...

void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{   
    // Create the slide transition and set the transition effect to FromLeft.
    SlideNavigationTransitionInfo slideEffect = SlideNavigationTransitionInfo();
    slideEffect.Effect(SlideNavigationTransitionEffect(SlideNavigationTransitionEffect::FromLeft));
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::MainPage>(),
        		     nullptr,
                     slideEffect);
}

Nu, när du navigerar mellan sidor, skjuter sidorna åt vänster och höger, vilket ger en mer naturlig känsla för den här övergången och förstärker anslutningen mellan sidorna.

Relaterade artiklar

• Grundläggande navigeringsdesign för Windows-appar
• navigeringsvy
• Navigeringshistorik och bakåtriktad navigering