Schnellstart: Navigation zwischen Seiten (Windows Store-Apps mit C#/VB/C++ und XAML)

In diesem Thema werden grundlegende Navigationskonzepte sowie das Erstellen von Apps erläutert, die zwischen zwei Seiten navigieren.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Siehe:

Sie können mehrere Seiten für Ihre Windows Store-App erstellen und Unterstützung für die Navigation mehrerer Benutzer zwischen den Seiten in die App integrieren, so wie sie zwischen den Seiten einer Website navigieren. Microsoft Visual Studio enthält Seitenvorlagen, die grundlegende Navigationsunterstützung für Windows Store-Apps mit C# oder Microsoft Visual Basic bieten. In diesem Thema verwenden wir die Seitenvorlagen, um eine einfache App mit Navigationsunterstützung zu erstellen.

Hinweis  

Navigation für Windows Store-Apps bezieht sich hier nicht auf die Navigation zwischen Apps, sondern auf das Navigieren zwischen Seiten innerhalb einer App.

Voraussetzungen

In diesem Thema wird davon ausgegangen, dass Sie eine einfache Windows Store-App mit C# oder Visual Basic erstellen können. Anweisungen zum Erstellen Ihrer ersten Windows Store-App finden Sie unter Erstellen Ihrer ersten Windows Store-App mit C# oder Visual Basic.

Erstellen der Navigations-App

Hh771188.wedge(de-de,WIN.10).gifErstellen der leeren App

  1. Klicken Sie im Visual Studio-Menü auf Datei > Neues Projekt.
  2. Erweitern Sie im linken Bereich des Dialogfelds Neues Projekt den Knoten Visual C#, Visual Basic oder Visual C++.
  3. Wählen Sie im mittleren Bereich die Option Leere App aus.
  4. Geben Sie BlankApp in das Feld Name ein, und klicken Sie anschließend auf OK.

    Die Projektmappe wird erstellt, und die Projektdateien werden im Projektmappen-Explorer angezeigt. Ausführlichere Informationen zu den Projektdateien finden Sie unter C#-, VB- und C++-Projektvorlagen für Windows Store-Apps.

    Wichtig  Wenn Sie Visual Studio zum ersten Mal ausführen, werden Sie auf die Entwicklerlizenz hingewiesen. Weitere Informationen finden Sie unter Anfordern einer Entwicklerlizenz.

  5. Klicken Sie zum Ausführen der App im Visual Studio-Menü auf Debuggen > Debugging starten, oder drücken Sie F5.

    Es wird eine leere Seite angezeigt.

  6. Drücken Sie UMSCHALT+F5, um das Debuggen zu beenden und zu Visual Studio zurückzukehren.

Fügen Sie im nächsten Schritt zwei Seiten zum Projekt hinzu. Dies sind die Seiten, zwischen denen wir navigieren. Fügen Sie die folgenden Schritte zweimal aus, um zwei Seiten hinzuzufügen.

Hh771188.wedge(de-de,WIN.10).gifHinzufügen der Standardseite

  1. Öffnen Sie im Projektmappen-Explorer das Kontextmenü für den Projektknoten BlankApp, und klicken Sie dann auf Hinzufügen > Neues Element.
  2. Wählen Sie im Dialogfeld Neues Element hinzufügen im mittleren Bereich die Option Leere Seite aus.
  3. Geben Sie page1 (oder page2) in das Feld Name ein, und klicken Sie anschließend auf Hinzufügen.

Nachdem Sie die vorherigen Schritte zweimal ausgeführt haben, sollten die folgenden Dateien zu Ihrem Projekt hinzugefügt sein.

  • BasicPage1.xaml
  • BasicPage1.xaml.cs oder BasicPage1.xaml.vb
  • BasicPage2.xaml
  • BasicPage2.xaml.cs oder BasicPage2.xaml.vb

Nun müssen wir die hinzugefügten Seiten in der App verwenden. Nehmen Sie die folgenden Änderungen an BasicPage1.xaml vor.

  • Suchen Sie das TextBlock-Element mit dem Namen pageTitle, und ändern Sie die Text-Eigenschaft in Page 1. Das XAML sollte nun wie folgt aussehen ("..." steht für andere nicht geänderte Attribute):

    
    
    <TextBlock x:Name="pageTitle" Text="Page 1" .../>
    
    
  • Fügen Sie das folgende XAML als zweites untergeordnetes Element dem Stamm-Grid hinzu. Das StackPanel-Element sollte ein gleichgeordnetes Element des Grid-Elements sein, das die Schaltfläche "Zurück" und den Seitentitel enthält.

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
    </StackPanel>
    
    

Nehmen Sie die folgenden Änderungen an BasicPage2.xaml vor.

  • Suchen Sie das TextBlock-Element mit dem Namen pageTitle, und ändern Sie die Text-Eigenschaft in Page 2. Das XAML sieht so aus:

    
    
    <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 2" 
               Style="{StaticResource PageHeaderTextStyle}"/>
    
    
  • Fügen Sie das folgende XAML als zweites untergeordnetes Element dem Stamm-Grid hinzu. Das StackPanel-Element sollte ein gleichgeordnetes Element des Grid-Elements sein, das die Schaltfläche "Zurück" und den Seitentitel enthält.

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <TextBlock HorizontalAlignment="Left" Name="tb1" Text="Hello World!"/>
    </StackPanel>
    
    

Fügen Sie der BasicPage1-Klasse in BasicPage1.xaml.cs oder BasicPage1.xaml.vb den folgenden Code hinzu.


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

Da wir die neuen Seiten nun vorbereitet haben, müssen wir BasicPage1 zum ersten angezeigten Element beim Starten der App machen. Öffnen Sie app.xaml.cs/vb, und ändern Sie die OnLaunched-Methode so, dass Frame.Navigate unter Verwendung von BasicPage1 statt BlankPage aufgerufen wird. Die entsprechende Zeile im Code sieht folgendermaßen aus:



    if(!rootFrame.Navigate(typeof(BasicPage1), e.Arguments))
    { ... }

Hinweis  In diesem Beispielcode wird der Rückgabewert von Navigate verwendet, um eine App-Ausnahme auszulösen, wenn die Navigation zum ersten Fenster-Frame der App fehlschlägt. Wenn Navigate den Wert true zurückgibt, findet die Navigation statt.

Jetzt können Sie die App testen. Starten Sie die App, und klicken Sie auf den Link Click to go to page 2. Auf der anschließend angezeigten zweiten Seite sollte oben "Page 2" aufgeführt sein. Beachten Sie, dass sich links neben dem Seitentitel eine Zurück-Schaltfläche befindet. Klicken Sie auf die Schaltfläche, um zur ersten Seite zurückzukehren.

Die Frame-Klasse und Page-Klasse

Bevor wir der App weitere Funktionen hinzufügen, betrachten wir zunächst, inwiefern die hinzugefügten Seiten Navigationsunterstützung für die App bereitstellen.

Mithilfe der Datei "App.xaml.cs/vb/cpp" wird ein Frame erstellt (sofern noch kein Frame vorhanden ist). Zudem wird der Frame zum Inhalt des aktuellen Fensters. Wenn der Inhalt des Frames null ist, navigiert die App zur Startseite, wie im CodeBehind für App.xaml angegeben. In der Raster-App lautet der Code beispielsweise rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups") ).

Für die Navigation ist primär die Frame-Klasse verantwortlich. Sie implementiert Methoden wie Navigate, GoBack und GoForward. Mit der Navigate-Methode wird Inhalt im Frame angezeigt. Im vorherigen Beispiel wird durch die App.OnLaunched-Methode ein Rahmen erstellt und BasicPage1 an die Navigate-Methode übergeben. Die Methode legt anschließend den Inhalt des aktuellen Fensters der App auf den Frame fest. Dies hat zum Ergebnis, dass das Fenster der App einen Frame mit BasicPage1 enthält.

BasicPage1 ist eine Unterklasse der Page-Klasse. Die Page-Klasse hat eine Frame-Eigenschaft, eine schreibgeschützte Eigenschaft, die den Frame mit der Page abruft. Wenn der Click-Ereignishandler der HyperlinkButtonFrame.Navigate(typeof(BasicPage2)) aufruft, wird im Frame des App-Fensters der Inhalt von BasicPage2 angezeigt.

Anhalte-Manager

Während des Setups registriert SuspensionManager den Frame. SuspensionManager ist eine Hilfsklasse, die im Ordner "Allgemein" der Vorlage für die Raster-App oder die geteilte App bereitgestellt wird. Sie enthält die Implementierung, mit deren Hilfe der Zustand beim Beenden der App gespeichert und geladen wird.

Alle Apps durchlaufen einen Anwendungslebenszyklus, der vom Betriebssystem vorgegeben wird. Bei jedem Beenden einer App durch das System aufgrund von Ressourcenbeschränkungen, Abschaltungen, Neustarts usw. müssen Sie als Entwickler beim Fortsetzen der App die Daten wiederherstellen. SuspensionManager soll Sie bei dieser Aufgabe unterstützen.

SuspensionManager erfasst den globalen Sitzungszustand, um die Verwaltung der Prozesslebensdauer für eine Anwendung zu vereinfachen. Der Sitzungszustand wird unter einer Reihe von Umständen automatisch gelöscht und sollte nur zum Speichern von Informationen verwendet werden, die aus praktischen Gründen zwar sitzungsübergreifend beibehalten, jedoch bei einem Absturz oder Upgrade einer Anwendung verworfen werden sollten. Dazu zählen hauptsächlich vorübergehende UI-Daten.

SuspensionManager hat zwei Eigenschaften: SessionState und KnownTypes.

  • SessionState bietet Zugriff auf den globalen Sitzungszustand für die aktuelle Sitzung. Dieser Zustand wird mithilfe der SaveAsync-Methode serialisiert und durch die RestoreAsync-Methode wiederhergestellt. Alle Daten werden mit DataContractSerialization gespeichert und wiederhergestellt, und sie sollten möglichst kompakt sein. Die Verwendung von Zeichenfolgen oder anderen eigenständigen Datentypen wird dringend empfohlen.
  • Mit KnownTypes wird eine Liste benutzerdefinierter Typen gespeichert, die für DataContractSerializer bereitgestellt wird. DataContractSerializer wird von den SaveAsync- und RestoreAsync-Methoden beim Lesen und Schreiben des Sitzungszustands verwendet. Zur Anpassung des Serialisierungsprozesses können weitere Typen hinzugefügt werden, die anfangs leer sind.

SuspensionManager speichert den Zustand in einem Wörterbuch, SessionState. Das Wörterbuch speichert FrameState in Abhängigkeit von einem Schlüssel, der eindeutig an einen Frame gebunden ist. Jedes FrameState-Wörterbuch enthält den Zustand für die einzelnen Seiten im Navigationszustand für den jeweiligen Frame. Jede Seite speichert den Navigationsparameter sowie alle anderen Zustände, für deren Hinzufügung sich der Benutzer entscheidet.

Dies funktioniert wie folgt: wenn ein Frame erstellt wird und Sie den Zustand für diesen Frame speichern möchten, muss er umgehend registriert werden. Frames werden mithilfe des folgenden Aufrufs registriert: (SuspensionManager.RegisterFrame(rootFrame, "AppFrame")). Jedem Frame muss ein eindeutiger Schlüssel zugeordnet sein. Generell weisen die meisten Apps nur einen einzelnen Frame auf. Wenn Sie einen zweiten Frame deklarieren, muss dieser ebenfalls registriert werden. Beim Registrieren eines Frames werden zwei angefügte Eigenschaften für den Frame festgelegt. Bei der ersten Eigenschaft handelt es sich um den Schlüssel, den Sie dem Frame zugeordnet haben. Die zweite Eigenschaft ist das Wörterbuch mit dem Sitzungszustand, der dem Frame zugeordnet wird. Für zuvor registrierte Frames werden die Navigation und der Zustand sofort wiederhergestellt. Die Registrierung von Frames kann auch aufgehoben werden. Dabei werden der gesamte Navigationszustand und der gesamte Verlauf verworfen.

Kommen wir nun zu den wichtigen Aufrufen: SaveAsync und RestoreAsync. SaveAsync wird zum Speichern der gesamten SessionState-Eigenschaft verwendet. Alle per SuspensionManager.RegisterFrame registrierten Apps behalten ebenfalls den aktuellen Navigationsstapel bei, der wiederum der zugehörigen aktiven Seite das Speichern der darauf enthaltenen Daten ermöglicht. Die SessionState-Eigenschaft wird dann mit einem DataContractSerializer serialisiert und in eine Datei geschrieben, die gemäß ApplicationData-Definition im lokalen Ordner gespeichert wird.

Die RestoreAsync-Methode wird zum Lesen des zuvor gespeicherten SessionState-Objekts verwendet. Alle für RegisterFrame registrierten Apps stellen ebenfalls den vorherigen Navigationszustand wieder her, der der zugehörigen aktiven Seite das Wiederherstellen ihres Zustands ermöglicht. Auch hier wird, wie bei der SaveAsync-Methode, ein DataContractSerializer zum Deserialisieren des Zustands verwendet, der in einer Datei im lokalen Ordner der Anwendung gespeichert ist.

Es gibt zwei häufige Fehler, die beim Speicherversuch des App-Zustands durch den Benutzer auftreten können.

  • Die von den einzelnen Seiten gespeicherten Typen müssen vom DataContractSerializer in C# und VB serialisiert werden können. Dazu muss ein beliebiger benutzerdefinierter Typ registriert werden, bevor eine Speicherung oder Wiederherstellung möglich ist. SuspensionManager enthält die KnownTypes-Auflistung, mit deren Hilfe die Typen in der Auflistung an den DataContractSerializer übergeben werden. Beim SuspensionManager-Aufruf zum Wiederherstellen des Zustands in der OnLaunched-Überschreibung des CodeBehind für App.xaml eignet sich der App-Konstruktor besonders gut zum Registrieren der Typen.
    
            public App()
            {
                this.InitializeComponent();
                this.Suspending += OnSuspending;
                SuspensionManager.KnownTypes.Add(typeof(MyCustomType));
            }
    
    
    
  • Die bei der Verwendung der Navigation übergebenen Parameter müssen von der Plattform serialisiert werden können. Beim Speichern und Wiederherstellen des Navigationsstapels rufen wir Frame.GetNavigationState() und Frame.SetNavigationState() auf. Für beide dieser Aufrufe wird ein internes Serialisierungsformat verwendet, und alle als Parameter in Frame.Navigate() übergebenen Typen müssen von der Plattform serialisiert werden können.
Die Verwendung von SuspensionManager wird in die Implementierung von NavigationHelper eingeschlossen.

NavigationHelper ist eine Implementierung einer Seite, die die folgenden bedeutenden Annehmlichkeiten bietet:

  • Ereignishandler für Navigate, GoBack und GoForward.
  • Maus- und Tastenkombinationen für die Navigation.
  • Zustandsverwaltung für die Navigation und Verwaltung der Prozesslebensdauer.

Zusätzlich zur Bereitstellung der beschriebenen Implementierungen muss NavigationHelper auch von den Ereignishandlern OnNavigatedTo() und OnNavigatedFrom() aufgerufen werden, die auf den einzelnen Seiten implementiert sind. Wenn diese Ereignisse auftreten, wird von NavigationHelper eine seitenspezifische Implementierung von LoadState() und SaveState() aufgerufen. Sie können die Implementierung dieser Funktionen auf jeder Seite anpassen. Sie sollten anstelle von OnNavigatedTo() bzw. OnNavigatedFrom() verwendet werden.

OnNavigatedFrom() wird aufgerufen, wenn die Seite in einem Frame angezeigt werden soll. Beim Navigieren zu einer neuen Seite wird der mit der Seite verknüpfte Zustand geladen. Beim Wiederherstellen der Seite wird der zuvor gespeicherte Zustand der Seite wiederhergestellt. Anschließend wird die LoadState-Methode aufgerufen, sodass die einzelnen Seiten reagieren können. LoadState umfasst zwei Parameter – den ursprünglichen Navigationsparameter, der an OnNavigatedTo übergeben wird, und den vorherigen Seitenzustand (sofern er vorhanden ist).

OnNavigatedFrom() wird aufgerufen, wenn die Seite nicht mehr in einem Frame angezeigt werden soll. Durch das Wegnavigieren von einer Seite ermöglichen wir der Seite das Speichern des aktuellen Zustands. Es leeres Wörterbuch wird an SaveState() übergeben. Die einzelnen Seiten können SaveState überschreiben und Objekte im Wörterbuch mit Schlüssel überschreiben (Zeichenfolge in Objekt). Dieses Wörterbuch wird anschließend der Seite zugeordnet und dem SessionState-Objekt hinzugefügt, das von SuspensionManager für den jeweiligen Frame überwacht wird.

Hinweis  

  • Alle auf der individuellen Seite gespeicherten Daten müssen für die Serialisierung mit dem DataContractSerializer verfügbar sein.
  • Zudem ist es wichtig, dass an dieser Stelle nur vorübergehende UI-Informationen gespeichert werden, da dieser Zustand verloren geht, wenn die App nicht mithilfe der Terminated-Methode geschlossen wird.

Navigationsunterstützung in Seitenvorlagen

Beim Erstellen der Navigationsseiten haben wir die Vorlage Standardseite verwendet. Diese und andere Vorlagen für die Unterstützung der Navigation erstellen eine Seite, die oben links auf der Seite über eine Zurück-Schaltfläche verfügen. Die Schaltfläche wurde so entworfen, dass sie nur sichtbar ist, wenn sie aktiviert ist. Daher wird die Zurück-Schaltfläche zwar nicht auf der ersten Seite, aber auf der zweiten angezeigt.

Die folgenden Seitenvorlagen stellen die gleiche Navigationsunterstützung bereit.

  • Einfache Seite
  • Gruppendetailseite
  • Seite mit gruppierten Elementen
  • Elementdetailseite
  • Elementseite
  • Geteilte Seite
  • Hub-Seite
  • Suchergebnisseite

Übergeben von Informationen zwischen Seiten

Unsere App navigiert zwischen zwei Seiten, sie bietet jedoch noch keine interessanten Funktionen. Bei vielen Apps mit mehreren Seiten müssen die Seiten Informationen freigeben. Übergeben wir also einige Informationen der ersten Seite an die zweite Seite.

Ersetzen Sie in BasicPage1.xaml den zuvor hinzugefügten StackPanel-Code mit folgendem XAML-Code.


<StackPanel Grid.Row="1"
    Margin="120,0,120,60">
    <TextBlock Text="Enter your name"/>
    <TextBox Width="200" HorizontalAlignment="Left" Name="tb1"/>
    <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
</StackPanel>


Ersetzen Sie in BasicPage1.xaml.cs oder BasicPage1.xaml.vb den Ereignishandler HyperlinkButton_Click mit folgendem Code.


private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    this.Frame.Navigate(typeof(BasicPage2), tb1.Text);
}


Füllen Sie in BasicPage2.xaml.cs oder BasicPage2.xaml.vb die leere Methode navigationHelper_LoadState mit folgendem Code:


private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
    string name = e.NavigationParameter as string;

    if (!string.IsNullOrWhiteSpace(name))
    {
        tb1.Text = "Hello, " + name;
    }
    else
    {
        tb1.Text = "Name is required.  Go back and enter a name.";
    }
}

Führen Sie die App aus, geben Sie Ihren Namen in das Textfeld ein, und klicken Sie auf den Link Click to go to page 2. Wenn Sie this.Frame.Navigate(typeof(BasicPage2), tb1.Text); im Click-Ereignis von HyperlinkButton aufgerufen haben, wird die tb1.Text-Eigenschaft beim Laden von BasicPage2 übergeben. Die navigationHelper_LoadState-Methode von BlankPage2 ruft den Wert aus den Ereignisdaten ab und verwendet diesen zur Anzeige einer Meldung.

Zwischenspeichern von Seiten

Wenn Sie das letzte Beispiel ausgeführt haben, haben Sie möglicherweise bemerkt, dass beim Klicken auf die Zurück-Schaltfläche auf BasicPage2 das TextBox bei der Anzeige auf BasicPage1 leer ist. Gehen wir nun davon aus, dass der Benutzer der App zurückkehren möchte, um auf der vorherigen Seite eine Änderung vorzunehmen. Wenn BasicPage1 viele auszufüllende Felder enthält, ist der Benutzer wahrscheinlich nicht erfreut darüber, dass Felder zurückgesetzt werden, wenn die App zu dieser Seite zurückkehrt. Mithilfe der NavigationCacheMode-Eigenschaft können Sie festlegen, dass eine Seite zwischengespeichert wird. Legen Sie im Konstruktor von BasicPage1 die Eigenschaft NavigationCacheMode auf Enabled fest.


public BasicPage1()
{
    this.InitializeComponent();
    ...
    this.NavigationCacheMode = 
        Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}


Wenn Sie jetzt die App ausführen und von BasicPage2 zurück zu BasicPage1 navigieren, behält das TextBox auf BasicPage1 seine Werte bei.

Zusammenfassung

In diesem Thema haben Sie erfahren, wie Sie eine einfache App erstellen, die zwischen Seiten navigiert. Sie haben gelernt, wie Sie Informationen von einer Seite an eine andere übergeben und wie sich festlegen lässt, dass der Zustand einer Seite zwischengespeichert wird.

Nächste Schritte

Unter Beispiel für XAML-Navigation finden Sie ein umfassendes Beispiel, in dem viele der Page- und Frame-Features gemeinsam zur Anwendung kommen. Dieses Beispiel umfasst auch Aspekte, die hier nicht besprochen wurden:

Verwandte Themen

Page
Frame
Frame.Navigate
Roadmap für das Erstellen von Apps mit C#, C++ oder VB
Beispiel für XAML-Navigation

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.