Announcing XAML Hot Reload for Xamarin.Forms

Pierce Boggan

1/8/2020: XAML Hot Reload is now stable in both Visual Studio and Visual Studio for Mac! Learn more about it in our documentation.

8/15/19: XAML Hot Reload is in Public Preview! Learn more at https://aka.ms/XAMLHotReload.

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 is currently in public preview:

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!

32 comments

Discussion is closed. Login to edit/delete existing comments.

  • Jeremy Bell 0

    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.

    • Pierce BogganMicrosoft employee 0

      Hi Jeremy – XAML is just the beginning. We’d love to talk to you more about your scenarios and why C#/F# code reloading is important to you. Drop us an email: piboggan@microsoft.com / maleger@microsoft.com.

    • Miha Markic 0

      Because Xamarin doesn’t support interpreted code. Yet.

  • Peter Edwards 0

    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.

    • Pierce BogganMicrosoft employee 0

      Lovely, thanks for the feedback Peter! I’d love to know your feedback as you dive into Xamarin (in general and for XAML Hot Reload for Xamarin.Forms). Don’t hesitate to reach out to us at piboggan@microsoft.com / maleger@microsoft.com with any questions, thoughts, comments, or feedback as you begin your Xamarin journey.

  • Juan Rodríguez 0

    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!

  • LeRoy Gumede 0

    Whats the difference between this, XAML Previewer for Xamarin.Forms and Xamarin Live Player ?

    • Pierce BogganMicrosoft employee 0

      Great question! When building your application’s user interface, there are two main modes: design-time and run-time. Both have different benefits. Design-time includes everything that happens in the IDE when authoring your code: IntelliSense, property panel, and XAML Previewer for Xamarin.Forms. Run-time includes making edits to your running application on an iOS simulator, Android emulator, or physical device.

      Using the XAML Previewer, you can iterate on your Xamarin.Forms XAML UI without having to build, deploy, and debug your application. We hear folks like using this for prototyping screens. Because your app is not built and running, you don’t use your real data or don’t have navigation context.

      Using XAML Hot Reload for Xamarin.Forms, you iterate on your UI in a running application. Instead of having to stop debugging, make a code change, and redeploy, you now can make edits to your XAML, hit save, and the edits will applied to your running application.

      The Xamarin Live Player was a tool for iterating on your UI in a running application. This preview for Live Player has ended in favor of XAML Hot Reload for Xamarin.Forms and XAML Previewer for Xamarin.Forms.

  • James Wil 0

    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

    • Ran Karat 0

      Lol, you have zero clue about Xaml. WPF Xaml is like drugs, you couldn’t stop using it and enjoy.  Xaml and C# its like man and woman on this kind of Apps, you can’t separate them, once you’ll be familiar with it, you’ll be addicted.

      • Juan Rodríguez 0

        yep, have to agree on that one

    • Pierce BogganMicrosoft employee 0

      Definitely interested in learning more about your UI development preferences, James. Feel free to send me an email at piboggan@microsoft.com.

    • Emil Alipiev 0

      talk about yourself. many of us love xaml. only reason i dont use flutter is you have to write spagetthi code in code while xamarin has a perfect n tier structure with mvvm.

      • Vincent Hoogendoorn 0

        With some simple helpers you can format declarative C# to have similar readability as XAML; eg see examples in CSharpForMarkup

  • Hugo Vladimir Felix Anaya 0

    Wow, similar to WPF! 🙂

  • Óscar Baños Fernández 0

    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. 

  • Pravin Patil 0

    Awesome. This will easily save 30-40% development time while developing new pages or improving look and feel of existing pages. Thank you.

  • Dino Buljubasic 0

    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!

  • Viktor Sze 0

    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.

Feedback usabilla icon