Übung: Schreiben einer App mithilfe von Template Studio

  • 10 Minuten

Template Studio für die WPF ist eine Visual Studio-Erweiterung, die die Erstellung von Windows Presentation Foundation-(WPF-)Apps mithilfe einer assistentenbasierten Benutzeroberfläche beschleunigt. Das sich ergebende WPF-Projekt enthält wohlgeformten, lesbaren Code, der die neuesten Windows-Features integriert und gleichzeitig bewährte Muster und bewährte Methoden implementiert.

Was ist mit Template Studio möglich?

Template Studio leistet die ganze harte Arbeit, den Code zu erstellen, den Sie sonst jedes Mal, wenn Sie mit dem Schreiben einer WPF-APP beginnen, manuell schreiben müssten. Solange Sie vor Beginn eine klare Vorstellung von der Struktur Ihrer App haben, können Sie mit dem Assistenten den Vorgang des Hinzufügens von Features und Ansichten zu Ihrem Projekt schrittweise durchlaufen. Sobald Sie fertig sind, können Sie den Code hinzufügen, der die Funktionalität implementiert, die für Ihr Projekt spezifisch ist.

Installieren von Template Studio

Wenn Sie das Installationsskript im Modul Automatisches Installieren von Tools verwendet haben, dann ist Template Studio schon bereit und wartet auf Sie. Wenn Sie die Tools selbst installieren müssen, besuchen Sie diese Website für Visual Studio-Erweiterungen, und wählen Sie Herunterladen aus.

Erstellen einer App mithilfe von Template Studio

Werfen wir einen Blick auf den Vorgang der Erstellung einer hypothetischen App mit Template Studio. Sie können dies gerne auf Ihrem eigenen Computer nachvollziehen.

Zunächst skizzieren wir die Features der App. Es kann hilfreich sein, auf einem Blatt Papier zu skizzieren, welche Features die App hat und wie die Ansichten miteinander verbunden sind. Nehmen wir für dieses Beispiel an, wir erstellen eine Wettervorhersage-App. Am Ende dieses Tutorials liegt uns das Gerüst der App vor, in dem Sie die wichtigen wetterbezogenen Features hinzufügen können.

Unsere App führt Folgendes aus:

  • Sie verwendet das Steuerelement Navigationsansicht zum Wechseln zwischen verschiedenen Ansichten.
  • Sie zeigt Wettersymbole für die Woche auf einer leeren Seite an.
  • Verwenden Sie eine Karte innerhalb eines WebView-Steuerelements, um den aktuellen Wettervorhersagebereich anzuzeigen.
  • Zeigen Sie die Vorhersage für lange Bereiche mithilfe eines Listendetailformats an.
  • Sie enthält eine Einstellungenseite, wo der Benutzer Einstellungen ändern kann.
  • Sie verwendet Benachrichtigungen, um Benutzer vor gefährlichen Wetterbedingungen zu warnen.

Nachdem wir diese Details geklärt haben, sind wir bereit, den Assistenten von Template Studio zu verwenden, um unser Projekt zu erstellen.

  1. Um den Assistenten von Template Studio zu öffnen, erstellen Sie ein Projekt in Visual Studio, indem Sie Datei>Neu>Projekt auswählen. Sie finden Template Studio als Template Studio für UWP.
  2. Nennen Sie Ihre App Weather, und wählen Sie Erstellen aus, um den Assistenten zu starten. Screenshot that shows the Configure your new project window for a Template Studio app in Visual Studio.
  3. Der Template Studio-Assistent wird geöffnet.
  4. Wählen Sie auf der Seite Projekttyp die Option Navigationsbereich und dann Weiter aus. Screenshot that shows selecting the Navigation Pane on the Project type page of the Template Studio, and the Next button selected.
  5. Wählen Sie auf der Seite Entwurfsmuster die Option CodeBehind und dann Weiter aus.
  6. Auf der Seite Seiten wird es interessant. Jeder Seitentyp kann Ihrer App hinzugefügt werden. Sie können den Seitennamen und die Reihenfolge im rechten Bereich ändern. Sie erkennen, dass eine leere Seite mit dem Namen Main standardmäßig hinzugefügt wird. Unsere Wettersymbole befinden sich auf dieser Seite, ändern Sie also den Namen in CurrentForecast.
  7. Fügen Sie dann eine WebView-Seite, eine ListDetails-Seite und eine Seite mit Einstellungen hinzu. Screenshot that shows all of the pages added to the app and the Next button selected.
  8. Wählen Sie Weiter aus. Auf der Seite Features können Sie einige erweiterte Features von Windows hinzufügen. Fügen Sie vorerst Popupbenachrichtigungen hinzu. Screenshot that shows the Toast Notification feature added to the app and the Create button selected.
  9. Überspringen Sie für dieses Modul Dienste und Tests. Wählen Sie Erstellen aus, um Ihr Projekt zu erstellen.
  10. Um einige Wetterinformationen in das WebView-Steuerelement zu laden, öffnen Sie WebMapsPage.xaml.cs im Ordner „Views“, und ändern Sie den Zeichenfolgenwert von DefaultUrl in https://www.msn.com/en-us/weather/maps/cloud/in-Redmond,WA.

Da der Code Ihres Projekts nun erstellt ist, können Sie Ausführen oder F5 auswählen, um das Projekt zu erstellen und zu starten.

Screenshot that shows the app running with the map, chart, and settings panes displayed.

Sie werden feststellen, dass Sie bereits eine recht beeindruckende App im Einsatz haben. Sie müssen lediglich die Funktionalität hinzufügen. Kein Problem!