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

  • Article

Afficher vos Xamarin.Forms dispositions affichées au fur et à mesure que vous tapez

Avertissement

L’aperçu XAML a été déconseillé dans Visual Studio 2019 version 16.8 et Visual Studio pour Mac version 8.8, et remplacé par la fonctionnalité de Rechargement à chaud XAML dans Visual Studio 2019 version 16.9 et Visual Studio pour Mac version 8.9. En savoir plus sur les Rechargement à chaud XAML dans la documentation.

Vue d’ensemble

L’aperçu XAML vous montre comment votre Xamarin.Forms page XAML se présente sur iOS et Android. Lorsque vous apportez des modifications à votre code XAML, vous les verrez afficher un aperçu immédiatement en même temps que votre code. L’aperçu XAML est disponible dans Visual Studio et Visual Studio pour Mac.

Mise en route

Visual Studio 2019

Vous pouvez ouvrir l’aperçu XAML en cliquant sur les flèches du volet d’affichage fractionné. Si vous souhaitez modifier le comportement d’affichage fractionné par défaut, utilisez la boîte de dialogue Options > d’outils > Xamarin >Xamarin.Forms XAML Previewer. Dans cette boîte de dialogue, vous pouvez sélectionner l’affichage de document par défaut et l’orientation fractionnée.

Xamarin.Forms Options d’aperçu dans Visual Studio

Lorsque vous ouvrez un fichier XAML, l’éditeur ouvre la taille complète ou en regard de l’aperçu, en fonction des paramètres sélectionnés dans la boîte de dialogue Options > d’outils > Xamarin >Xamarin.Forms XAML Previewer. Toutefois, le fractionnement peut être modifié pour chaque fichier dans la fenêtre de l’éditeur.

Contrôles d’aperçu XAML

Choisissez si vous souhaitez afficher votre code, l’aperçu XAML ou les deux en sélectionnant ces boutons dans le volet d’affichage fractionné. Le bouton central échange le côté de l’aperçu et de votre code :

Xamarin.Forms Contrôles d’aperçu pour basculer entre la conception, la source et la vue fractionnée dans Visual Studio

Vous pouvez modifier si l’écran est fractionné verticalement ou horizontalement, ou réduire complètement un volet :

Xamarin.Forms Contrôles d’orientation du volet d’aperçu dans Visual Studio

Activer ou désactiver l’aperçu XAML

Vous pouvez désactiver l’aperçu XAML dans la boîte de dialogue Outils Options > Xamarin >Xamarin.Forms XAML Previewer en sélectionnant l’éditeur XML par défaut comme éditeur XAML par défaut.> Cela désactive également la boîte à outils Document Outline, Property Panel et XAML. Pour réactiver l’aperçu XAML et ces outils, remplacez l’éditeur Xamarin.Forms XAML par défaut par l’aperçu.

Visual Studio pour Mac

Le bouton Aperçu s’affiche dans l’éditeur lorsque vous ouvrez une page XAML. Affichez ou masquez l’aperçu en appuyant sur les boutons Aperçu ou Fractionnement dans la partie inférieure gauche de n’importe quelle fenêtre de document XAML :

Xamarin.Forms Aperçu activé avec le bouton aperçu ou fractionné

Remarque

Dans les versions antérieures de Visual Studio pour Mac, le bouton Aperçu se trouvait en haut à droite de la fenêtre.

Activer ou désactiver l’aperçu XAML

Vous pouvez désactiver l’aperçu XAML dans la boîte de dialogue XAML de l’éditeur > de texte des préférences > Visual Studio > en sélectionnant l’éditeur XML par défaut comme éditeur XAML par défaut. Cela désactive également la boîte à outils Document Outline, Property Panel et XAML. Pour réactiver l’aperçu XAML et ces outils, remplacez l’éditeur Xamarin.Forms XAML par défaut par l’aperçu.

Options d’aperçu XAML

Les options situées en haut du volet d’aperçu sont les suivantes :

  • Android : afficher la version Android de l’écran
  • iOS : afficher la version iOS de l’écran (Remarque : Si vous utilisez Visual Studio sur Windows, vous devez être associé à un Mac pour utiliser ce mode)
  • Appareil - Liste déroulante des appareils Android ou iOS, y compris la résolution et la taille de l’écran
  • Portrait (icône) : utilise l’orientation portrait pour l’aperçu
  • Paysage (icône) : utilise l’orientation paysage pour la préversion

Détecter le mode de conception

La propriété statique DesignMode.IsDesignModeEnabled vous indique si l’application est en cours d’exécution dans l’aperçu. En l’utilisant, vous pouvez spécifier du code qui s’exécute uniquement lorsque l’application est ou n’est pas en cours d’exécution dans l’aperçu :

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 qui ne parvient pas à s’exécuter au moment du design.

Dépannage

Vérifiez les problèmes ci-dessous et les forums Xamarin, si l’aperçu n’est pas opérationnel.

L’aperçu XAML n’affiche pas ou n’affiche pas d’erreur

  • Le démarrage de l’aperçu peut prendre un certain temps. Vous verrez « Initialiser le rendu » jusqu’à ce qu’il soit prêt.
  • Essayez de fermer et de rouvrir le fichier XAML.
  • Vérifiez que votre App classe a un constructeur sans paramètre.
  • Vérifiez votre Xamarin.Forms version : il doit s’agir d’au moins Xamarin.Forms 3.6. Vous pouvez effectuer une mise à jour vers la dernière Xamarin.Forms version via NuGet.
  • Vérifiez votre installation JDK : la préversion d’Android nécessite au moins JDK 8.
  • Essayez d’encapsuler les classes initialisées dans le code C# de la page.if (!DesignMode.IsDesignModeEnabled)

Les contrôles personnalisés ne sont pas rendus

Essayez de créer votre projet. L’aperçu affiche la classe de base du contrôle s’il ne parvient pas à afficher le contrôle ou si le créateur du contrôle a refusé le rendu du temps de conception. Pour plus d’informations, consultez Render Custom Controls in the XAML Previewer.