Visual Designer in Xamarin Forms

Update: While not as advanced Gorilla Player below, Xamarin recently released a Visual Previewer, for Xamarin Studio and Visual Studio. I do a complete run down in Xamarin Forms Visual Previewer.

 

It was one of the first questions I asked when starting Xamarin Forms and is one of the most requested features for Xamarin Forms. But after a 1.5 years still no visual designer until someone decided to take it into their own hands with GorillaPlayer, which I managed to get access to the Beta program.

This product allows live visual updates in the emulator for Android and iOS in Xamarin Studio for Xaml only Xamarin Forms pages and views. (Still waiting on a VS plugin but its on the roadmap and close to release from what I have been told.) Just for reference for this blog article I am using version 0.8.1 of the GorillaPlayer.

Installation

Its quick and simple, go to GorillaPlayer (sign up for the beta or download the public version if they have released it publicly by the time you read this), be sure to install the Xamarin Studio Add-in and SDK examples when it asks. Once installed you will see a small icon in your taskbar and this is the local app that will monitor files in your project.

Taskbar

It installs the GorillaPlayer app and example projects in C:\Users\<username>\Gorilla by default.

#1 Open the Player app in the directory above and run it on the emulator or real device.

connecting-gorilla-mobile-to-devices

#2 Open the example project (MyCoolCompanyApp) in the above directory in Xamarin Studio. (Don’t run the project though)

#3 Right click on the Xaml you want to see and press Stick Gorilla to this.

#4 Your emulator will update with a view of the page

Update

Note: You need to press Save after you have finished updating your Xaml to have the change reflected on the emulator. When the file has the (Gorilla) tag next to it as you can see above, that means it is being watched by GorillaPlayer.

How It Works

You deploy an app to your emulator and you have the GorillaPlayer program running on your computer. Then with the Xamarin Studio plugin, it tells GorillaPlayer which files to monitor and sends it over to the emulator for display and updates when necessary.

PlayerUpdate

What It Can Do

I got to testing it and started with a lot of the obvious things out of the way

  • Change Text
  • Change Colors
  • Change Font Sizes
  • Change Layouts

This all worked really well and I didn’t come up against any roadblocks here. Some more advanced things I tested out were:

  • You can add in an image to the Resources or Assets folder and update an image in Xaml.
  • Created a custom control in Xaml
  • Sample data in Xaml to fill out controls

Again, all worked perfectly here.

Final Thoughts

To really see what this can do I would have to use this in an actual app design. I have a new project coming up and will certainly be using this for that project where I will put it through its paces.

The product is fantastic and is going to save a huge amount of time just for quickly seeing what minor UI updates will do. You won’t see updates to DynamicResources, since they are code behind essentially but I think I am expecting too much for such a young product.

Go ahead and give it a try for your next project, it will certainly shave some time off your UI design for a large project. I might post a followup on this project in a few months after I have had a chance to use it for an actual project and put it through its paces.

Microsoft MVP | Xamarin Certified Developer |
Exrin Creator | Xamarin Forms Developer | Melbourne, Australia

Related Posts

Leave A Comment?