XAML-Vorschau für Xamarin.Forms

Anzeigen der während der Xamarin.Forms Eingabe gerenderten Layouts

Warnung

Die XAML-Vorschau ist in Visual Studio 2019, Version 16.8 und Visual Studio für Mac Version 8.8, veraltet und durch das XAML-Hot Reload-Feature in Visual Studio Version 2019, Version 16.9 und Visual Studio für Mac Version 8.9 ersetzt. Erfahren Sie mehr über XAML-Hot Reload in der Dokumentation.

Übersicht

Die XAML-Vorschau zeigt Ihnen, wie Ihre Xamarin.Forms XAML-Seite auf iOS und Android aussieht. Wenn Sie Änderungen an Ihrem XAML-Code vornehmen, werden sie direkt neben Ihrem Code in der Vorschau angezeigt. Die XAML-Vorschau ist in Visual Studio und Visual Studio für Mac verfügbar.

Erste Schritte

Visual Studio 2019

Sie können die XAML-Vorschau öffnen, indem Sie auf die Pfeile im geteilten Ansichtsbereich klicken. Wenn Sie das standardmäßige Verhalten der geteilten Ansicht ändern möchten, verwenden Sie das Dialogfeld "Extras Optionen >> Xamarin >Xamarin.Forms XAML Previewer ". In diesem Dialogfeld können Sie die Standarddokumentansicht und die geteilte Ausrichtung auswählen.

Xamarin.Forms Previewer options in Visual Studio

Wenn Sie eine XAML-Datei öffnen, wird der Editor entweder vollformatig oder neben der Vorschau geöffnet, basierend auf den einstellungen, die im Dialogfeld "Optionen >> Xamarin >Xamarin.Forms XAML Previewer " ausgewählt sind. Die Aufteilung kann jedoch für jede Datei im Editorfenster geändert werden.

XAML-Vorschausteuerelemente

Wählen Sie aus, ob Sie Ihren Code, die XAML-Vorschau oder beides anzeigen möchten, indem Sie diese Schaltflächen im geteilten Ansichtsbereich auswählen. Die mittlere Schaltfläche wechselt, auf welcher Seite sich der Vorschauer und Ihr Code befinden:

Xamarin.Forms Previewer controls to switch between design, source, and split view in Visual Studio

Sie können ändern, ob der Bildschirm vertikal oder horizontal geteilt wird oder einen Bereich vollständig reduzieren:

Xamarin.Forms Previewer pane orientation controls in Visual Studio

Aktivieren oder Deaktivieren der XAML-Vorschau

Sie können die XAML-Vorschau im Dialogfeld "Extras Optionen >> Xamarin >Xamarin.Forms XAML Previewer " deaktivieren, indem Sie den Standard-XML-Editor als Standard-XAML-Editor auswählen. Dadurch wird auch die Dokumentgliederung, der Eigenschaftenbereich und die XAML-Toolbox deaktiviert. Wenn Sie die XAML-Vorschau und diese Tools wieder aktivieren möchten, ändern Sie den Standard-XAML-Editor in Xamarin.Forms "Vorschau".

Visual Studio für Mac

Die Schaltfläche "Vorschau " wird im Editor angezeigt, wenn Sie eine XAML-Seite öffnen. Anzeigen oder Ausblenden der Vorschau durch Drücken der Schaltflächen "Vorschau " oder " Teilen " unten links in einem beliebigen XAML-Dokumentfenster:

Xamarin.Forms Previewer enabled with the preview or split button

Hinweis

In älteren Versionen von Visual Studio für Mac befindet sich die Schaltfläche "Vorschau" oben rechts im Fenster.

Aktivieren oder Deaktivieren der XAML-Vorschau

Sie können die XAML-Vorschau im Dialogfeld Visual Studio >> Text-Editor-XAML > deaktivieren, indem Sie den STANDARD-XML-Editor als Standard-XAML-Editor auswählen. Dadurch wird auch die Dokumentgliederung, der Eigenschaftenbereich und die XAML-Toolbox deaktiviert. Wenn Sie die XAML-Vorschau und diese Tools wieder aktivieren möchten, ändern Sie den Standard-XAML-Editor in Xamarin.Forms "Vorschau".

XAML-Vorschauoptionen

Die Optionen am oberen Rand des Vorschaubereichs sind:

  • Android – Anzeigen der Android-Version des Bildschirms
  • iOS – iOS-Version des Bildschirms anzeigen (Hinweis: Wenn Sie Visual Studio auf Windows verwenden, müssen Sie mit einem Mac gekoppelt sein, um diesen Modus zu verwenden)
  • Gerät – Dropdownliste von Android- oder iOS-Geräten einschließlich Auflösung und Bildschirmgröße
  • Hochformat (Symbol) – Verwendet hochformatige Ausrichtung für die Vorschau
  • Querformat (Symbol) – verwendet querformatige Ausrichtung für die Vorschau

Entwurfsmodus erkennen

Die statische DesignMode.IsDesignModeEnabled Eigenschaft teilt Ihnen mit, ob die Anwendung in der Vorschau ausgeführt wird. Mithilfe dieses Codes können Sie Code angeben, der nur ausgeführt wird, wenn die Anwendung in der Vorschau ausgeführt wird oder nicht ausgeführt wird:

if (DesignMode.IsDesignModeEnabled)
{
  // Previewer only code  
}

if (!DesignMode.IsDesignModeEnabled)
{
  // Don't run in the Previewer  
}

Diese Eigenschaft ist nützlich, wenn Sie eine Bibliothek in Ihrem Seitenkonstruktor initialisieren, die zur Entwurfszeit nicht ausgeführt werden kann.

Problembehandlung

Überprüfen Sie die folgenden Probleme und die Xamarin-Foren, wenn der Vorschauer nicht funktioniert.

XAML-Vorschau wird nicht angezeigt oder zeigt einen Fehler an.

  • Es kann einige Zeit dauern, bis der Vorschauer gestartet wird – Sie sehen "Render initialisieren", bis sie bereit ist.
  • Versuchen Sie, die XAML-Datei zu schließen und erneut zu öffnen.
  • Stellen Sie sicher, dass Ihre App Klasse über einen parameterlosen Konstruktor verfügt.
  • Überprüfen Sie Ihre Xamarin.Forms Version – es muss mindestens Xamarin.Forms 3.6 sein. Sie können über NuGet auf die neueste Xamarin.Forms Version aktualisieren.
  • Überprüfen Sie Ihre JDK-Installation – Die Vorschau von Android erfordert mindestens JDK 8.
  • Versuchen Sie, alle initialisierten Klassen im C#-Code der Seite in umzuschließen.if (!DesignMode.IsDesignModeEnabled)

Benutzerdefinierte Steuerelemente werden nicht gerendert

Versuchen Sie, Ihr Projekt zu erstellen. In der Vorschau wird die Basisklasse des Steuerelements angezeigt, wenn das Steuerelement nicht gerendert werden kann, oder wenn der Ersteller des Steuerelements das Rendern der Entwurfszeit deaktiviert hat. Weitere Informationen finden Sie unter Rendern von benutzerdefinierten Steuerelementen in der XAML-Vorschau.