#Xamarin – Live preview of #Xaml in #XamarinForms using #GorillaPlayer in #VisualStudio

Hello!

Today I’ll write a quick review to another cool tool which allows us to have a real time preview of XAMLs views when we works with Xamarin Forms. Let me introduce to you to  Gorilla Player, is a nice tool to have real-time XAMLs preview, however I also like the logo, is one of the best I’ve seen since the Octocat.

The product is in beta phase. You can sign up and then it’s time to wait a while to see if you have been accepted. When you accept you, they send you the information to download the app and also a username and password to use it.

Setup (easy and fast!)

I’m not going to write about the installation process, since it is quite intuitive. The only thing that should be mentioned, is that the app is integrated with Visual Studio 2015 and Xamarin Studio. How cool is this?

Working with Gorilla Player

We should start opening with Visual Studio, a Xamarin solution named “Player”. Then we need to build  and deploy this app on the device/s in which we want to have the preview online or our Xamarin Forms. For this sample, I’ll deploy the app in 2 Android devices with different resolutions

• Samsung Galaxy 5S Mini, 5’’
• VS Emulador 7’’ KitKat

Once deployed the app, we can already see it as a new app on our desktop.

If our environment is properly configured, we should see “Connected” status in the app. The following image shows the app connected in the 7″ emulator and the S5 Mini.

Now it is time to open this app. When we launched the app will see that it shows us the State of connected. This is because the Gorilla Player installer has installed a small app that is the bridge between the devices and our designer..

Important: If you don’t have this app running, you should open it. A search with “Gorilla” takes us to the shortcut to it 😉

Real Time Preview con Gorilla Player

With the working environment up and running, we can start use Gorilla Player. Every time you modify a XAML file you’ll see in the devices where you have the app running a preview of the XAML code in real time. For example:

Something I feel after using it a while, it works perfect when all styles, bindings and other statements are defined in XAML mode. If you make some kind of binding by code, it seems that it fails to correctly resolve some types.

Personally, I like the idea of working side-by-side with the Visual Studio Android emulator in order to have a live preview my XAMLs files. I will give you a bit of use for a while, and I will also learn to declare more information in XAML (I’m very C# for almost everything).

If you have been wanting more, the video below shows a demo live of some features of the app:

Greetings @ Madrid

-El Bruno

References

• Gorilla Player Home
• Gorilla Player Getting Started
• Wikipedia Octocat