Hinzufügen von Seitenelementvorlagen (für Windows Store-Apps mit C#/VB/C++ und XAML)

Sie können einer Windows Store-App eine Seitenelementvorlage hinzufügen und eine einfache Navigation zwischen Seiten bereitstellen. Beschreibungen der Windows Store-Elementvorlagen finden Sie unter C#-, VB- und C++-Elementvorlagen für Windows Store-Apps.

Erstellen wir ein Projekt in der Projektvorlage mit der leeren App. Dabei handelt es sich um eine Minimalvorlage ohne Steuerelemente. Ebenso wie die Vorlagen Grid App und Split App erstellt die Vorlage mit der leeren App einen Frame und navigiert zu einer leeren Seite.

Es gibt verschiedene Seiten, die Sie zu einer App hinzufügen können, darunter alle Seiten, aus denen die Grid App und die Split App bestehen, sowie die leere Seite und die Standardseite. Jede Elementseitenvorlage erstellt eine neue XAML-Datei und die zugehörigen CodeBehind-Dateien (.vb, .cs, .h, .cpp).

Wir beginnen mit dem Erstellen einer Navigations-App in der Vorlage mit der leeren App.

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

Nun fügen wir eine zweite Seite hinzu.

Hinzufü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 Page2 in das Feld Name ein, und klicken Sie anschließend auf Hinzufügen.

   Die Datei page2.xaml wird erstellt, zusammen mit einer weiteren Projektdatei (oder zwei, wenn Sie Visual C++ verwenden): page2.xaml.vb, page2.xaml.cs oder page2.xaml.cpp und page2.xaml.h.

Nun fügen wir Code zum Navigieren zwischen den Seiten hinzu. Die von uns erstellte Navigations-App verwendet ein Schaltflächen-Klick-Ereignis für die Navigation zur nächsten Seite.

Hinzufügen von Navigationscode

1. Öffnen Sie im Projektmappen-Explorer die Datei MainPage.xaml.

2. Ziehen Sie aus der Toolbox eine Schaltfläche auf die Entwurfsoberfläche.

3. Wählen Sie in der XAML (Extensible Application Markup Language)- oder Designansicht die Schaltfläche aus, die Sie MainPage.xaml hinzugefügt haben.

4. Klicken Sie im Eigenschaftenfenster auf die Ereignisschaltfläche ().

5. Suchen Sie am Anfang der Ereignisliste nach dem Click-Ereignis. Geben Sie im Textfeld für das Ereignis den Namen der Funktion ein, die das Click-Ereignis behandelt. Geben Sie für dieses Beispiel die Zeichenfolge "Button_Click" ein.

   

6. Drücken Sie die EINGABETASTE. Die Ereignishandlermethode wird erstellt und im Code-Editor geöffnet, damit Sie den Code hinzufügen können, der bei Auftreten des Ereignisses ausgeführt werden soll.

7. Fügen Sie im neuen Ereignishandler den folgenden Code hinzu:

   this.Frame.Navigate(typeof(page2));
   

   Me.Frame.Navigate(GetType(BlankPage1))
   

8. Drücken Sie F5, um die App auszuführen.

   Wenn Sie auf die Schaltfläche Nächste Seite klicken, wird page2.xaml geladen und der Standardinhalt angezeigt.

   Klicken Sie auf die Schaltfläche "Back", um zur ersten Seite der App zurückzukehren.

Verwandte Themen

C#-, VB- und C++-Elementvorlagen für Windows Store-Apps

Hinzufügen einer Elementvorlage vom Typ "Vertrag für 'Suche'"