Announcing XAML Hot Reload for Xamarin.Forms

Pierce Boggan

Pierce

Today at Xamarin Developer Summit, we announced XAML Hot Reload for Xamarin.Forms, which enables you to make changes to your XAML UI and see them reflected live, without requiring another build and deploy.

XAML Hot Reload for Xamarin.Forms speeds up your development and makes it easier to build, experiment, and iterate on your user interface. And this means that you no longer have to rebuild your app each time you tweak your UI – it instantly shows you your changes in your running app!

When your application is compiled using XAML Hot Reload, it works with all libraries and third-party controls. It will be available for iOS and Android in Visual Studio 2019 and Visual Studio 2019 for Mac. This works on all valid deployment targets, including simulators, emulators, and physical devices.

XAML Hot Reload will be available later in 2019, but you can sign up to participate in the preview phase:


What’s Supported?

XAML Hot Reload for Xamarin.Forms plugs into your existing workflow to save you time and make you more productive. Today, when you want to make a change to your XAML, you must build, deploy, and debug again. Now, simply save your XAML file and see the changes reflected live on your deployment target, enabling you to spend less time building and deploying, and more time building mobile apps.

You don’t need to do anything special to use Hot Reload; there are no extra packages or scaffolding code. Build and deploy your app as you normally would in Visual Studio or Visual Studio for Mac to an iOS or Android emulator, simulator, or physical device. Because XAML Hot Reload for Xamarin.Forms uses the debugger and not a network connection, it works reliably in complex enterprise networks and no-connectivity environments. Edit your XAML and hit save. Upon reload, your navigation state will be maintained. If you use the MVVM pattern, UI state bound to your view model will remain intact across reloads.


XAML Hot Reload Image
This announcement also supports updates to all valid XAML types, including pages, Application, and Shell. For example, if you edit a file called MyControl.xaml and save, all pages that reference that control will have the changes you made automatically applied.

XAML Hot Reload is resilient to typos and unsupported edits, like IntelliSense quick-actions that change the code-behind. Prior to reloading your changes, Visual Studio ensures the changes you made are valid. If your edits contain invalid changes, the change won’t be applied in your app and the XAML editor will display squiggles to let you know. You can also check to see if your reload was successful in the Output window in Visual Studio.

It’s important to us that XAML Hot Reload for Xamarin.Forms works with all types of applications, regardless of complexity. We have partnered with control vendors and open source project maintainers such as Telerik, Infragistics, Grial UI Kit, Prism, and Syncfusion to ensure you have a great experience working with these projects with XAML Hot Reload for Xamarin.Forms.


Driven by Your Feedback

From the start, your feedback has driven the development of this project. In the past year, the Xamarin product team has distributed over 30 surveys, collected over 3,000 individual survey responses, and conducted over 275 interviews with developers like you. You told us the tooling should be stable, performant, and assist in making you more productive building mobile apps.

In numerous surveys and interviews, you told us the most impactful way to make you more productive was to reduce the amount of time spent in the “inner development loop” – i.e. the amount of time you spend to build, deploy, and debug each change. When we dove into what types of changes you made most, we heard that tweaking your Xamarin.Forms UI in XAML was most popular.

We conducted over 50 concept-value tests with you on XAML Hot Reload for Xamarin.Forms, ensuring that the concept would make your inner development loop more productive. We also partnered with several large Xamarin customers, Visual Studio partners, and Xamarin MVPs to ensure that this experience meets your expectations. Finally, we brought developers into our User Experience lab in Seattle to use XAML Hot Reload for Xamarin.Forms and validate the experience was intuitive for all developers.

Thank YOU for continuing to give our team valuable feedback, from spending ten minutes on a survey to joining our team for an interview. This feedback not only drives building new features for you from problem to solution, but also helps to shape the overall product roadmap. Next time we reach out with a request for feedback, please respond; we are listening.

What’s Next?

During our private preview phase, we will continue to iterate on XAML Hot Reload to ensure it meets your needs and exceeds the expectations you have for fundamentals such as quality and performance. When you tell us it’s ready, it will be built into a future Visual Studio and Visual Studio for Mac release.

In addition to ensuring we meet quality and performance goals, the following items are also on our roadmap for XAML Hot Reload:

  • Incremental reloading: Only reload the controls or properties that have been changed
  • Simultaneous reloads: Reload XAML for multiple platforms being debugged at the same time
  • Improved status monitoring: An improved UX for displaying “rude” edits, or edits that contain invalid changes for reload
  • CSS: Styling updates to cascading style sheets will be applied at reload

XAML is just the beginning of Xamarin’s hot reload story. We will continue to focus our roadmap on items that you tell us are most important to you. While you told us XAML Hot Reload would be the most immediate way we could benefit your productivity building Xamarin.Forms applications in Visual Studio, we are still continuing to explore additional opportunities.

Register Today

We invite you to sign up for the private preview so that you can try XAML Hot Reload for Xamarin.Forms. We will continue to accept new developers into the preview program in weekly “ring” releases, ensuring that product reliability and performance is maintained as more developers preview Hot Reload. Those accepted into the private preview may receive communications from our team asking for feedback; we want XAML Hot Reload for Xamarin.Forms to meet your expectations and reflect your priorities, so please take a few minutes out of your day to respond. Your feedback will help save Xamarin developers countless hours in the future!

If you have any questions, don’t hesitate to reach out to the XAML Hot Reload for Xamarin.Forms team at hotreload-team@microsoft.com.

Happy reloading!

Pierce Boggan
Pierce Boggan

Senior Program Manager, Mobile Developer Tools

Follow Pierce   

25 Comments
Avatar
Jeremy Bell 2019-07-11 07:56:06
Cool that MS is looking into this but disappointed that they decided to limit hot reload to XAML changes only. A full code hot reload solution would work for both XAML and other code changes, including code behind and viewmodel changes. I write a lot of my UI in declarative code (F# and a a little C#) and prefer it to XAML but this hot featurereload  won't work at all for that use case. Edit: By comparison, Flutter has full stateful code hot reloading support today. It's limited in a few ways but it still goes a lot further than XAML hot reload.
Avatar
Peter Edwards 2019-07-11 08:19:25
This is fantastic news and a welcome addition.  I've danced around a few other cross platform solutions and love C# but wanted a faster Xamarin workflow esp for layouts and general tweaking of things, looking forward to trying this it out and finally diving into Xamarin.
Juan Rodríguez
Juan Rodríguez 2019-07-11 08:52:49
This looks very promising! I'm hoping on tying it soon. This feels like good ol' taps in the back from the Xamarin Dev team. Thanks a lot and keep on bringing this great features to the community!
Avatar
LeRoy Gumede 2019-07-11 09:14:38
Whats the difference between this, XAML Previewer for Xamarin.Forms and Xamarin Live Player ?
James Wil
James Wil 2019-07-11 12:25:50
Can we get rid of XAML already ?  Look at Compose and SwiftUI, you do all that directly in code, having to write jump between CS + XAML is annoying as hell, please save us time and completly ditch XAML
Avatar
anonymous 2019-07-11 12:51:18
This comment has been deleted.
Avatar
Hugo Vladimir Felix Anaya 2019-07-11 12:55:16
Wow, similar to WPF! :)
Avatar
Óscar Baños Fernández 2019-07-12 00:09:17
I think that the right way is the same developing structure in Desktop and Mobile, to adapt quickly and easily, I'm developer in WPF and ASP Core and when started in Xamarin was easy for this reason. seems good, thanks. 
Avatar
Pravin Patil 2019-07-12 05:06:37
Awesome. This will easily save 30-40% development time while developing new pages or improving look and feel of existing pages. Thank you.
Avatar
Dino Buljubasic 2019-07-12 07:22:15
This is phantastic!  Thank you, thank you, thank you!  It is great to hear you listen on this one!!!  Looking forward to try and use it.  It is a functionality that brings back RND into Xamarin.  Having to 1) do the XAML modification, 2) build app, 3) log into it (if you have to), 4) navigate to the location you modified and only after so many steps find out your changes werent good was a tedious, time consuming, irritatingly repetitive task.  Thanks again!
Avatar
Viktor Sze 2019-07-12 16:23:26
Hi guys, thanks for this! Is this somehow related/based on LiveXAML? I'm asking because LiveXAML works perfectly for me, so I'm wondering what we can expect. I see couple similarities between Hot Reload and LiveXAML.
Avatar
anonymous 2019-07-14 21:35:20
This comment has been deleted.
Avatar
Agus Saputra Sijabat 2019-07-15 20:50:34
This comment has been deleted by Pierce Boggan.
Avatar
Ahmed Abdulmonem 2019-07-16 01:57:08
Hi Pierce. xamarin forms previewer does not work with apps that uses efcore, are there any plans to solve this issue.
Avatar
Andriy Savin 2019-07-16 02:50:36
Hi, this feature is so awaited! But is there a chance to see a fully-functional UI designer, where you can not only preview the UI but also edit it with mouse, property editor and all that goodness which is available to WPF developers?