Custom Content Page Using Xamarin.Forms

Introduction

Xamarin is a platform that allows us to create multi-platform mobile applications, like Windows phone, Apple iOS, and Android through a single integrated development environment (IDE). This platform allows the designers to develop and design various mobile platform applications very rapidly. In this article, we will discuss how to create CustomContentPage using Xamarin.Forms (or) cross-platform from VS 2017. There are many plugins available for Xamarin.Forms including Stack Layout, Label, and button.

Tools

1. Windows 10 (Recommended)
2. Visual Studio 2017 Community/Enterprise/Professional Edition (Software available online at https://www.visualstudio.com/downloads/)

The steps given below need to be followed in order to design CustomContentPage and Entry concept View in Xamarin.Form, using Microsoft Visual Studio 2017.

 

Step 1

Go to Visual Studio 2017.

Click File —> New —> Project or shortcuts (Ctrl+Shift+N).

 

Step 2

Go to Visual C# --> Cross Platform –> Blank App (Xamarin.Form or native); change your application name and click the "OK" button.

 

Step 3

After this, go to the new cross platform app. Select a Blank App, Xamarin.Forms as UI technology and PCL as code sharing strategy. Now, click the “OK” button.

 

Step 4

In this step, go to select (Portable) page, double click on HomePage.XAML, wait for a few seconds and it will execute the main XAML page.

 

Step 5

Then, a single layout is added to some color changes. I have given the source code; you can use this code or create your own code.

 

XAML CODES

<?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="CustomContentPage.HomePage">
    <Label Text="Xamarin.FormApplication But color change seperate Platform" TextColor="Black" FontSize="40" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

Step 6 

In this step, right click on Droid Page and select Add>> New item or  use "Ctrl+Shift+A" shortcut.

 

Step 7

Add a new item, select Installed >> Visual C# >> Class . Here, you can change the name but the default name is using a calling function.

 

Step 8

In this step, on the Android page, please write some query. I have given source code; you can use this code or you can own code.

 

CS CODE

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Xamarin.Forms;
using CustomContentPage;
using CustomContentPage.Droid;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(HomePage), typeof(HomePageRenderer))]
namespace CustomContentPage.Droid {
    public class HomePageRenderer: PageRenderer {
        protected override void OnElementChanged(ElementChangedEventArgs < Page > e) {
            base.OnElementChanged(e);
            this.SetBackgroundColor(global::Android.Graphics.Color.Green);
        }
    }
}

Step 9 

Similarly, right click on Windows or (UWP) page and  select Add >> New item or (Ctrl+Shift+A) shortcut.

 

 

Step 11

 

CS CODES

using CustomContentPage;
using CustomContentPage.UWP;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms.Platform.UWP;
using Xamarin.Forms;
using Windows.UI.Xaml.Media;
using Windows.UI;
[assembly: ExportRenderer(typeof(HomePage), typeof(HomePageRenderer))]
namespace CustomContentPage.UWP {
    public class HomePageRenderer: PageRenderer {
        protected override void OnElementChanged(ElementChangedEventArgs < Page > e) {
            base.OnElementChanged(e);
            this.Background = new SolidColorBrush(Colors.Yellow);
        }
    }
}

Step 12 

Then, double click on the App.cs page where a simple code will be written to call the main page. In this application, the main page is Homepage.xaml.

 

Step 13

Right click on project name in Solution Explorer and select "Set Startup Projects".

 

Step 14

After a few seconds, the solution page will appear with default single startup project but we can change to multiple startup projects. Then, start by clicking on the Droid and UWP pages. Finally, click the “OK” button.

 

Step 15

Platform will offer multiple deploy options. We can select the Emulator as per our choice. 

 

OUTPUT

 

SUMMARY

In this article, you learned how to create the CutomeConetnPage using Xamarin.Forms with .NET Standard libraries. If you have any questions/ feedback/ issues, please write in the comment box.