How To Start Hot Reloading In XAML

In thIs article, I will show you how to start hot reloading in XAML.

This article is very important for Xamarin.Forms developers. In this article, you will learn how to perform hot reloading in XAML The Xamarin Community announced XAML Hot Reload for Xamarin.Forms, during the Xamarin Developer Summit. With this hot reloading, we take quick action in our development and design. Basically, Hot Reloading speeds up your UI development and makes it easier to build, experiment, and iterate your UI.
 
It is beneficial because Hot Reloading easily applies the changes in your code without new configuration. To perform hot reloading, we need to VS2019 in our system so please make sure to install the Visual Studio version 2019 on your system.
 
So first, let us create a new project by going to -
  • File>> new project. Here, we get an attractive dialog box.

    How To Start The Hot Reloading In XAML

  • In this dialog box, we have to search for Xamarin.Forms project.

    How To Start The Hot Reloading In XAML

  • Select Mobile App (Xamarin.Forms) and click Next.

    How To Start The Hot Reloading In XAML

  • After clicking the "Next" button, create a new dialog box.

    How To Start The Hot Reloading In XAML

  • Here, we can see a new Cross-Platform App Dialog Box. Select Blank Project.
  • Select Android and iOs and then click OK.
Now, we need to select the Extensions from the menu bar. Click the Manage Extensions here, that opens another dialog.
 
How To Start The Hot Reloading In XAML 
 
Select Online from the left side menu and search and select Xamarin.HotReload Extensions.
 
How To Start The Hot Reloading In XAML 
 
This downloads the extension. Let us now restart the Visual Studio 2019.
 
Now, we need to install the NuGet package in our project. So, we need to right-click on the solution and choose "Manage NuGet Packages For Solution…".
 
How To Start The Hot Reloading In XAML 
 
Now, here, a new dialog is open. Let us search again for Xamarin.Hotreload and select the NuGet package. Then, choose your platform (Android and iOS) and install the packages.
 
Now, let us make the final initialization in app.xaml.cs page like this. 
  1. namespace YourNamespace  
  2. {  
  3.     public partial class App : Application  
  4.     {  
  5.         public App()  
  6.         {  
  7.             InitializeComponent();  
  8. #if DEBUG  
  9.             HotReloader.Current.Run(this);   
  10. #endif  
  11.             MainPage = new NavigationPage(new MainPage());  
  12.         }  
  13.     }  
  14. }  
Now, let us go to the main Page and change some background color and add entries.
 
Well, it's working like the below GIF image.
 
How To Start The Hot Reloading In XAML
 
I hope this article is useful for all Xamarin developers. Happy coding!!!!!