Xamarin.Forms: Content Page for XAML Controls

Step 1

Create a Xamarin.Forms project with Portable Class Library (PCL) as discussed in my previous article.

Xamarin.Forms: Create Your First Xamarin App For iOS, Android, And Windows

Step 2

Now right click on the PCL project and Add > New Item,

new

Inside the Cross-Platform, select Forms XAML Page and name it MainPage and click OK.

Forms

Step 3

Now in App.cs file, we call this MainPage inside the App constructor.

code

Step 4

In the MainPage.xaml, let's add Text Label and a Button with click event.

Complete Code

<?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="HelloXamarin.MainPage">
<ContentPage.Content>
<StackLayout Padding="20">
<Label x:Name="msg" Text="Hello World" FontSize="40"></Label>
<Button Text="Click Me" BackgroundColor="Red" TextColor="White" Clicked="OnBtnClick"></Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Step 5

In the code behind MainPage.xaml.cs, we add click event of button,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace HelloXamarin
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
public void OnBtnClick(object o, EventArgs e)
{
msg.Text = "This is Xamarin Forms Content Page";
}
}
}

Step 6

Now run the application in your Android emulator or Windows devices. When you click on button, you see the output as,

output