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.
  
  
  
  
• In this dialog box, we have to search for Xamarin.Forms project.
  
  
  
  
• Select Mobile App (Xamarin.Forms) and click Next.
  
  
  
  
• After clicking the "Next" button, create a new dialog box.
  
  
  
  
• 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.

 

 

 

Select Online from the left side menu and search and select Xamarin.HotReload Extensions.

 

 

 

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…".

 

 

 

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. 

namespace YourNamespace
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
#if DEBUG
            HotReloader.Current.Run(this);
#endif
            MainPage = new NavigationPage(new MainPage());
        }
    }
}

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.

 

 

I hope this article is useful for all Xamarin developers. Happy coding!!!!!