Live XAML Previewer In Xamarin.Forms

Introduction

In this article, we are going to use XAML Previewer in Xamarin.Forms. Xamarin.Forms is used to make cross-platform applications by using C# as a back-end language and XAML as front-end. Let’s discuss XAML Previewer.

Targeted Audience

All People with knowledge of Xamarin.Forms.

If you are not familiar with Xamarin.Forms, click here to learn how to develop you first cross-platform application.

Technical Requirements

• Windows 10 or Mac OS
• Xamarin Studio or Visual Studio 2015, 2017 with Xamain installed
• Developer mode should be enabled on your OS

Installation

Download Visual Studio Installer from here.

You have to install Visual Studio 2017 with Xamarin workload.

Installing Xamarin.Forms Previewer

You don’t have to do any work for installation of XAML Previewer. If you have Xamarin installed in your Visual Studio, then XAML Previewer is already installed on your machine; you just have to run it. Just follow the steps to open the Previewer.

To launch the Previewer in Visual Studio, select View -> Other Windows -> Xamarin.Forms Previewer, or search for “previewer” in the search bar. And, the XAML Previewer will be displayed on your screen.

After opening the Previewer, you will see the preview of your current XAML page. Just like this.

Code of this XAML page is also given.

Using the Previewer

The Previewer works on:

• ContentPage
• ContentView
• ViewCell

Just create a new Xamarin.Forms application or open your existing application. Then, open any View created by XAML and open the XAML Previewer to see you XAML working without starting an application. You can make any changes on your View page and these will be reflecting on XAML Previewer.

Advantages of XAML Previewer

• You don’t need to run the complete application to view your pages.
• All changes you do in your XAML page are reflected and shown in the Previewer.
• Already installed with Xamarin.
• No extra installation needed.
• Easy way to see your XAML working.

Previewer Options

The Previewer has tools that help ensure that your UI looks good to the users. The design surface allows you to switch between:

• iOS and Android
• Phone and Tablet
• Landscape or Portrait

Options are shown in the figure below.

You can switch to see how your application UI looks like and how your application behaves on different OSes and different orientations.

You are also given zoom in and zoom out options to view your UI more clearly.



These buttons are shown at the bottom right of your Previewer.

Let’s write some XAML code and preview it on Xamarin.Forms Previewer.

XAML 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Practice__app.CsharpCorner"
            BackgroundColor="Teal"
             >

    <StackLayout VerticalOptions="CenterAndExpand" Padding="5">
        <Entry Placeholder="User Name"></Entry>
        <Entry Placeholder="Password"></Entry>
        <Label Text="Forgot Passord" VerticalOptions="EndAndExpand" TextColor="Blue"></Label>
        <Button Text="Sign In"></Button>
        <Label Text="Dont have account? Sign up" TextColor="Blue"></Label>
    </StackLayout>

</ContentPage>

Output

Here, you can see two Views. XAML is on the left side and its output on XAML Previewer is on the right side.