Xamarin Forms XAML Previewer Demo

Xamarin Forms XAML Previewer Demo

FormsPreviewerMain

 

Short introduction

Finally here it is! XAML Previewer for Xamarin Forms apps! Forget about creating design for you mobile application without seeing anything in the designer window.

During the Xamarin Evolve 2016 there were many beautiful and helpful tools announced. In this article I would like to show how to install and configure Xamarin Forms Previewer.

What do I need to start?

1) Xamarin Studio installed – with Alpha channel set for updates

2) Mac (In my case this is MAC Mini)

3) iOS emulator

Let’s start

1) Open Xamarin Studio and change updates channel to “Alpha”:

Xamarin Forms Previewer is currently available only in Alpha channel. Once you change this in Xamarin Studio updates should be installed.

FormsPreviewer1_1

FormsPreviewer2_2

2) Create new “Xamarin Forms” project  (I used Shared Library type of project):

FormsPreviewer1

FormsPreviewer2

FormsPreviewer3

FormsPreviewer3 FormsPreviewer4

FormsPreviewer5

3) Configure NuGet to add required packages:

Somethimes when you do an update with Alpha channel you have to also manually configure NuGet Gallery to be able to add required packages to the project. See below how to do it:

1.  Right click on the Shared project and select “Add” -> “Add NuGet Package…”:

FormsPreviewer6

2. In the displayed window click “Add”:

FormsPreviewer7

3. In the “Name” field type: “NuGet Gallery” and set “Location” to https://nuget.org/api/v2/

Then click “Add” and “OK” buttons:

FormsPreviewer8

FormsPreviewer9

4) Add required NuGet packages:

Now we can add required NuGet package. To enable XAML Previewer “Xamarin.Forms” 2.3.0.38-pre2″ (or -pre1) package is required. Let’s add it to the projects:

1. Right click on the Shared project and select “Add NuGet Package…”. In the search windows type : “Xamarin Forms” and remember to select “Show pre-release packages”:

FormsPreviewer10

FormsPreviewer11

2. Now repeat these steps for the iOS and Android projects as shown below:

FormsPreviewer12

FormsPreviewer13

5) Great. Now rebuild solution and let’s add some XAML page to see how does it work:

1. Right click on the Shared project and select “Add New File…”:

FormsPreviewer14

2. From the “Forms” tab select “Forms ContentPage Xaml” and leave the default name:

FormsPreviewer15

3. Open “MyPage.xaml” file. As you can see XAML Previewer is already here! If not please remember to select “Preview” button in the right corner as shown below:

FormsPreviewer16

Now you are able to edit XAML code for your cross-platfrom app and see the result immediately.

Remember that if you want to see the result for Android platform you have to rebuild the project first:

FormsPreviewer17

Sum up

That’s it! Now you now how to enable Xamarin Forms Previewer to create design for your cross-platform apps. It is really helpful that you can see the result immediately once you type some fragment of XAML code. Remember also that it is in the early preview stage.

 

Advertisements