Hot Reload for Xamarin.Forms comes to Rider

Posted on by 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.

1.-Todo-Solution

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.

2.-Todo-Views

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. 

3. TodoItemPage XAML

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.

5. hot reload in action

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>

While the colors are defined in XAML, they are used in C# and set in the constructor of our app. Changes to the color settings, while in XAML, will not be reflected until we restart our debugging session.
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.

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!

Comments below can no longer be edited.

7 Responses to Hot Reload for Xamarin.Forms comes to Rider

  1. Emanuel Vintilă says:

    March 27, 2020

    What about hot reload for WPF applications?

    • Khalid Abuhakmeh says:

      March 30, 2020

      Hello Emanuel. I believe WPF is not supported by Xamarin.Forms Hot Reload. The Rider IDE cannot do much since the Hot Reload is part of the library itself. There are third-party libraries that may be able to support hot reload but their results may vary.

  2. Olo says:

    April 16, 2020

    Getting class cast Exceptions

    System.InvalidCastException: Specified cast is not valid.
    at (wrapper castclass) System.Object.__castclass_with_cache(object,intptr,intptr)
    at System.Reflection.RuntimePropertyInfo.GetterAdapterFrame[T,R] (System.Reflection.RuntimePropertyInfo+Getter`2[T,R] getter, System.Object obj) [0x00000] in /Users/builder/jenkins/workspace/archive-mono/2019-10/android/release/mcs/class/corlib/System.Reflection/RuntimePropertyInfo.cs:362
    at System.Reflection.RuntimePropertyInfo.GetValue (System.Object obj, System.Object[] index) [0x0006c] in /Users/builder/jenkins/workspace/archive-mono/2019-10/android/release/mcs/class/corlib/System.Reflection/RuntimePropertyInfo.cs:414

  3. Emil says:

    April 22, 2020

    Just downloaded latest update and tried. Not Working at all. I tried to change a simple backgroundcolor and no change. It works on VS2019 if it is using same logic. Either this article is incomplete or feature is not ready.
    I tried even using the default template from VS 2019 without changing anything and run in android. not working

  4. Eric says:

    May 26, 2020

    I’ve been struggling with this for days. I even created a ticket. It doesn’t work. I need to use Visual Studio for hot reload. All I get in Rider is “Specified cast is not valid.”.

    I love working with Rider, but I can’t because of this. Please fix it.

    • Khalid Abuhakmeh says:

      May 26, 2020

      Hi Eric. Sorry for the issues. We’ll take a look at the issue and see if we resolve them as soon as we can.

      • Khalid Abuhakmeh says:

        May 26, 2020

        Eric, I’ve searched our issue tracker and was unable to find your issue. Do you have a link to the issue you created? I can escalate it with the team.

Subscribe

Subscribe to .NET Tools updates