Ah que cela serait pratique de pouvoir modifier le XAML d’une mise en page pendant que l’appli tourne en debug évitant ainsi de tout recompiler pour une coquille ou un changement de couleur… Comment vous ne savez-pas ? Mais si c’est possible ! C’est le “Hot Reload” suivez-moi pour les explications…
Hot Reload !
C’est hot mais ça n’a rien à voir avec le film mensuel de catégorie V de Canal+. Autant le dire tout de suite pour ceux que le confinement doublé de l’arrivée du printemps rendrait disons un peu fébriles !
Le Hot reload c’est le chargement à chaud. Bon là encore ça peut prêter le flan à interprétation je suis d’accord, une fois qu’on ne pense qu’à ça forcément on en voit partout… Le Hot reload consiste donc à recharger ici une page XAML mais “à chaud” donc par opposition à “à froid” (ce qui est d’une grande logique vous constaterez).
Et c’est quoi “à froid” alors ? C’est quand on redémarre de zéro, qu’on arrête le débogue, qu’on bricole le code, qu’on relance la compilation, le transfert vers l’unité mobile etc, jusqu’à voir le résultat s’afficher. ou s’affichier s’exclameront certains tant il est vrai que cela peut être éprouvant (ce qui n’a de sens que si on a le goût des mauvais calembours) !
Le “hot reload” s’oppose donc à ces nombreuses étapes en permettant depuis le débogue de modifier des éléments XAML et de voir immédiatement les changement sur l’affichage de l’émulateur (ou de la machine).
C’est génial et c’est pratique.
Le Hot reload en images
Bon j’ai compris, je n’arriverai pas à vous enlever les mauvaises idées de la tête… On va donc se mater un petit film de hot reload, mais certains seront déçus c’est sûr, quand à ceux qui y prendraient vraiment plaisir je leur conseille de consulter cela va de soi…
Voilà donc à quoi cela ressemble. Rien de bien exceptionnel sauf quand on comprend tout ce que cela sous-tend pour Visual Studio…
Mise en oeuvre
XAML Hot Reload est intégré à Visual Studio 16.3 et Visual Studio pour Mac 8.3. Pour l'activer, accédez à Outils> Options> Xamarin> Hot Reload ou Visual Studio> Préférences> Projets> Xamarin Hot Reload. Dans les dernières versions, au delà donc de 16.4 et 8.4, XAML Hot Reload est activé par défaut pour vous !
Pour les nouveaux projets, les modèles sont configurés pour commencer à utiliser XAML Hot Reload immédiatement. Si vous travaillez sur un ancien projet, assurez-vous d'avoir au moins Xamarin.Forms 4.1. Ensuite, suivez cet organigramme pour revérifier vos paramètres de génération. Pour plus de détails, vous pouvez consulter la documentation XAML Hot Reload .
Utiliser Hot Reload sous MVVM
Le rechargement à chaud XAML fonctionne en rechargeant la vue XAML entière que vous avez modifiée et ses éléments enfants. Dans une version future, l’équipe de Xamarin.Forms souhaite qu'il recharge simplement ce que vous avez changé, mais pour l'instant, une bonne règle de base consiste à définir votre contexte de liaison dans votre code. Si vous définissez le contexte de liaison en C #, il ne sera pas recréé à chaque fois que vous apportez une modification à votre XAML.
Cependant, dans certains cas, XAML a besoin de ce contexte de liaison pour IntelliSense lié à vos liaisons. Si vous le définissez uniquement dans le code behind, vous perdrez IntelliSense. Si vous le définissez en XAML et que vous codez dans le code behind, vous créerez alors ce contexte de liaison deux fois, ce qui ne fonctionne pas! La meilleure façon de gérer cela est avec les données de conception . Avec cette approche vous définissez le contexte de liaison dans votre code et utilisez le préfixe «d:» (c'est-à-dire, “à utiliser au moment du design uniquement”) dans XAML. De cette façon, il n'est configuré qu'une seule fois lors de l'exécution, donc XAML Hot Reload ne rafraîchira pas votre contexte de liaison et vous obtiendrez toujours IntelliSense pendant que vous modifiez vos liaisons XAML. C’est logique mais c’est à relire une ou deux fois pour bien intégrer le concept 
Penons un exemple, voici le code behind :
public DetailsPage(Monkey monkey)
{
InitializeComponent();
BindingContext = new DetailsViewModel(monkey);
}
Ajoutons les informations suivantes dans l’entête de la page XAML :
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:vm="clr-namespace:Monkeys.ViewModels"
Puis ajoutons le code suivant toujours côté XAML :
<d:ContentPage.BindingContext>
<vm:DetailsViewModel />
</d:ContentPage.BindingContext>
Et voilà !
En plus XAML Hot Reload appelle actuellement la méthode OnAppearing() à chaque actualisation, alors soyez vigilant avec ce que contient cette méthode !
Et les ressources ?
XAML Hot Reload ne se limite pas à vos vues et contrôles. Vous pouvez également recharger des ressources dans App.xaml ou dans des dictionnaires de ressources globales. En outre, vous pouvez recharger les modifications apportées à votre AppShell.xaml, où vous configurez la structure d'une application Shell Xamarin.Forms. Je vous conseille fortement la lecture de tous mes posts sur le Shell pour vous faire une meilleure idée de la chose si vous ne maîtriser pas encore cette nouveauté…
Xamarin Forms, Le Shell
Et le complément vidéo https://youtu.be/8Mt6tUzHkDI
Dans les dernières versions de Visual Studio et Visual Studio pour Mac, vous pouvez même recharger les modifications CSS en ligne dans votre XAML et dans un fichier CSS distinct dans votre projet Xamarin.Forms. Mais vous connaissez mon avis sur le mélange de CSS avec Xamarin.Forms… Mais bon ça marche aussi.
Conclusion
L’équipe Xamarin.Forms a laissé entendre qu’elle prépare beaucoup de nouveautés pour 2020, cela nous permettra d’occuper les longues soirées d’été si nous sommes encore confinés et sinon, il sera toujours temps de mettre en application tous ces ajouts pour le plus grand bonheur de nos utilisateurs (oui, car même les facilités de débogues profitent aux utilisateurs en nous donnant plus de moyens et de temps pour faire les choses essentielles) !
Alors… Stay Tuned !