XAML-Vorschau fürXamarin.FormsXAML Previewer for Xamarin.Forms

Anzeigen der Xamarin.Forms gerenderten Layouts bei der TypdarstellungSee your Xamarin.Forms layouts rendered as you type

ÜbersichtOverview

Die XAML-Vorschau zeigt Ihnen, wie Ihre Xamarin.Forms XAML-Seite unter IOS und Android aussehen wird.The XAML Previewer shows you how your Xamarin.Forms XAML page will look on iOS and Android. Wenn Sie Änderungen an Ihrem XAML vornehmen, werden diese sofort neben dem Code angezeigt.When you make changes to your XAML, you'll see them previewed immediately alongside your code. Der XAML-Previewer ist in Visual Studio und Visual Studio für Mac verfügbar.The XAML Previewer is available in Visual Studio and Visual Studio for Mac.

Erste SchritteGetting started

Visual Studio 2019Visual Studio 2019

Sie können den XAML-Previewer öffnen, indem Sie im Bereich geteilte Ansicht auf die Pfeile klicken.You can open the XAML Previewer by clicking the arrows on the split view pane. Wenn Sie das Standardverhalten der Split-Ansicht ändern möchten, verwenden Sie das Dialogfeld Tools > Optionen > xamarin > Xamarin.Forms XAML Previewer .If you want to change the default split view behavior, use the Tools > Options > Xamarin > Xamarin.Forms XAML Previewer dialog. In diesem Dialogfeld können Sie die Standarddokument Ansicht und die geteilte Ausrichtung auswählen.In this dialog, you can select the default document view and the split orientation.

Xamarin.FormsPreviewer-Optionen in Visual StudioXamarin.Forms Previewer options in Visual Studio

Wenn Sie eine XAML-Datei öffnen, wird der Editor entweder in voller Größe oder neben dem Previewer geöffnet, basierend auf den Einstellungen, die im Dialogfeld Tools > Optionen > xamarin > Xamarin.Forms XAML Previewer ausgewählt sind.When you open a XAML file, the editor will open either full-sized or next to the previewer, based on the settings selected in the Tools > Options > Xamarin > Xamarin.Forms XAML Previewer dialog. Die Aufteilung kann jedoch für jede Datei im Editor Fenster geändert werden.However, the split can be changed for each file in the editor window.

XAML-Vorschau SteuerelementeXAML preview controls

Wählen Sie aus, ob Sie Ihren Code, die XAML-Vorschau oder beides anzeigen möchten, indem Sie diese Schaltflächen im Bereich geteilte Ansicht auswählen.Choose whether you want to see your code, the XAML Previewer, or both by selecting these buttons on the split view pane. Die mittlere Schaltfläche vertauscht die Seite, auf der sich der Previewer und der Code befinden:The middle button swaps what side the Previewer and your code are on:

Xamarin.FormsPreviewer-Steuerelemente für den Wechsel zwischen Design, Quelle und geteilter Ansicht in Visual StudioXamarin.Forms Previewer controls to switch between design, source, and split view in Visual Studio

Sie können ändern, ob der Bildschirm vertikal oder horizontal aufgeteilt wird, oder einen Bereich vollständig reduzieren:You can change whether the screen is split vertically or horizontally, or collapse one pane altogether:

![Xamarin.FormsAusrichtung von Steuerelementen im Vorschaubereich in Visual Studio](xaml-previewer-images/xamlp-controls-orientation-vs-sm.png "[! Schel. "NO-LOC (xamarin. Forms)]"-Ausrichtung Steuerelemente im Vorschaubereich in Visual Studio")Xamarin.Forms Previewer pane orientation controls in Visual Studio

Aktivieren oder Deaktivieren der XAML-VorschauEnable or disable the XAML Previewer

Sie können den XAML-Previewer im Dialog > Optionen > xamarin > Xamarin.Forms XAML Previewer deaktivieren, indem Sie als Standard- XML -Editor als Standard-XAML-Editorauswählen.You can turn the XAML Previewer off in the Tools > Options > Xamarin > Xamarin.Forms XAML Previewer dialog by selecting Default XML Editor as your Default XAML Editor. Dies deaktiviert auch die Dokument Gliederung, den Eigenschaften Bereich und die XAML-Toolbox.This also turns off the Document Outline, Property Panel, and XAML Toolbox. Wenn Sie den XAML-Previewer und diese Tools wieder aktivieren möchten, ändern Sie den standardmäßigen XAML-Editor in ** Xamarin.Forms Previewer**.To turn the XAML Previewer and those tools back on, change your Default XAML Editor to Xamarin.Forms Previewer.

Visual Studio für MacVisual Studio for Mac

Die Schaltfläche Vorschau wird im Editor angezeigt, wenn Sie eine XAML-Seite öffnen.The Preview button is displayed on the editor when you open a XAML page. Zeigen Sie die Vorschau an oder blenden Sie Sie aus, indem Sie die Schaltflächen " Vorschau " oder " Teilen " unten links in jedem XAML-Dokument Fenster drücken:Show or hide the Previewer by pressing the Preview or Split buttons in the bottom-left of any XAML document window:

Xamarin.FormsPreviewer aktiviert mit der Schaltfläche "Vorschau" oder "teilen"Xamarin.Forms Previewer enabled with the preview or split button

Hinweis

In älteren Versionen von Visual Studio für Mac befand sich die Schaltfläche Vorschau in der oberen rechten Ecke des Fensters.In older versions of Visual Studio for Mac, the Preview button was located in the top-right of the window.

Aktivieren oder Deaktivieren der XAML-VorschauEnable or Disable the XAML Previewer

Sie können den XAML-Previewer in den Visual Studio-> Einstellungen > Text-Editor > XAML -Dialogfeld deaktivieren, indem Sie als Standard- XML -Editor als Standard-XAML-Editorauswählen.You can turn the XAML Previewer off in the Visual Studio > Preferences > Text Editor > XAML dialog by selecting Default XML Editor as your Default XAML Editor. Dies deaktiviert auch die Dokument Gliederung, den Eigenschaften Bereich und die XAML-Toolbox.This also turns off the Document Outline, Property Panel, and XAML Toolbox. Wenn Sie den XAML-Previewer und diese Tools wieder aktivieren möchten, ändern Sie den standardmäßigen XAML-Editor in ** Xamarin.Forms Previewer**.To turn the XAML Previewer and those tools back on, change your Default XAML Editor to Xamarin.Forms Previewer.

XAML-previeweroptionenXAML previewer options

Die Optionen am oberen Rand des Vorschau Bereichs lauten wie folgt:The options along the top of the preview pane are:

  • Android – zeigt die Android-Version des Bildschirms anAndroid – show the Android version of the screen
  • IOS – zeigt die IOS-Version des Bildschirms an (Hinweis: Wenn Sie Visual Studio unter Windows verwenden, müssen Sie mit einem Mac gekoppelt sein, um diesen Modus zu verwenden).iOS – show the iOS version of the screen (Note: If you're using Visual Studio on Windows, you must be paired to a Mac to use this mode)
  • Geräte -Dropdown Liste von Android-oder IOS-Geräten, einschließlich Auflösung und BildschirmgrößeDevice - Drop-down list of Android or iOS devices including resolution and screen size
  • Hochformat (Symbol) – verwendet die Hochformat Ausrichtung für die Vorschau.Portrait (icon) – uses portrait orientation for the preview
  • Querformat (Symbol) – verwendet die quer Ausrichtung für die Vorschau.Landscape (icon) – uses landscape orientation for the preview

Erkennen des Entwurfs ModusDetect design mode

Die statische- DesignMode.IsDesignModeEnabled Eigenschaft gibt Aufschluss darüber, ob die Anwendung in der Previewer ausgeführt wird.The static DesignMode.IsDesignModeEnabled property tells you if the application is running in the previewer. Wenn Sie ihn verwenden, können Sie Code angeben, der nur ausgeführt wird, wenn die Anwendung im Previewer ausgeführt wird oder nicht ausgeführt wird:Using it, you can specify code that will only execute when the application is or isn't running in the previewer:

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.This property is useful if you initialize a library in your page constructor that fails to run at design time.

ProblembehandlungTroubleshooting

Überprüfen Sie die folgenden Probleme und die xamarin-Foren, wenn der Previewer nicht funktioniert.Check the issues below and the Xamarin Forums, if the Previewer isn't working.

Der XAML-Previewer wird nicht angezeigt oder zeigt einen Fehler an.XAML Previewer isn't showing or shows an error

  • Es kann einige Zeit dauern, bis der Previewer startet. Sie sehen, dass "Rendering initialisiert" ist, bis er bereit ist.It can take some time for the Previewer to start up - you'll see "Initializing Render" until it's ready.
  • Schließen Sie die XAML-Datei, und öffnen Sie Sie erneut.Try closing and reopening the XAML file.
  • Stellen Sie sicher, dass die App Klasse über einen Parameter losen Konstruktor verfügt.Ensure that your App class has a parameterless constructor.
  • Überprüfen Sie Ihre Xamarin.Forms Version-Sie muss mindestens Xamarin.Forms 3,6 sein.Check your Xamarin.Forms version - it has to be at least Xamarin.Forms 3.6. Sie können Xamarin.Forms über nuget auf die neueste Version aktualisieren.You can update to the latest Xamarin.Forms version through NuGet.
  • Überprüfen der JDK-Installation: Android erfordert mindestens JDK 8.Check your JDK installation - previewing Android requires at least JDK 8.
  • Versuchen Sie, alle initialisierten Klassen im c#-Code der Seite in zu umwickeln if (!DesignMode.IsDesignModeEnabled) .Try wrapping any initialized classes in the page's C# code behind in if (!DesignMode.IsDesignModeEnabled).

Benutzerdefinierte Steuerelemente nicht RenderingCustom controls aren't rendering

Versuchen Sie, Ihr Projekt zu entwickeln.Try building your project. Der Vorschau zeigt die Basisklasse des Steuer Elements an, wenn das Steuerelement nicht gerendert werden kann oder wenn der Ersteller des Steuer Elements das Rendern der Entwurfszeit deaktiviert hat.The previewer shows the control's base class if it fails to render the control, or if the control's creator opted-out of design time rendering. Weitere Informationen finden Sie unter Rendering Custom Controls in the XAML Previewer.For more information, see Render Custom Controls in the XAML Previewer.