Hot Reload Support

[danielftz]

As Maui GA is coming up, are there any plans to support Hot Reload for Markup in the future?

[pictos]

@danielftz the Hot Reload should work with the Markup package, since it's just C# code.

[HobDev]

I reported the issue on Visual Studio Developer Community. You can vote on the issue to increase it's priority.

[danielftz]

I can confirm that I see the same behaviour. If you navigate back and then to the settings again it does show the changes. The same is also true if you swap the entire contents of the SettingsPage with something like:

public SettingsPage(SettingsViewModel settingsViewModel) : base(settingsViewModel, "Settings")
{
    var label = new Label();
    label.Text = "Hello world";
    Content = label;
}

Are you saying I don't need to click on the "Hot reload" icon and just navigate back and then forward again after file save?

[bijington]

@danielftz no sorry you still need to click the Hot Reload button. I just noticed that the code changes do reflect in the application when you navigate away and back. So you don't need to restart the application, I'm not sure if this is much more helpful than restarting at least in the sample app scenario.

I did try moving the code creation elsewhere to see if it was because the constructor code isn't reloaded but I haven't found anything useful so far.

It does look like a tooling issue as the sample shows the same issue if I don't use any of the toolkits functionality.

[danielftz]

@danielftz no sorry you still need to click the Hot Reload button. I just noticed that the code changes do reflect in the application when you navigate away and back. So you don't need to restart the application, I'm not sure if this is much more helpful than restarting at least in the sample app scenario.

I did try moving the code creation elsewhere to see if it was because the constructor code isn't reloaded but I haven't found anything useful so far.

It does look like a tooling issue as the sample shows the same issue if I don't use any of the toolkits functionality.

But when you click hot reload, are you not prompted to reload the app? Or should I just ignore it and the changes still apply?

[bijington]

No I do not see a prompt to reload the app

[brminnick]

Hey Gang! Quick update - I am meeting Microsoft's C# Hot Reload team next week to discuss this issue. Hopefully they'll give us some insight into best practices around supporting Hot Reload, and, if so, I'll be able to submit a PR adding Hot Reload support 🤞

[brminnick]

Posting a quick update from Bret Johnson (MSFT FTE) to share the links to resources he provided:

Hi Brandon,

Thanks much for those specifics. So there are a few things here:

For control authors, Tim Miller is planning to create some doc with guidance on what they need to do to support XAML Hot Reload well. FYI on that, for awareness, but it’s separate from what it seems like you’re asking about here – Hot Reload support with declarative C# UI.

For the best experience with hot reload in C# for Markup UI, in brief there should be a MetadataUpdateHandler, like described in David Ortinau’s blog post C# UI and .NET Hot Reload - A Match Made in .NET MAUI - DEV Community, and the C# for Markup architecture should support doing the right thing, refreshing the UI when the code that implements that UI changes (as indicated with a MetadataUpdateHandler notification). Vincent’s code does that here, I know: CSharpForMarkup/HotReloadManager.cs at master · VincentH-Net/CSharpForMarkup · GitHub, refreshing the currently displayed page whenever the code changes. That simple approach should work well in most case, I think.

Looking forward to chatting.

Bret Johnson

[HobDev]

I want to take benefit of C# Hot Reload to build C# UI. So, I put the Content under Build Method like void Build()=>Content= new Grid {};
But when I call the Build() method from OnNavigatedTo() method it gives the error:

The name Build does not exist in the current context

In the same way as in the C# UI and .NET Hot Reload - A Match Made in .NET MAUI - DEV Community , I define the build method in constructor of the contentpage. Than call it from the OnNavigatedTo().

I can't find out the mistake in my approach.

[brminnick]

C# Hot Reload support is finally here! Well...almost - the PR is open!! #232

Check out the PR and let me know what you think!

One downside of C# Hot Reload is that it doesn't update the visible .NET MAUI UI for us automatically. It will update the underlying C# code, but something needs to tell .NET MAUI to reload the page.

You could always click C# Hot Reload in Visual Studio, then navigate away from the current page, and navigate back to it to see the changes. But we can't tell .NET MAUI to invalidate the current page/view, the .NET MAUI engineering team would need to bake that feature into the framework.

Since every app is different, we think it's best in this initial release to defer to the user to update their own UI. To handle the Hot Reload event yourself, you just need to implement ICommunityToolkitHotReloadHandler and add it in MauiProgram.CreateMauiApp():

builder.Services.AddSingleton<ICommunityToolkitHotReloadHandler, MyHotReloadHandler>();

I've included this example in the Sample App that we'll include in the official documentation as a starting point for devs looking to implement ICommunityToolkitHotReloadHandler:

using System.Diagnostics.CodeAnalysis;

namespace CommunityToolkit.Maui.Markup.Sample;

class HotReloadHandler : ICommunityToolkitHotReloadHandler
{
	public async void OnHotReload(IReadOnlyList<Type> types)
	{
		if (Application.Current?.MainPage is not Page mainPage)
		{
			return;
		}

		foreach (var type in types)
		{
			if (type.IsSubclassOf(typeof(Page)))
			{
				if (mainPage is AppShell shell)
				{
					var visiblePage = shell.CurrentPage;

					await mainPage.Dispatcher.DispatchAsync(async () =>
					{
						await Shell.Current.GoToAsync(type.Name, false);
						Shell.Current.Navigation.RemovePage(visiblePage);
					});

					break;
				}
				else
				{
					if (TryGetModalStackPage(out var modalPage))
					{
						await mainPage.Dispatcher.DispatchAsync(async () =>
						{
							await mainPage.Navigation.PopModalAsync(false);
							await mainPage.Navigation.PushModalAsync(modalPage, false);
						});
					}
					else
					{
						await mainPage.Dispatcher.DispatchAsync(async () =>
						{
							await mainPage.Navigation.PopAsync(false);
							await mainPage.Navigation.PushAsync(modalPage, false);
						});
					}

					break;
				}
			}
		}
	}


	static bool TryGetModalStackPage([NotNullWhen(true)] out Page? page)
	{
		page = Application.Current?.MainPage?.Navigation.ModalStack.LastOrDefault();
		return page is not null;
	}
}