News

XAML Hot Reload Comes to .NET MAUI in VS Code

XAML Hot Reload for .NET MAUI has been available for Visual Studio for a while now, but now it's finally come to the IDE's open-source-based, cross-platform little cousin, Visual Studio Code.

Hot Reload allows developers to see the changes they make in their code almost instantly in their running application, without needing to manually stop and restart the application.

Longtime .NET developer James Montemagno announced the XAML Hot Reload functionality in a video today (May 31), explaining it's now available in the pre-release version of the .NET MAUI VS Code extension, itself still in the Preview stage.

'.NET MAUI XAML Productivity Boost in VS Code is HERE!!! Hot Reload & IntelliSense!!!'
[Click on image for larger view.] '.NET MAUI XAML Productivity Boost in VS Code is HERE!!! Hot Reload & IntelliSense!!!' (source: YouTube).

Among the "known limitations" of that tool in the Stable version is: "XAML and .NET Hot Reload aren't supported yet."

Known Limitations in Stable Version of .NET MAUI Extension for VS Code
[Click on image for larger view.] Known Limitations in Stable Version of .NET MAUI Extension for VS Code (source: Microsoft).

But the changelog for the pre-release extension now lists: "Preview support for XAML Hot Reload. It's on by default, but can be disabled if desired via the 'Enables XAML Hot Reload while debugging' user preference setting. iOS physical devices aren't yet supported, but iOS simulator, Catalyst, Android, and WinUI should all work."

Changelog for Pre-release Version of .NET MAUI Extension for VS Code
[Click on image for larger view.] Changelog for Pre-release Version of .NET MAUI Extension for VS Code (source: Microsoft).

As the XAML Hot Reload is on by default in the pre-release version, all developers need to do is open up the Stable extension in VS Code and click the button to switch to the pre-release version. This also needs to be done for the integrated C# and C# Dev Kit extensions (after which Montemagno recommends a VS Code restart to make sure the update is applied).

Montemagno also demonstrated how IntelliSense works in XAML files in VS Code in the latest Stable version of the .NET MAUI extension, showing how it can be used to quickly add a label to a page in a .NET MAUI app with help of the pre-Copilot intelligent coding assistant.

As noted above, Hot Reload functionality has been available in the Visual Studio IDE for years, as we detailed how Microsoft's "Hot Reload Everywhere" push was furthered way back in 2021 in a .NET 6 preview. That same year, Microsoft detailed Visual Studio 2019's "XAML Hot Reload for Xamarin.Forms," the precursor to .NET MAUI.

"Well, that's how you enable the brand-new XAML IntelliSense," Montemagno said in concluding his video. "Just update the extension. And then if you want to try out XAML Hot Reload, go ahead and install the pre-release version of the .NET MAUI extension and the C# extensions as well. There's great ways of getting the team feedback, so definitely give them feedback as you're experimenting around and playing it with your applications."

When asked by a viewer about when the pre-release version would become available with the new functionality, Montemagno replied: "Depends on feedback. To be honest there is so little reason not to flip the switch to try it out. You can go back to Stable in 5 seconds." As he said in the video, that's pretty much how he always works anyway.

"Nice! So awaited feature," said one video comment.

About the Author

David Ramel is an editor and writer for Converge360.

comments powered by Disqus

Featured

Subscribe on YouTube