How to make a tappable frame in Xamarin Forms

To make an entire Xamarin Forms frame tappable, use a FrameGestureRecognizer, and set the Tapped property to your handler.  now the whole thing is tappable!   Inside your Frame Content, you can place a ListView that has multiple components.  For a visual cue, set an outline color on your Frame.  Place multiple Frames in a StackLayout or a Grid and you have a nice set of call to actions.

 <Frame Grid.Row="0" Grid.Column="0" OutlineColor="Gray">
            <TapGestureRecognizer Tapped="OnFrameTapped" />
            <StackLayout Orientation="Vertical" HorizontalOptions="Center">
              <ContentView HeightRequest="80" >
                <Image Source="image.png">
              <Label Text="My Frame" HorizontalOptions="Center"></Label>

Gorilla player for Xamarin – XAML Preview!

The new Gorilla Player is out, and its great!  What is it?  Its an instant XAML previewer for Xamarin Forms projects!  (There is also a XAML previewer that was announced during the Microsoft Build 2016 conference currently only available in Xamarin Studio).  If you’re tired of the long cycle of designing your XAML then having to compile and deploy to your device or emulator just so you can view your XAML, then this is for you.  Gorilla Player allows you to view your XAML without compiling.  To get set up, all you have to do is complete their BETA registration form then download their package that contains the player source files and app.  The app is a desktop app that runs as a service in the background, acting as a server that listens for connections from your emulator.  After you have the desktop app up and running, navigate to the directory of the player solution project, and open it in Visual Studio.  Build the project and deploy it to your emulator.  Start the player app on your emulator.  It will try to automatically connect to your desktop app.  If it can’t find it, you can optionally connect manually.   In Visual Studio you will see a new toolbar option in Tools > Gorilla Player > Connect to Gorilla Player.  Now when you open XAML files in Visual Studio, you will see a Gorilla Player icon on the source page.


You should now be able to see your XAML in the emulator!  That’s it for simple XAML.  If you have Xamarin Forms ListViews with bindings, then you can set design time data a number of ways, the simplest I’ve found is to include a JSON file in the root of your project called “SampleData.json”.  In the file, set your design time data by including a JSON object with multiple name value pairs, each with their value set to an array.  The name in each name value pair is the title of your XAML page.  Set the value of the name value pair to an array of objects with properties that conform to your model.  This will be the design time data you see in the XAML previewer.  Don’t forget to set the binding in your ListView to  ItemsSource=”{Binding}” instead of ItemsSource=”{Binding Items}” or whatever your model is bound to in the code behind, when you want to preview using the sample data.

  "BlogPage.xaml": [
      "Title": "Blog Post 1",
      "Link": "",
      "PublishDate": "4/01/2016",
      "XamImageSource": "NoImageAvailable.png",
      "Caption": "This blog post is nice"
      "Title": "Blog Post 2",
      "Link": "",
      "PublishDate": "4/02/2016",
      "XamImageSource": "NoImageAvailable.png",
      "Caption": "This blog post is greater"

There is an API for Gorilla Player that allows you to import custom .dlls for views that inherit from them, and more.  Head on over to to check them out.  Happy coding.