Spare Zeit mit dem Xamarin.Forms Previewer

Einer der zeitaufwändigsten Teile der Entwicklung ist der Build- und Run-Zyklus, oder die Zeit zwischen dem Schreiben einer Codezeile und dem Beobachten, wie der Code ausgeführt wird. Echtzeit-Feedback macht die Entwicklung schneller und einfacher für Entwickler. Xamarin.Forms Previewer erstellt eine Live-Vorschau einer Seite nebeneinander mit dem XAML-Markup, so dass du deine Benutzeroberfläche zum Leben erwecken kannst, während du codest.

Installieren des Xamarin.Forms Previewers

Der Xamarin Forms Previewer ist standardmäßig mit Visual Studio 2015 und 2017 mit Xamarin installiert. Auf dem Mac ist es standardmäßig in Xamarin Studio und der Visual Studio für Mac Vorschau verfügbar, mit dem neuesten Xamarin.iOS und Xamarin.Android installiert. Das Neueste Xamarin.Forms NuGet wird dabei empfohlen (mindestens Version 2.3.2). Der Previewer ist kostenlos erhältlich.

Wie du den Previewer verwendest

Der Previewer arbeitet auf jeder ContentPage, ContentView oder ViewCell in einer Xamarin.Forms Anwendung. Du kannst eine neue Xamarin.Forms App aus der Vorlage erstellen oder eine vorhandene Anwendung öffnen. Vergewissere dich, dass deine App XAML für Benutzeroberflächen-Dateien verwendet. Erstelle einen ersten Build von deiner App vor dem Öffnen der Previewer - eine erste Kompilierung ist erforderlich damit du die Android-Vorschau zum Laufen bringst. Es ist auch während der Entwicklung erforderlich, damit der Previewer auf alle UI-Änderungen und Ressourcen außerhalb des XAML zugreifen kann.

Ein Doppelklick auf eine XAML-Datei, um den Previewer in Xamarin Studio oder Visual Studio für Mac zu starten. Danach solltest du eine Split-Ansicht mit deinem XAML auf der linken Seite und eine Vorschau auf der rechten Seite sehen:

Xamarin

Wenn du die Designoberfläche nicht rechts siehst, drücke auf der Vorschau-Schaltfläche oben rechts im Texteditor, um den Previewer umzuschalten.

Um den Previewer in Visual Studio zu starten, wähle View-> Other Windows -> Xamarin.Forms Previewer oder suche nach "Preview" in der Suchleiste. Dies öffnet ein Werkzeugfenster für den Previewer. Das Werkzeugfenster kann dann neben dem Editor angedockt werden:

Xamarin

Die Designoberfläche

Der Previewer verfügt über Tools, die dazu beitragen, dass deine Benutzeroberfläche für deine Benutzer gut aussieht. Mit der Designoberfläche kannst du zwischen 3 Kategorien wählen:

  • iOS und Android
  • Telefon und Tablet
  • Landschaft oder Porträt

Zoom-Bedienelemente sind auch auf der Design-Oberfläche verfügbar, um dir zu helfen, dein Design zu optimieren. Auf einem Mac unterstützt Xamarin.Forms Previewer auch Trackpad-Zoom-Gesten.

Mehr Ressourcen

Für weitere Informationen über das Beste aus der Vorschau, schau dir die Hilfestellungen aus unserem Team und unserer Community an:

Der Previewer ist ein wertvolles Werkzeug, um die Entwicklung von Xamarin.Forms zu beschleunigen, und wir hoffen, dass du es als Teil deiner alltäglichen Entwicklungsworkflows nutzen kannst.