How to Preview your Xamarin.Forms XAML in Xamarin Studio

In my work as a Customer Success Engineer at Xamarin, I demo the tools we provide daily. One that has gained immense popularity since launch has been, without a doubt, Xamarin.Forms. For those of you new to Xamarin development, Xamarin.Forms is a framework that enables you to write your mobile UI for Android, iOS and Windows phone in a shared code layer using either C# or XAML. Many developers see this as a real asset as greater code share suggests shorter development times and getting your app faster to market. XAML based UI development is also something that WPF and C# developers are already familiar with so that means their experience will help them get up and running with mobile sooner.

With that in mind, one thing that developers desire is rapid feedback and development. At the time of this writing Xamarin.Forms currently is a programmatic solution only. That means, no visual designer or previewer to view your UI in progress. That means that the only way to ensure your UI looks good is to build and deploy your app to either an emulator or physical device. While certainly a possibility, this is not the fastest process, especially if you are trying to make minute changes and get immediate feedback.


One solution to this that has been made available is a tool call the Xamarin.Forms Player, written by Daniel Cazzulino, who also happens to be a developer at Xamarin. What this tool does is installs a plugin to Visual Studio that allows you to pair your Visual Studio instance to either an emulator or device. Then, while you are writing the XAML portion of your application, you can actually quickly preview the results live without doing a full build and deployment of the application. This serves as a great solution to many developers. While the Visual Studio add-in has been available for a while, I was recently made aware of this also being published as an Add-In for Xamarin Studio and wanted to write a quick guide on how to get it set up.

From what I understand about the tool, the Forms Player works as a pub/sub application where multiple devices will subscribe to an IDE through a paired code between your IDE and an configured application running on device. Then, as you are developing your XAML you can quickly do a compile and publish. When the IDE publishes an update, each subscriber running will update and display the result. Really cool.

There are two main parts to getting this set up

I. Install the Add-In within Xamarin Studio (On Mac)

Select Xamarin Studio -> Add-In Manager -> Gallery Tab. From there search for Forms Player, it should appear under Mobile Development

II. Create and Install a Forms Player application on device.

Here is where we set up the subscriber side of things. There are a few ways you could do this, including compiling the code from GitHub and installing it, but this approach is pretty simple.

1) Create a new cross platform Xamarin.Forms application. I would name it something like "Forms Player" or maybe equally memorable. PCL or Shared Project should be fine.

2) Add the Xamarin.Forms Player NuGet to your Android and iOS Targets. Right click both Android and iOS Projects-> Add-> Add NuGet Packages. Make sure in the bottom right you check the "Show pre-release" box.

3) Update  new App () in MainActivity.cs and AppDelegate.cs to be new Xamarin.Forms.Player.App ()






As a side note, you may need to modify some of the built references on the iOS project. When I set this up, it complained, initially, about duplicate references to System.Runtime, System.Threading and System.IO. Removing them from the References-> From Packages folder got it running fine.

4) Deploy this application to the devices/emulators you want to support. You will see a Home screen like this:

 

 

iOS on left, Android on Right

III) Start debugging your app

Now that you have these installed, what you will do is pair them. You do this by selecting the Forms Player menu and select Connect. This will create a running Session ID, which you will input in the running application you have previously installed above.

Open up the Forms application you want to work on. When you open the .xaml file, you will notice that the "Publish" option from the Forms Player menu will no longer be greyed out. Each time you select publish, or hit the hotkey, while you have a .xaml file loaded in your IDE, it will load that current XAML to any device with the app running and session paired, and then preview it.

And there you go! Hopefully you found this useful and it will help you build and ship higher quality Xamarin.Forms apps faster.