Unter WPF ist es möglich, sein XAML und seine UI direkt im Designer zu sehen und zu entwickeln – was die Entwicklung vereinfacht und beschleunigt. Unter Xamarin.Forms war dies bisher nicht möglich. Also wird unter Xamarin.Forms aktuell die UI in XAML entwickelt, dann auf das Gerät oder den Emulator installiert und anschließend kann die Arbeit gesehen und getestet werden.

Diesen Aspekt will Xamarin nun verbessern: Auf der diesjährigen Evolve im April wurde ein XAML Previewer angekündigt. Hiermit kann man während der Entwicklung einen Emulator öffnen und seine UI-Änderungen in XAML direkt sehen und erleben.
Da der XAML Previewer von Xamarin immer noch nicht zur Verfügung steht, muss man sich aktuell nach Alternativen umsehen, wenn man seine UI während der Entwicklung sehen möchte. Hierbei stößt man relativ zügig auf den Gorilla Player von UXDivers, der aktuell auch von Xamarin empfohlen wird.

Gorilla Player

Der Gorilla Player ist ein mächtiges Tool – auch jetzt schon, obwohl es noch im BETA-Stadium ist. Denn dieses Tool bietet aktuell bereits mehr Funktionen an, als Xamarin für seinen neuen XAML Previewer überhaupt angekündigt hat.

Mit dem Gorilla Player ist es möglich, seine UI nicht nur auf einem Emulator zu erleben, sondern gleichzeitig auf unterschiedlichen Emulatoren. Und um hier noch weiter zu gehen, kann die UI auch direkt auf einem echten Gerät angezeigt werden, sodass auch die UX wirklich erlebt werden kann. Hiermit gehen die Entwickler einen deutlichen Schritt weiter als die üblichen Designer zur Entwicklungszeit.

Darüber hinaus kann der Gorilla Player die Oberfläche nicht nur auf Emulatoren und Geräten anzeigen, sondern bietet auch die Möglichkeit, einen Status zu seiner Oberfläche zu bekommen.

Hier überprüft der Gorilla Player den Code hinter der Oberfläche und gibt eine Übersicht wieder, ob der Code in Ordnung ist oder ob es an einigen Stellen Warnungen oder Hinweise gibt. Wenn Fehler vorhanden sind, kann die Oberfläche nicht angezeigt werden – dafür werden im Statusfeld aber direkt der Fehler und der Grund inkl. eines kurzen StackTrace angezeigt. Hierdurch wird die Suche nach dem Fehler und einer Lösung beschleunigt.

Das Schöne an diesem Gorilla Player ist auch, dass man eigene Steuerelemente verwenden und sich live angucken kann – hierfür muss die App nur einmal mit den jeweiligen UserControls, Converters, CustomRenderer etc. deployed und anschließend können die Referenzen im XAML auch aufgelöst werden.

Einbindung

Die Einbindung des Gorilla Players in sein eigenes Xamarin.Forms Projekt ist weder komplex noch zeitaufwendig, da einfach nur die benötigten NuGet-Pakete eingebunden werden müssen. Nach dem Kauf der Lizenz erhält der Entwickler auch eine Applikation für den Entwicklungsrechner, die sich um die ganze Koordination zwischen dem Quellcode und den einzelnen Playern auf den Geräten/Emulatoren kümmert.

Nach der erfolgreichen Einbindung muss die App einmal auf das Gerät oder den Emulator installiert werden. Nach der erfolgreichen Verbindung zwischen Gerät, Applikation und Visual Studio muss lediglich eine XAML-Datei geöffnet werden. Dass der Gorilla Player nun diese XAML-Datei darstellt, sieht man an dem eingeblendeten Logo innerhalb des Visual Studios in der rechten oberen Ecke.

Ein kleines Manko an dem Gorilla Player ist allerdings, dass er aktuell nur für die Plattformen Android und iOS zur Verfügung steht – nicht für UWP oder WindowsPhone.

UI/UX erleben

Mit dem Gorilla Player von UXDivers bekommt man ein sehr mächtiges Tool an die Hand, mit dem der Entwickler direkt seine zu entwickelnde UI und UX sehen und vor allem erleben kann.

Und wer seine UI nicht von Grund auf neu aufbauen, sondern auf bestehenden Templates aufsetzen möchte, sollte sich das Grial UI Kit von UXDivers genauer ansehen. Hier bekommt man ebenfalls für die Plattformen Android und iOS eine Vielzahl von fertigen Screens zur Verfügung gestellt.

Quellen:

Xamarin Evolve 2016: https://evolve.xamarin.com/
XAML-Previewer Ankündigung: https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-previewer/
UXDivers: http://www.uxdivers.com/
Gorilla Player: http://gorillaplayer.com/
Grial UI Kit: http://grialkit.com/