Announcing XAML Hot Reload for Xamarin.Forms

Pierce Boggan

Pierce

Update 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!

Pierce Boggan
Pierce Boggan

Senior Program Manager, Mobile Developer Tools

Follow Pierce   

34 comments

  • Avatar
    Jeremy Bell

    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

    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

    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!

    • Pierce Boggan
      Pierce Boggan

      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
    James Wil

    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
    Óscar Baños Fernández

    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

    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

    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

    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
    Ahmed Abdulmonem

    Hi Pierce. xamarin forms previewer does not work with apps that uses efcore, are there any plans to solve this issue.

  • Avatar
    Andriy Savin

    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?

  • Avatar
    LC

    I commented a fairly long, well thought out piece on how this compares to Flutter, and how far behind this functionality is comparitively, plus what MS should be doing to catch up.  But unfortunately it was deleted.  This article has quite a few deleted comments on it, no doubt from people voicing similar thoughts, so it’s a shame that deleting all the negative comments has occured (and seems like it will continue to occur).  It’s really poor form.

  • Avatar
    amritpal singh

    Wow, Good start but keep it continuue. It save lot of time in UI design. It better if reload with c# code also.
    Thanks

  • Avatar
    Raghupathy, Krithika

     Can you please clarify which release it is available in?  I tried the latest preview release of VS2019 (v16.2 preview 4) but it doesn’t seem to be available.

Leave a comment