Générateur d’aperçu XAML pour Xamarin. FormsXAML Previewer for Xamarin.Forms

Voir vos dispositions Xamarin. Forms rendues à mesure que vous tapezSee your Xamarin.Forms layouts rendered as you type

PrésentationOverview

Le générateur d’aperçu XAML vous montre comment votre page XAML Xamarin. Forms s’affichera sur iOS et Android.The XAML Previewer shows you how your Xamarin.Forms XAML page will look on iOS and Android. Lorsque vous apportez des modifications à votre code XAML, vous les voyez immédiatement en regard de votre code.When you make changes to your XAML, you'll see them previewed immediately alongside your code. Le générateur d’aperçu XAML est disponible dans Visual Studio et Visual Studio pour Mac.The XAML Previewer is available in Visual Studio and Visual Studio for Mac.

Prise en mainGetting started

Visual Studio 2019Visual Studio 2019

Vous pouvez ouvrir le générateur d’aperçu XAML en cliquant sur les flèches du volet mode fractionné.You can open the XAML Previewer by clicking the arrows on the split view pane. Si vous souhaitez modifier le comportement par défaut du mode fractionné, utilisez les outils > Options > boîte de dialogue Xamarin > Forms du générateur d’aperçu.If you want to change the default split view behavior, use the Tools > Options > Xamarin > Forms Previewer dialog. Dans cette boîte de dialogue, vous pouvez sélectionner la vue de document par défaut et l’orientation de fractionnement.In this dialog, you can select the default document view and the split orientation.

Options du générateur d’aperçu Xamarin. Forms dans Visual StudioXamarin.Forms Previewer options in Visual Studio

Lorsque vous ouvrez un fichier XAML, l’éditeur ouvre l’intégralité ou en regard du générateur d’aperçu, en fonction des paramètres sélectionnés dans outils > Options > boîte de dialogue Xamarin > Forms du générateur d’aperçu.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 > Forms Previewer dialog. Toutefois, le fractionnement peut être modifié pour chaque fichier dans la fenêtre de l’éditeur.However, the split can be changed for each file in the editor window.

Contrôles d’aperçu XAMLXAML preview controls

Choisissez si vous souhaitez voir votre code, le générateur d’aperçu XAML, ou les deux, en sélectionnant ces boutons dans le volet mode fractionné.Choose whether you want to see your code, the XAML Previewer, or both by selecting these buttons on the split view pane. Le bouton du milieu permute le côté générateur d’aperçu et votre code:The middle button swaps what side the Previewer and your code are on:

Contrôles d’aperçu Xamarin. Forms pour basculer entre les modes Design, source et fractionné dans Visual StudioXamarin.Forms Previewer controls to switch between design, source, and split view in Visual Studio

Vous pouvez modifier l’écran pour le fractionner verticalement ou horizontalement, ou pour réduire entièrement un volet:You can change whether the screen is split vertically or horizontally, or collapse one pane altogether:

Contrôles d’orientation du volet d’aperçu Xamarin. Forms dans Visual StudioXamarin.Forms Previewer pane orientation controls in Visual Studio

Visual Studio pour MacVisual Studio for Mac

Le bouton Aperçu est affiché dans l’éditeur lorsque vous ouvrez une page XAML.The Preview button is displayed on the editor when you open a XAML page. Affichez ou masquez le générateur d’aperçu en appuyant sur les boutons d' Aperçu ou de fractionnement dans le coin inférieur gauche de toute fenêtre de document XAML:Show or hide the Previewer by pressing the Preview or Split buttons in the bottom-left of any XAML document window:

Le générateur d’aperçu Xamarin. Forms est activé avec le bouton d’aperçu ou de fractionnementXamarin.Forms Previewer enabled with the preview or split button

Notes

Dans les versions antérieures de Visual Studio pour Mac, le bouton Aperçu était situé en haut à droite de la fenêtre.In older versions of Visual Studio for Mac, the Preview button was located in the top-right of the window.

Options du générateur d’aperçu XAMLXAML previewer options

Les options situées en haut du volet de visualisation sont les suivantes:The options along the top of the preview pane are:

  • Android : afficher la version Android de l’écranAndroid – show the Android version of the screen
  • iOS : affiche la version IOS de l’écran (Remarque: Si vous utilisez Visual Studio sur Windows, vous devez être couplé à un Mac pour utiliser ce mode)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)
  • Liste déroulante périphérique des appareils Android ou iOS, y compris la résolution et la taille d’écranDevice - Drop-down list of Android or iOS devices including resolution and screen size
  • Portrait (icône) : utilise l’orientation portrait pour la préversionPortrait (icon) – uses portrait orientation for the preview
  • Paysage (icône) : utilise l’orientation paysage pour la préversionLandscape (icon) – uses landscape orientation for the preview

Détecter le mode créationDetect design mode

La propriété DesignMode.IsDesignModeEnabled statique vous indique si l’application est en cours d’exécution dans le générateur d’aperçu.The static DesignMode.IsDesignModeEnabled property tells you if the application is running in the previewer. À l’aide de ce dernier, vous pouvez spécifier le code qui s’exécutera uniquement lorsque l’application est ou n’est pas exécutée dans le générateur d’aperçu: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  
}

Cette propriété est utile si vous initialisez une bibliothèque dans votre constructeur de page dont l’exécution échoue au moment du Design.This property is useful if you initialize a library in your page constructor that fails to run at design time.

Résolution de problèmesTroubleshooting

Si le générateur d’aperçu ne fonctionne pas, vérifiez les problèmes ci-dessous et les Forums Xamarin.Check the issues below and the Xamarin Forums, if the Previewer isn't working.

Le générateur d’aperçu XAML n’affiche pas ou affiche une erreurXAML Previewer isn't showing or shows an error

  • Le démarrage du générateur d’aperçu peut prendre un certain temps. vous verrez «initialisation du rendu» jusqu’à ce qu’il soit prêt.It can take some time for the Previewer to start up - you'll see "Initializing Render" until it's ready.
  • Essayez de fermer et de rouvrir le fichier XAML.Try closing and reopening the XAML file.
  • Vérifiez que votre App classe possède un constructeur sans paramètre.Ensure that your App class has a parameterless constructor.
  • Vérifiez votre version de Xamarin. Forms. il doit s’agir d’au moins Xamarin. Forms 3,6.Check your Xamarin.Forms version - it has to be at least Xamarin.Forms 3.6. Vous pouvez mettre à jour vers la dernière version de Xamarin. Forms via NuGet.You can update to the latest Xamarin.Forms version through NuGet.
  • Vérifiez votre installation de JDK-l’aperçu d’Android nécessite au moins JDK 8.Check your JDK installation - previewing Android requires at least JDK 8.
  • Essayez d’encapsuler toutes les classes initialisées C# dans le code if (!DesignMode.IsDesignModeEnabled)-behind de la page dans.Try wrapping any initialized classes in the page's C# code behind in if (!DesignMode.IsDesignModeEnabled).

Les contrôles personnalisés ne sont pas rendusCustom controls aren't rendering

Essayez de générer votre projet.Try building your project. Le générateur d’aperçu affiche la classe de base du contrôle s’il ne parvient pas à restituer le contrôle, ou si le créateur du contrôle a opté pour le rendu au moment du Design.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. Pour plus d’informations, consultez restituer des contrôles personnalisés dans le générateur d’aperçu XAML.For more information, see Render Custom Controls in the XAML Previewer.