Hot Reload for Xamarin.Forms comes to Rider

Khalid Abuhakmeh

The Rider team has been hard at work, and we are happy to announce that Xamarin.Forms XAML Hot Reload is coming in Rider 2020.1!

In this post, we’ll see how this makes developing our Xamarin apps more enjoyable. We’ll also walk through some of the limitations of XAML Hot Reload, as well as list some of the XAML fixes and improvements in Rider 2020.1.

What Is Xamarin.Forms XAML Hot Reload?

Xamarin.Forms XAML Hot Reload allows us to make XAML edits during debugging and see those changes reflected immediately in our running application. XAML Hot Reload works on Android and iOS platforms, but is currently not available for Universal Windows Platform (UWP) apps or macOS apps.

Any changes to XAML will affect the UI, but all other application states will be maintained. This includes navigation state and in-memory state. In other words: we can iterate faster while not losing our place within our app!

Getting Started

Download & install the latest Rider 2020.1 EAP, which now comes with Hot Reload. That’s it!

Xamarin.Forms Hot Reload is part of the latest Xamarin.Forms packages. In this post, we’ll be using the Todo solution found in the Xamarin.Forms Samples, for those who may want to follow along.

With this sample app, we’ll need to open the Todo solution and unload the UWP app. UWP apps do not support Hot Reload and cannot be built in non-Windows environments, so let’s get rid of it.

Hot Reload In Action

The Todo project comes with three XAML views: TodoItemPage, TodoListPage, and App.

We’ll be looking at two of the views specifically, TodoItemPage and App, to show what works and what doesn’t.

Opening the TodoItemPage view, we can see references to labels, text boxes, a toggle, and a few buttons. 

Let’s move some of the UI elements around to see how Hot Reload works, making sure we are running our application in Debug mode.

As we can see, when moving the UI elements, the iOS emulator flashes and reloads the XAML changes immediately. The behavior works exactly the same within the Android Simulator.

Now let’s see a limitation of the Hot Reload feature utilizing a different view. In the App view, we can see two settings for primaryGreen and primaryDarkGreen found in a resource dictionary.

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Todo.App">
    <Application.Resources>
        <ResourceDictionary>
            <Color x:Key="primaryGreen">#91CA47</Color>
            <Color x:Key="primaryDarkGreen">#6FA22E</Color>
        </ResourceDictionary>
    </Application.Resources>
</Application>

public App()
{
    InitializeComponent();

    var nav = new NavigationPage(new TodoListPage());
    nav.BarBackgroundColor = (Color)App.Current.Resources["primaryGreen"];
    nav.BarTextColor = Color.White;

    MainPage = nav;
}

Known Limitations

While this feature is powerful when designing Xamarin.Forms applications, there are a set of known limitations that we should consider. These limitations are with the technology itself, not with Rider.

• Some target platforms currently do not support Hot Reload, primarily, UWP and macOS.
• Any structural changes to the project will not be reflected during Hot Reload, for example adding NuGet Packages or refactoring files.
• Using the linker will cause Hot Reload to fail.
• Hot Reload cannot reload changes to C# code. Any code-behavioral changes will require a rebuild and restart.

Read more about the limitations of XAML Hot Reload in the official Microsoft Documentation.

General Improvements and Bug Fixes

While XAML Hot Reload is an enormous quality-of-life improvement, Rider 2020.1 also brings some other smaller improvements and bug fixes that should make our XAML work much more pleasant.

• Invalid ‘Wrong name case’
• Incorrect data context inference in style 
• Rider doesn’t recognize Xamarin.Forms.Xaml.RelativeSourceExtension elements 
• XmlnsDefinitionAttribute is not respected in XAML editor 
• [UWP] Conditional XAML not recognized
• XAML Datagrid ItemsSource column binding not showing IntelliSense when using a nested element
• Xamarin.Forms Picker ItemDisplayBinding: Cannot resolve property ‘Display’ in data context of type ‘MyViewModel’ 
• Resource in a XAML file with a slash in its name is not recognized correctly
• Xamarin Forms: does not recognize d:BindingContext Designer Instance
• WPF DataGridView binding warning error
• Rider XAML editor highlights x:Static directives as errors 
• Resolving CustomResource binding in Xaml

From all of us Xamarin lovers at JetBrains to the XAML folks out there: we hope you try out the latest Rider 2020.1  EAP features. Your feedback is welcome!