Xamarin Forms preview with Gorilla Player

One of the major complaints about Xamarin Forms is the lack of designer with relative preview so, at the time of this writing, the development process is made up of a continuous sequence of: write XAML, deploy, see result, stop, edit XAML and try again, not a very convenient and productive way to work Image may be NSFW.
Clik here to view.

GorillaPlayer is a tool from a company named UXDivers that provides real time XAML preview on any Emulator/Simulator speeding up development process.

Note: GorillaPlayer is actually in beta and available via invite only, go request your invite here: www.gorillaplayer.com the player is available for both Visual Studio and Xamarin Studio (both Windows and iOS)

Once you get the invite, download the installer for your platform, enter the invitation code and let the installer complete installation, I encourage you to select the “Install Player + SDK + Samples” option since it contains a fundamental component (a.k.a. The Player)

Image may be NSFW.
Clik here to view.
If everything goes well, you should now have a new element in your tray area (on Windows Platform)

Image may be NSFW.
Clik here to view.

Right clicking the icon you’ll see all Gorilla Player’s options, I suggest you to have a look at Getting Started Walkthrough

Image may be NSFW.
Clik here to view.:

In order to see your XAML output you must install the Gorilla Player App in target emulator/simulator (in alternative using included Gorilla Player’s SDK, the player can be integrated directly in your app, see SDK page for more details) the player will try to connect with the host running on your machine

Image may be NSFW.
Clik here to view.

and once connection is completed (you have both automatic and manual setup options)  you’ll see the monkey smiling and ready to render your XAML

Image may be NSFW.
Clik here to view.

Let’s see some XAML then!

While the player app is running, create a brand new Xamarin Forms app (or open an existing one…) and open/add a XAML page, you should see the preview live on the emulator/simulator, if not check Gorilla Player’s option under: Tools->Gorilla Player (in Visual Studio) if not connected select the Connect option and check Follow me option

Image may be NSFW.
Clik here to view.

Note: using Stick to this XAML will let you freeze the rendered XAML while working on another file.

If Gorilla can’t render your XAML you’ll see an error message like this:

Image may be NSFW.
Clik here to view.

Otherwise you’ll get the final output, here’s a demo XAML fragment:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="GorillaTest.Views.MyView">
    <ContentPage.Resources>
        <ResourceDictionary>
        <Style x:Key="MyLabelStyle" TargetType="Label">
            <Setter Property="HorizontalOptions"
                      Value="Center" />
            <Setter Property="VerticalOptions"
                      Value="CenterAndExpand" />
            <Setter Property="FontSize" Value="20" />
        </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout BackgroundColor="Teal">
        <Image Source="icon.png" WidthRequest="100" 
        HeightRequest="100" />
        <Label Text="Gorilla Player Rocks!" 
        Style="{StaticResource MyLabelStyle}"
                 TextColor="White"
                  />
    </StackLayout>
</ContentPage>

Image may be NSFW.
Clik here to view.

As you see the Player supports every XAML element including Images, Styles, Resources, etc it also support ContentViews (see here)

But what about design time data? : If you have a ListView I presume you want to see how it renders at runtime right? luckily Gorilla Player has a great support for design time data too, with several options (see here) probably the quickest one is to use add a json file with sample data to your project.

Let’s take this XAML as example (taken from Gorilla’s demo MyCoolCompanyApp)

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyCoolCompanyApp.MyPeople"
             xmlns:common="clr-namespace:UXDivers.Artina.Player;assembly=UXDivers.Artina.Player.Common" BackgroundColor="#455a64"
             xmlns:local="clr-namespace:MyCoolCompanyApp;assembly=MyCoolCompanyApp">
    <ContentPage.Content>
        <Grid>
            <Image Opacity="0.5"
                   x:Name="img"
                   Source="bridge_bg.png"
                   Scale="1.5"
                   Aspect="AspectFill"/>
            <StackLayout Padding="10,30,20,0">
                
                <ListView ItemsSource="{Binding .}"
                          SeparatorVisibility="None"
                          BackgroundColor="Transparent"
                          SeparatorColor="#DFDFDF"
                          HasUnevenRows="false"
                          RowHeight="120">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <local:MyPeopleTemplate  />
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                
            </StackLayout>
        </Grid>
    </ContentPage.Content>
</ContentPage>

The output rendered by Gorilla Player is:

Image may be NSFW.
Clik here to view.

Awesome! but since we are at design time, were do the ListView data come from? If you look at PCL project you’ll see that it includes a SampleData.json file

Image may be NSFW.
Clik here to view.

with this content:

{
  "MyPeopleTemplate.xaml": {
    "Name": "John Silverstain",
    "City": "MELBOURNE",
    "Department": "Marketing",
    "Color": "Red",
    "Age": 29,
    "Followers": 243,
    "Photo": "friend_thumbnail_27.jpg"
  },

  "MyPeople.xaml": [
        { "Name": "John Silverstain", "City": "MELBOURNE", "Department":"Marketing", "Color":"Red", "Age":29, "Followers":243, "Photo":"friend_thumbnail_27.jpg" },
        { "Name": "Pam Tailor", "City": "SIDNEY", "Department":"Design", "Age":32, "Followers":24,  "Photo":"friend_thumbnail_75.jpg" },
        { "Name": "Casy Niman", "City": "HOBART", "Department":"Accounts", "Age":58, "Followers":267,  "Photo":"friend_thumbnail_93.jpg" },
        { "Name": "Gorge Tach", "City": "NEWCASTLE", "Department":"Design", "Age":29, "Followers":127, "Photo":"friend_thumbnail_55.jpg" },
        { "Name": "Cristina Maciel", "City": "HOBART", "Department":"Mobile Dev.", "Age":32, "Followers":80, "Photo":"friend_thumbnail_31.jpg" },
        { "Name": "Simon Deuva", "City": "MELBOURNE", "Department":"Media", "Age":58, "Followers":420, "Photo":"friend_thumbnail_34.jpg" }
    ]

}

As you see, the file contains a set of sample data, in json format, that will be associated to each page (MyPeopleTemplate.xaml and MyPeople.xaml in this case) ideally simulating the same data that the associated ViewModel will provide at runtime. in the docs you’ll find alternative design time solutions like using a Json data class or a Plain object.

While in beta, the product is already very stable and a total life saver if you do Xamarin Forms development so I encourage you to give it a try and help the team fixing all issues so that we can get an official v 1.0 soon.

Issues can be filed here.

Happy Gorilla rendering! Image may be NSFW.
Clik here to view.