Preview Xamarin Form Pages

Question

Is there any way to preview a Xamarin forms page without first deploying to device/emulator?

Or is there any way to live edit the page and see changes somewhere (a bit like Snoopy for WPF). I tried both Xamarin Studio + Visual Studio and do not see a designer.

Zein Makki · Accepted Answer · 2016-09-30T05:12:16.730

13

Update 30 Sept 2016:

Using the latest version of Xamarin you can use the following steps:

Use the View > Other Windows > Xamarin.Forms Previewer menu in Visual Studio to open the preview window. Use the Window > New Vertical Tab Group menu to position it side-by-side like the image below:

Note that:

The previewer requires that the project be built before rendering a page. If the error 'Invalid XAML' appears at the top of the preview pane, re-build the application and try again.

Source

Old Answer for reference to other solutions:

The Xamarin.Forms Previewer is currently only available in Xamarin Studio in the Alpha channel. Follow these instructions to change the update channel.

Currently there is no official Xamarin Forms UI previewer for visual studio. However in the last Xamarin Evolve 2016, Xamarin announced that they are working on a designer that will be released. It is to be announced.

Xamarin recently released a Xamarin Previewer, for Xamarin Studio only (Visual Studio to come later) that lets you preview XAML on iOS and Android. This is currently in preview and available via the Alpha channel (29th April 2016). I will try to remember to update this once it comes out for Visual Studio.

As an unofficial alternatives, you can try:

Gorilla Player

edited Sep 30 '16 at 05:12

answered Jul 08 '16 at 16:01

Zein Makki

29,485
6
52
63

Thanks :-( Guess I will have to live with the 10-15second delay each time – Michal Ciechan Jul 08 '16 at 16:02
1

@MichalCiechan or switch to Xamarin Studio. Or pay for Gorilla player :) – Zein Makki Jul 08 '16 at 16:05
@user3185569 thanks.. But already upvoted.. only one upvote allowed per user:) – Ranjithkumar Sep 30 '16 at 06:17
Thanks for the update! in the end I went with Gorilla Player, but now that it's officially out (and hopefully I will be able to access it this time) I will give the previewer a spin :-) – Michal Ciechan Sep 30 '16 at 09:15
1

I can open the previewer in VS, but it's not showing a render of the page if I then open a xaml file. Is there something you need to do to tell the Previewer what to actually preview? – tomRedox Oct 26 '16 at 13:23
1

Answering my own questions, it looks like there are still a lot of issues with running the previewer in VS, particularly that you need the mac agent running on a connected mac even if you only want to preview Android layots. More info on the Xamarin forums: https://forums.xamarin.com/discussion/78018/xamarin-forms-previewer-isnt-showing/p2 – tomRedox Oct 26 '16 at 13:30
Note that in Visual Studio 2017 the entry below "Other windows" is just called "Forms Previewer" (without `Xamarin.`). – Heinzi Mar 22 '17 at 16:53

LonelyDeveloper · Answer 2 · 2016-09-29T14:48:52.607

6

Xamarin.Forms Previewer is now available in VS. All you need to do is to update your Xamarin version: Tools > Options > Xamarin > Other > Check Now to update your Xamarin to the latest.

Then open it via View > Other Windows > Xamarin.Forms Previewer

UPDATE: But it looks like that it does not show anything from my XAML!

edited Sep 29 '16 at 14:48

answered Sep 29 '16 at 08:31

LonelyDeveloper

424
8
15

While previewing your XAML file you must be connected to your mac agent. – Parth Patel Nov 23 '16 at 06:12

SushiHangover · Answer 3 · 2016-07-08T16:13:46.673

4

Xamarin Studio does include a XAML previewer, I've been using it for awhile now.

https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-previewer/

edited Jul 08 '16 at 16:13

answered Jul 08 '16 at 16:06

SushiHangover

73,120
10
106
165

Thanks, exactly what I'm looking for! Just switched to Alpha channel :-) Now if only my internet was faster :-( – Michal Ciechan Jul 08 '16 at 16:08
@MichalCiechan No problem, It is not "perfect" yet as it does not recover from XML syntax errors all the time so you might have to close and reopen the XAML file to get it to recompile the XAML to code as it is actually live running the code.. – SushiHangover Jul 08 '16 at 16:12
1

I installed the latest Alpha channel version (6.1) and it still is not giving me any XAML Preview button in top right :-( Gonna try out Gorilla Player – Michal Ciechan Jul 08 '16 at 18:34

score 1 · Answer 4 · answered Oct 13 '16 at 12:00

I left here my impressions after my own research on the topic, having tried:

Xamarin's Previewer
Xamarin Forms Player
Gorilla Player

Bottom line:

I decided to go with Gorilla Player. The only one that really worked with me - although it has the limitation of working with XAML only - meaning you are forced to code your UI using XAML.

score 0 · Answer 5 · answered Sep 20 '16 at 09:23

The Xamarin.Forms Previewer is available in the stable channel as a Preview.

Projects require the latest Xamarin.Forms NuGet package for the XAML Previewer to work.

Open Android SDK Manager and update SDK Tools and Platform-Tools

Rebuild solution and create new xaml page.

In Visual Studio: Use the View > Other Windows > Xamarin.Forms Previewer menu to open the preview window. Et voilà

https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-previewer/

Preview Xamarin Form Pages

5 Answers5

Linked