One of the most requested features of Xamarin Forms is a visual Xaml Editor. Sure, it would be nice, but it would never show you how your App will look on different devices. So I think the way that the developers of Gorilla Player choose is the right one. It’s not too difficult to write a Xaml Page. After some time you do a good piece by copy and modify existing code or create your own custom views for reuse. But it’s annoying to compile and deploy your App to see even minor design changes. Here comes Gorilla player into play.
So what is it? Gorilla Player let’s you preview your Xaml Files in real time on multiple devices or Emulators in parallel. Any change to your Xaml files are reflected immediately on all devices.
To make this work you have to install a Player App which is available in the App Stores and the Gorilla Server App on your PC. After starting the Server App you can connect as many devices as you want to the Server by starting the Player App. If you then open a Xaml File in VS or XS it will be automatically displayed on the devices.
If the page is not displayed try opening another file in your IDE and then switch back to the Xaml file. If this don’t help go to the Tools->Gorilla menu and disconnect / connect your IDE. Sometimes your Player App will not connect if you click on the discovered server. In this case switch to manual to connect.
This is how it looks like previewing the same page on iOS on the VS iOS emulator in parallel to MS Android emulator.
This sounds pretty easy, but there are some pitfalls on your way:
- If you use custom renderers and markup extensions and resources will not be displayed.
- Any bindings will not work 🙁
The solution for this is using the Gorilla SDK this actually allows you to include the Gorilla client into your App and therefore access all your assemblies including renderers, markup extensions, custom page base classes and resources. Sound great, BUT getting this set up is not as easy as it sounds:
- Biggest problem, the documentation on the Gorilla Website is not up to date. There is a more complete one on their github page
- Registering your assemblies can be tricky
I won’t repeat the content of their SDK documentation on github here. Instead I will add some things that I found important while working with gorilla:
- Make sure that you add all assemblies that contain renderes etc. to the gorilla.json file AND register it in your App startup code using RegisterAssembyByType with types from all assemblies that you want to use.
- Important include also the main PCL assembly of your App
- Gorilla recommend adding the SDK to your App project. I personally prefer to have a separate GorillaDesign solution which loads and deploys fast to your device because you will have to deploy it every time you want to add a new assembly. When I’m satisfied with the look I will copy the Xaml back to my App project.
- You can provide Sample Data to your databindings using a json file that is also updated in real time. When I tried this I had problems to get this working together with the SDK. What I did is adding a static item source to my Xaml file. This way you can use all your Custom classes in bindings:
Important: To make this work you have to include the name space containing your custom classes to the xaml file.
- One general tip when tweaking Xaml design is to use the BackgroundColor that almost all visual Elements and Layouts have to see which dimensions these Elements really have like this here
If you still have problems getting Gorilla to work, drop leave a comment or mention me on Slack and I will try to update this post with more information.