Implementieren der Navigation zwischen zwei Seiten

  • Artikel

Hier erfährst du, wie du einen Frame und Seiten verwendest, um in deiner App eine einfache Peer-zu-Peer-Navigation zu ermöglichen.

Peer-to-Peer-Navigation

Fast jede App erfordert eine Navigation zwischen Seiten. Selbst eine einfache App mit einer einzelnen Inhaltsseite verfügt in der Regel über eine Einstellungsseite, die Navigation erfordert. In diesem Artikel werden die Grundlagen des Hinzufügens eines XAML Page zu Ihrer App und der Verwendung von zum Frame Navigieren zwischen Seiten erläutert.

Wichtig

Für dieses Beispiel verwenden wir die Vorlage Leere App aus Microsoft Visual Studio. Es gibt Unterschiede in den Vorlagen für Windows App SDK/WinUI 3-Apps und UWP-Apps. Achten Sie daher darauf, die richtige Registerkarte für Ihren App-Typ auszuwählen.

1. Erstellen einer leeren App

So erstellen Sie eine leere App in Visual Studio:

  1. Informationen zum Einrichten Ihres Entwicklungscomputers finden Sie unter Installieren von Tools für das Windows App SDK.
  2. Wählen Sie im Startfenster von Microsoft Visual Studio die Option Neues Projekt erstellen oder im Visual Studio-Menüdateineues>Projektaus>.
  3. Wählen Sie in den Dropdownfiltern des Dialogfelds Neues Projekt erstellen die Option C# bzw. C++, Windows bzw . WinUI aus.
  4. Wählen Sie die Projektvorlage Leere App, Gepackt (WinUI 3 in Desktop) aus, und klicken Sie auf Weiter. Diese Vorlage erstellt eine Desktop-App mit einer WinUI 3-basierten Benutzeroberfläche.
  5. Geben Sie im Feld Projektname den Namen ein BasicNavigation, und klicken Sie auf Erstellen.
  6. Klicken Sie zum Ausführen des Programms im Menü auf Debuggen>Debugging starten, oder drücken Sie F5. Sie müssen Ihre Projektmappe auf Ihrem Computer erstellen und ausführen, um zu überprüfen, ob die App fehlerfrei ausgeführt wird. Es wird eine leere Seite angezeigt.
  7. Um das Debuggen zu beenden und zu Visual Studio zurückzukehren, kannst du entweder die App beenden oder im Menü auf Debuggen beenden klicken.
  8. Entfernen Sie jeden Beispielcode, der in der Vorlage enthalten ist, aus den MainWindow.xaml CodeBehind-Dateien und MainWindow .

Tipp

Weitere Informationen finden Sie unter Erstellen Ihres ersten WinUI 3-Projekts (Windows App SDK).

2. Verwenden eines Frames zum Navigieren zwischen Seiten

Wenn Ihre App über mehrere Seiten verfügt, verwenden Sie einen Frame , um zwischen ihnen zu navigieren. Die Frame -Klasse unterstützt verschiedene Navigationsmethoden wie Navigate, GoBack und GoForward sowie Eigenschaften wie BackStack, ForwardStack und BackStackDepth.

Wenn Sie ein neues Windows App SDK-Projekt in Visual Studio erstellen, erstellt die Projektvorlage eine MainWindow Klasse (vom Typ Microsoft.UI.Xaml.Window). Es erstellt jedoch keinen Frame oder eine Seite und stellt keinen Navigationscode bereit.

Um die Navigation zwischen Seiten zu aktivieren, fügen Sie ein Frame als Stammelement von MainWindowhinzu. Sie können dies in der Überschreibung der Application.OnLaunched-Methode in der App.xaml CodeBehind-Datei tun. Öffnen Sie die App CodeBehind-Datei, aktualisieren Sie die OnLaunched Außerkraftsetzung, und behandeln Sie das NavigationFailed-Ereignis wie hier gezeigt.

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

Hinweis

Bei Apps mit komplexerer Navigation verwenden Sie in der Regel eine NavigationView als Stamm von MainWindow und platzieren einen Frame als Inhalt der Navigationsansicht. Weitere Informationen finden Sie unter Navigationsansicht.

Die Navigate-Methode wird verwendet, um Inhalte in dieser Frameanzuzeigen. MainPage.xaml Hier wird an die Navigate -Methode übergeben, sodass die -Methode in geladen MainPageFramewird.

Wenn die Navigation zum anfänglichen Fenster der App fehlschlägt, tritt ein NavigationFailed Ereignis auf, und dieser Code löst eine Ausnahme im Ereignishandler aus.

3. Hinzufügen grundlegender Seiten

Die Vorlage Leere App erstellt nicht mehrere App-Seiten für Sie. Bevor Sie zwischen Seiten navigieren können, müssen Sie Ihrer App einige Seiten hinzufügen.

So fügen Sie Ihrer App ein neues Element hinzu:

  1. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den BasicNavigation Projektknoten, um das Kontextmenü zu öffnen.
  2. Wählen Sie im KontextmenüDie Option Neues Elementhinzufügen> aus.
  3. Wählen Sie im Dialogfeld Neues Element hinzufügen im linken Bereich den Knoten WinUI und dann im mittleren Bereich Leere Seite (WinUI 3) aus.
  4. Geben Sie im Feld Name den Namen ein MainPage , und drücken Sie die Schaltfläche Hinzufügen .
  5. Wiederholen Sie die Schritte 1 bis 4, um die zweite Seite hinzuzufügen, geben Sie jedoch im Feld Name ein Page2.

Nun sollten diese Dateien als Teil Ihres BasicNavigation Projekts aufgeführt werden.

C# C++
  • MainPage.xaml
  • MainPage.xaml.cs
  • Page2.xaml
  • Page2.xaml.cs
  • MainPage.xaml
  • MainPage.xaml.cpp
  • MainPage.xaml.h
  • Page2.xaml
  • Page2.xaml.cpp
  • Page2.xaml.h

Wichtig

Bei C++-Projekten müssen Sie in der Headerdatei jeder Seite, die auf eine andere Seite verweist, eine #include -Direktive hinzufügen. Für das hier gezeigte Beispiel für die seitenübergreifende Navigation enthält #include "Page2.xaml.h"die Datei mainpage.xaml.h wiederum page2.xaml.h #include "MainPage.xaml.h".

C++-Seitenvorlagen enthalten auch einen Beispiel Button - und Klickhandlercode, den Sie aus den XAML- und CodeBehind-Dateien für die Seite entfernen müssen.

Hinzufügen von Inhalten zu den Seiten

Ersetzen MainPage.xamlSie in den vorhandenen Seiteninhalt durch den folgenden Inhalt:

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

Dieser XAML-Code fügt Folgendes hinzu:

Fügen Sie in der MainPage CodeBehind-Datei den folgenden Code hinzu, um das Click Ereignis des HyperlinkButton-Elements zu behandeln, das Sie hinzugefügt haben, um die Navigation zu aktivieren 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 ist eine Unterklasse der Page-Klasse. Die Page -Klasse verfügt über eine schreibgeschützte Frame-Eigenschaft , die die abruft, die Frame den Pageenthält. Wenn der Click Ereignishandler von in MainPageHyperlinkButton aufruftFrame.Navigate(typeof(Page2)), zeigt den Frame Inhalt von Page2.xamlan.

Wenn eine Seite in den Frame geladen wird, wird diese Seite als PageStackEntry zum BackStack oder ForwardStack des Frame hinzugefügt, sodass verlaufs- und rückwärtsnavigation möglich ist.

Führen Sie nun die gleichen Schritte in aus Page2.xaml. Ersetzen Sie den vorhandenen Seiteninhalt durch den folgenden Inhalt:

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

Fügen Sie in der Page2 CodeBehind-Datei den folgenden Code hinzu, um das Click Ereignis des HyperlinkButton-Elements zu behandeln, um zu zu navigieren 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>());
}

Erstellen Sie die App, und führen Sie sie aus. Klicken Sie auf den Link „Click to go to page 2“. Die zweite Seite mit der Bezeichnung „Seite 2“ wird geladen und im Frame angezeigt. Klicken Sie nun auf den Link auf Seite 2, um zur Hauptseite zurückzukehren.

4. Übergeben von Informationen zwischen Seiten

Ihre App navigiert jetzt zwischen zwei Seiten, aber sie macht noch nichts Interessantes. Bei vielen Apps mit mehreren Seiten müssen die Seiten Informationen freigeben. Nun übergeben Sie einige Informationen von der ersten Seite an die zweite Seite.

Ersetzen MainPage.xamlSie in das HyperlinkButton zuvor hinzugefügte durch das folgende StackPanel. Dadurch werden eine TextBlock-Bezeichnung und ein TextBox-Elementname zum Eingeben einer Textzeichenfolge hinzugefügt.

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

Nun verwenden Sie die zweite Überladung der Navigate -Methode und übergeben den Text aus dem Textfeld als zweiten Parameter. Dies ist die Signatur dieser Navigate Überladung:

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

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

Fügen Sie im Ereignishandler der MainPage CodeBehind-Datei der -Methode einen zweiten Parameter hinzu, der Navigate auf die Text Eigenschaft des name Textfelds verweist.HyperlinkButton_Click

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

Ersetzen Page2.xamlSie in den HyperlinkButton zuvor hinzugefügten durch den folgenden StackPanel. Dadurch wird ein TextBlock hinzugefügt, um die von MainPageübergebene Textzeichenfolge anzuzeigen.

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

Fügen Sie in der Page2 CodeBehind-Datei den folgenden Code hinzu, um die OnNavigatedTo -Methode zu überschreiben:

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

Führen Sie die App aus, geben Sie Ihren Namen in das Textfeld ein, und klicken Sie dann auf den Link, der besagt Click to go to page 2.

Wenn das Click Ereignis von HyperlinkButton in MainPage aufruft Frame.Navigate(typeof(Page2), name.Text), wird die name.Text -Eigenschaft an Page2übergeben, und der Wert aus den Ereignisdaten wird für die auf der Seite angezeigte Meldung verwendet.

5. Zwischenspeichern einer Seite

Seiteninhalt und -zustand werden standardmäßig nicht zwischengespeichert. Wenn du also Informationen zwischenspeichern möchtest, musst du dies auf jeder Seite deiner App aktivieren.

Wenn Sie in unserem einfachen Peer-to-Peer-Beispiel auf den Click to go to page 1 Link klicken, wird das TextBox (und jedes andere Feld) auf MainPage den Standardzustand festgelegt.Page2 Eine Möglichkeit zur Umgehung dieses Problems ist die Verwendung der NavigationCacheMode-Eigenschaft, um anzugeben, dass eine Seite zum Seitencache des Frames hinzugefügt werden soll.

Standardmäßig wird bei jeder Navigation eine neue Seite instance mit ihren Standardwerten erstellt. Legen MainPage.xamlSie NavigationCacheMode in (im öffnenden Page Tag) fest Enabled , um die Seite zwischenzuspeichern und alle Inhalts- und Zustandswerte für die Seite beizubehalten, bis der Seitencache für den Frame überschritten wird. Lege NavigationCacheMode auf Required fest, wenn du CacheSize-Limits ignorieren möchtest. (Diese Limits geben die Anzahl von Seiten an, die im Navigationsverlauf für den Frame zwischengespeichert werden können.) Die Beschränkung der Cachegröße kann allerdings je nach Arbeitsspeichergröße eines Geräts äußerst wichtig sein.

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

Wenn Sie nun auf Standard Seite klicken, ist der name, den Sie in das Textfeld eingegeben haben, weiterhin vorhanden.

6. Anpassen von Seitenübergangsanimationen

Standardmäßig wird jede Seite im Rahmen animiert, wenn die Navigation erfolgt. Die Standardanimation ist eine "Eingangsanimation", die dazu führt, dass die Seite vom unteren Fensterrand nach oben gleitet. Sie können jedoch verschiedene Animationsoptionen auswählen, die besser zur Navigation Ihrer App passen. Sie können beispielsweise eine Drill-in-Animation verwenden, um das Gefühl zu vermitteln, dass der Benutzer tiefer in Ihre App eingeht, oder eine horizontale Folienanimation, um das Gefühl zu vermitteln, dass zwei Seiten Peers sind. Weitere Informationen finden Sie unter Seitenübergänge.

Diese Animationen werden durch Unterklassen von NavigationTransitionInfo dargestellt. Um die Animation anzugeben, die für einen Seitenübergang verwendet werden soll, verwenden Sie die dritte Überladung der Navigate Methode und übergeben eine NavigationTransitionInfo Unterklasse als dritten Parameter (infoOverride). Dies ist die Signatur dieser Navigate Überladung:

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

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

Fügen Sie im HyperlinkButton_Click Ereignishandler der MainPage CodeBehind-Datei der -Methode einen dritten Parameter hinzu, die Navigate den infoOverride Parameter auf eine SlideNavigationTransitionInfo festlegt, wobei die Effect-Eigenschaft auf FromRight festgelegt ist.

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

Legen Sie im HyperlinkButton_Click Ereignishandler der Page2 CodeBehind-Datei den infoOverride Parameter auf slideNavigationTransitionInfo fest, wobei die Effect-Eigenschaft auf FromLeft festgelegt ist.

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

Wenn Sie nun zwischen Seiten navigieren, werden die Seiten nach links und rechts geschoben, was ein natürlicheres Gefühl für diesen Übergang bietet und die Verbindung zwischen den Seiten verstärkt.