LiveXAML and Xamarin.Forms

|
Full disclosure. This blog post is sponsored by LiveXAML. I was sent a free license to try it out and mention it in a blog post. All opinions are my own and I was not paid to say nice things about the product.
I do not usually work with Xamarin.Forms, but Mihhail from LiveXAML contacted me and asked whether I wanted a license for LiveXAML to test out and mention them in a blog post. I thought "why not", and here are some brief thoughts and experiences with the tool.

First of all, LiveXAML is not the only product on the market. There are other players, such as Continuous, Gorilla Player and now Xamarin also have their Live Player. They all function a little bit different from each other, but their goals are very much the same. To show changes in the UI, while you are writing code.

I tried LiveXAML with the following setup:
  • Visual Studio 2017 15.2
  • Xamarin.Forms 2.3.4.247
  • LiveXAML 1.2.12
  • Android x86 7.1 image running in a Hyper-V VM
The project I worked with LiveXAML in was a sample project, where I have a ListView showing some images and names of cheeses. All the code was contained in a PCL. To get LiveXAML working I simply installed the Visual Studio 2017 extension. I also installed the LiveXAML NuGet into the PCL project.
For projects using Shared projects, you need to install LiveXAML into your application projects, which consume your Shared project.

This is basically it. Once the very small setup is done, you are ready to play around. Just start debugging your application. Fire up a XAML page and start editing. Every time you press save, LiveXAML will pick up the changes and they will quickly be reflected in the UI in the App.


See the video above to see it in action. In this video I edit some simple XAML, where I change the height and width of the images, then apply a transformation to add rounded borders. Every time I press CTRL + S to save, the emulator updates the view, which is super usefull when playing around with UI in XAML.

LiveXAML seems to work pretty well and seems stable, I only tried it in a Xamarin.Forms Android project, but the LiveXAML web page says that iOS projects work as well. There is also some preliminary VS4Mac support for those of you who use that. It installed and ran fine in an emulator, that is not mentioned as supported on the web page, which is great. It ran with external assemblies, in this case FFImageLoading, where images and transformations where shown correctly. To me it seems that any valid XAML will work with LiveXAML and be rendered on the device!

The difference between LiveXAML and Xamarin Live Player, is that with the former, you install a server in your app, which a plugin in Visual Studio can send commands to. So when saving your XAML it sends a payload which then is rendered on the screen.
With Xamarin Live Player, you don't add dependencies to your app. However, instead you install an App on your device you want to run on, then there is a pairing process with the IDE. Running the app, it seems like it is running inside of the Xamarin Live Player app and changes to any part of your code is reflected. This works with coded UI as well.
Like LiveXAML, Gorilla Player seems to be limited to XAML based UI and it would seem it works in a similar fashion, where your project takes a dependency on a Gorilla Player nuget and you need to set up Gorilla Player in your App startup.

All in all I was quite pleased how well LiveXAML works and how easy it is to get started. It just works. I have not tried it on a real device, but given that the device is on the same network as your PC, I think it may work just fine. If I were making Xamarin.Forms applications professionally, I would really consider LiveXAML as a means to create and debug XAML layouts.