How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform

Reading this article, you will learn how to create and use XAML Content Page in the Xamarin Forms application for Android and Universal Windows Platform, with XAML and Visual C# in cross-platform application development.

The following important tools are required for developing UWP.

  1. Windows 10 (Recommended)
  2. Visual Studio 2015 Community Edition (It is a free software available online)
  3. Using Visual studio 2015 Installer, enable the Xamarin Studio(Cross-platform mobile development and C#/.NET while installing/modifying Visual Studio 2015).

Now, we can discuss the step by step app development process.

Step 1

Open Visual Studio 2015. Go to Start -> New Project-> Cross-Platform (under Visual C# -> Blank App (Xamarin.Forms Portable)-> Give a suitable name for your app (XamFormConPage) -> OK.



Step 2

Now, the system starts creating the project “XamFormConPage _Droid” … (Android).

C#

Step 3

It will ask you for adding Xamarin Mac Agent. If you don’t have a Mac machine, just close the window.

C#

Step 4

Choose the target and minimum platform versions for your Universal Windows Project.

C#

Step 5

Now, it is creating the project “XamFormConPage _UWP” …

C#

Step 6

After that, Visual Studio creates six projects. Also, it displays "Getting Started with Xamarin.Forms" page.

C#

Step 7

Now, we have to update the Xamarin Forms reference for Portable Project and XamFormConPage _Droid project.

For updating Xamarin Forms reference, right click XamFormConPage(Portable) -> Manage Nuget Packages.

C#

For updating Xamarin Forms Reference, select Xamarin Forms package and click Update.

C#

Xamarin Forms is updated in Portable project.

C#

Similarly, update the Xamarin Forms in the XamFormConPage.Droid Project. For updating Xamarin Forms reference, select Xamarin Forms package and click Update.

C#

Xamarin Forms is updated in Android project.

C#

Step 8

For Adding Xaml ContentPage, right click XamFormConPage(Portable) project and select ADD-> NewItem.

C#

Select -> CrossPlatform -> FormXamlPage -> Give it a relevant name.

C#

Now, XAML Content Page is added to your project.

C#

Step 9

Change the Label content in the project.

C#

Step 10

We will test Android and UWP. That’s why we will set the "Start for" option to  XamFormConPage.Droid and XamFormConPage.UWP (Universal Windows) as Multiple Startup Projects.

C#

C#

Step 11


Change the Configuration Manager settings. Go to Build -> Configuration Manager.

Uncheck the Build and deploy options to the XamFormConPage.iOS, XamFormConPage.Windows, XamFormConPage.WinPhone.
 
Check the XamFormConPage.Droid, XamFormConPage.UWP options.

C#

Step 12

Open (double click) the file App.cs in the Solution Explorer-> XamFormConPage (portable) and set the Root Page.

C#

Step 13

Deploy your app on Local Machine. The output of the XamFormConPage App is shown below.

C#

Summary

Now, you have successfully created and tested your XAML Content Page in Xamarin Forms application, in Cross-Platform application development using Visual C# and Xamarin.