Xamarin.Forms (Cross Platform)

Pre-requisite for Xamarin.Forms (Cross Platform)

Basic Knowledge of C#
Some Knowledge about Xaml

Introduction

Xamarin.Forms is a feature of Xamarin. Xamarin is the popular mobile development framework which extends the .Net Development Platform with tools and libraries for building mobile apps. Xamarin.Forms is an open-source, cross-platform framework acquired by Microsoft for building Android, iOS, and windows app with .NET from a single shared codebase. We use Xamarin. Forms built-in Pages, layouts, and controls to build and design mobile apps from a single API that is highly extensible. Subclass any control to customize the behavior or to define our controls, layouts, pages, and cells to make our apps pixel perfect.

Xamarin Form Structure

In the beginning, when we open any device, any mobile phone whatever we see on the screen, the visible area is called a Page. All the visible area on the screen we consider it as a page, and we can compare that just like a ROM. And then how do we structure the things on the page, and how do we plan the things is known as Layout. The view is the actual item which we will put on the places, either we will stack them, put them on the left side, right side, etc.

Visual Elements

In Xamarin, elements shown on the device, the screen is called Visual Element. In a device like a Cell Phone, those are visible, or we can see are known as Visual Element.

In Xamarin there are 4 Visual Element.

Page

In a device, from the navigation bar to the end of the screen known as a page.

Pages	Description
ContentPage	Content Page contains a single view.
MasterDetailPage	MasterDetailPage has two panes for the page. Master Page contains the Menu and detail page contains the content.
NavigationPage	NavigationPage contains the navigation bar. In NavigationPage, we kept the page on a stack and can jump from one page to another. The navigation bar can have navigation buttons as well as the title.
TabbedPage	TabbedPage is a container page. The tabbed page acts as a container which holds the content page associated with each tab.
CarousalPage	The page that allows the sweeping across to show other views.

Layout

The child element in the page known as Layout

Layouts	Description
StackLayout	In StackLayout, all the child elements are kept in a line. StackLayout is the most used layout.
AbsoluteLayout	A view that positioned the child layout at a specified position using anchors to define the place and size.
RelativeLayout	In RelativeLayout, we position the elements relative to each other using constraint.
Grid	Arrange the multiple views in rows and columns, just like a table.

The layout contains lots of elements are known as Views.

Cell

The child element of Views is known as Cell.

Cells	Description
EntryCell	The cell is containing a label and single-line entry element
SwitchCell	This cell is the same as a switch, but before that, there is a label.
TextCell	The cell contains both primary and secondary field.
ImageCell	Text cell that also contains the image

Page

Pages are used to design the screen of the application. There are multiple types of "Pages" in Xamarin. Pages are a type of Parent Object which further contains a child, that can be another Page or Layout. A page occupies the entire screen.

A page cover the whole area of the screen.
A page contains the layout and views.
The app can have single or multiple pages.

In Xamarin, Six Types of pages are available.

Content Page
MasteDetail Page
Navigation Page
Tabbed Page
Template Page
Carousal Page

Content Page

Content Page displays a single view or a Container on the entire visible screen.

Here, we will study the structure of the Content Page with the help of Xamarin.Forms in Visual Studio 2017.

To create the page in the Visual Studio, we will follow the following steps.

Page

Procedure to Create the Content Page

Click on FILE-> NEW->PROJECT

Click on Visual C#-> Select Cross-Platform-> Choose Mobile App (Xamarin.Forms)

Give the Name of the Application-> Click Ok

Choose the Blank template to create the Xamarin Application-> Choose Platform-> Choose the Code Sharing Strategy-> Click OK.

Open Solution Explorer-> Click on MainPage.Xaml-> Build the app->Test the app, click on Android Emulator

OUTPUT

Properties:

Here, we are going to use some properties to enhance the feature of the page.

Margin: Margin property represents the distance between an element and its adjacent elements.

Padding: Padding represents the distance between an element and its child element, and it is used to separate the control from its own content.

MainPage.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"
             xmlns:local="clr-namespace:App15"
             x:Class="App15.MainPage" BackgroundColor="Aqua">
    <ContentPage.Content>
        <StackLayout Padding="10" Margin="30,20,20,10">
            <Entry Text="hey i am xamarin"></Entry>
            <DatePicker></DatePicker>
            <Editor Text="hey i am editor"></Editor>
            
        </StackLayout>
    </ContentPage.Content>

    

</ContentPage>

MainPage.XAML.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App15
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        
    }
}

Output

Xamarin.Forms Master Detail Page

Xamarin.Forms MasterDetailPage is a page which manages the information between the two related pages, and Master Page presents the items, Detail Page shows the details about the items on Master Page.

Here, we will explain how to use a MasterDetailPage and the navigation between the pages.

The container has two pages Master and Detail
Master contains the Menu List
Detail Page displays the details and link to go back to Master Page.

The location of the list of items is identical to each platform, and after selecting the items will navigate to the corresponding detail page. The master page also has a feature to navigate, i.e., Navigation bar which contains a button that can be used to navigate to the active detail page.

On iOS, the Navigation bar is present at the TOP of the page and has a button on the detail page. We can also navigate to the active detail page by swiping the master page to the left.
On Android, the Navigation bar is present at the TOP of the page and displays the title, an icon and a button that navigate to the detail page. The icon is defined in the [Actitvity] attribute that decorates MainActivity class in the Android platform.

MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MasterPage"
             x:Class="MasterPage.MainPage">
    <MasterDetailPage.Master>
        <ContentPage Padding="10" BackgroundColor="Blue" Title="Master Page">
            <ContentPage.Content>
                <StackLayout Margin="5,30,5,5">
                    <Label Text="Master Page" FontSize="Large"></Label>
                </StackLayout>
                
            </ContentPage.Content>
            
        </ContentPage>
        
       
            
             </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <ContentPage Padding="10" BackgroundColor="Yellow">
        <ContentPage.Content>
            <StackLayout Margin="5,30,5,5">
                <Label Text="Detail Page" FontSize="Large"></Label>
            </StackLayout>

        </ContentPage.Content>

        </ContentPage>

    </MasterDetailPage.Detail>



</MasterDetailPage>

MainPage.Xaml.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace MasterPage
{
    public partial class MainPage : MasterDetailPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

OUTPUT

Here, we are going to add some more thing on Master Page, and some more pages to navigate through the button

Add a new Page (Page1.Xaml)

Right Click on ProjectName-> Add->Content Page-> Add Page Name(Page1).

<?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="MasterPage.Page1">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="I am Page 1"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Add Page2.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="MasterPage.Page2">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="I am Page2"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MasterPage"
             x:Class="MasterPage.MainPage"
                  Title="I am Master Page"
                  MasterBehavior="Popover">
    <MasterDetailPage.Master>
        <ContentPage Padding="10" BackgroundColor="Blue" Title="Master Page">
            <ContentPage.Content>
                <StackLayout Margin="5,30,5,5">
                    <Label Text="Master Page" FontSize="Large"></Label>
                    <Button Text="Menu Item 1" BackgroundColor="Yellow" TextColor="Blue" Clicked="Button_Clicked"></Button>
                    <Button Text="Menu Item 2" BackgroundColor="Yellow" TextColor="Blue" Clicked="Button_Clicked_1"></Button>
                </StackLayout>
                
            </ContentPage.Content>
            
        </ContentPage>
        
       
            
             </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <ContentPage Padding="10" BackgroundColor="Yellow">
        <ContentPage.Content>
            <StackLayout Margin="5,30,5,5">
                <Label Text="Detail Page" FontSize="Large"></Label>
            </StackLayout>

        </ContentPage.Content>

        </ContentPage>

    </MasterDetailPage.Detail>
</MasterDetailPage>

MainPage.Xaml.CS

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MasterPage"
             x:Class="MasterPage.MainPage"
                  Title="I am Master Page"
                  MasterBehavior="Popover">
    <MasterDetailPage.Master>
        <ContentPage Padding="10" BackgroundColor="Blue" Title="Master Page">
            <ContentPage.Content>
                <StackLayout Margin="5,30,5,5">
                    <Label Text="Master Page" FontSize="Large"></Label>
                    <Button Text="Menu Item 1" BackgroundColor="Yellow" TextColor="Blue" Clicked="Button_Clicked"></Button>
                    <Button Text="Menu Item 2" BackgroundColor="Yellow" TextColor="Blue" Clicked="Button_Clicked_1"></Button>
                </StackLayout>
                
            </ContentPage.Content>
            
        </ContentPage>
        
       
            
             </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <ContentPage Padding="10" BackgroundColor="Yellow">
        <ContentPage.Content>
            <StackLayout Margin="5,30,5,5">
                <Label Text="Detail Page" FontSize="Large"></Label>
            </StackLayout>

        </ContentPage.Content>

        </ContentPage>

    </MasterDetailPage.Detail>



</MasterDetailPage>

OUTPUT

When we click on Menu Item 1, we will Navigate to Page1, and when we click on Menu Item 2, we will Navigate to Page2.

Output

What we will Learn

Here we will learn how to develop the cross-platform app by using the Xamarin.Forms.
How we can design the Native UI for all the different platform like Android, iOS, and Windows.
Here we will work on Xamarin.Forms with different Controls.
Navigation, Here we will learn the navigation with the scrolling, menus, and button from one page to another.
Data Binding: In data binding, we enable the communication between the C# and XAML.
Here we also create custom controls.

The big problem with developing the application for all the operating system is that they are different.

Xamarin promises to deliver the mobile apps with a shared codebase; however, that shared code is based on the application logic. Traditional Xamarin.iOS, Xamarin.Android and Xamarin.UWP development still requires that the user interface can be written separately from each other, and that is not a small task.

Basics Of Xamarin.Forms

Xamarin.Form is a mobile application framework for building the user interface. Xamarin.Form is a Cross-Flatform UI toolkit which allows the developer to easily create native user interface layout that can be shared across Android, iOS, and Windows Phone.

Xamarin.Forms provides 100% native iOS, Android, and UWP app, in fact, the starting point of any Xamarin. Forms app is the platform of the project.

Xamarin. Form is more than controls

Xamarin. Forms provide 20+ Cross-Platform user interface controls; each of these controls has an API specific to Xamarin. Forms, but emitted as its native iOS, Android, or UWP counterpart. In other words, a Xamarin. Forms Label control will be emitted as an iOS UI Label.

Some of the built-in Xamarin.Forms control, is natively rendered on iOS and Android.

Xamarin.Forms are much more than that

It also offers several different page layout which includes the navigation page that controls the navigation stack of other pages. A tabbed page contains the other page that can be accessed by tab and a master-detail page.
Xamarin.Forms provide a means to layout to control within the pages which are called layouts.
It also provides binding the engine so that the class containing the property can be "bound" to a property on a control- like the Text property on a Label. Xamarin.Forms can speed up the development time.
A messaging service called Messaging Center is included, which allows the various classes and component to communicate without knowing anything about each other.
Effects are a means by which we can create a small platform-specific user interface to control and applied in the shared project.
Custom Renders allows us to take full control of how a control renders itself within Xamarin. Forms thus, we can add the additional appearance of functionality that we may need.
And with the latest version of Xamarin. Forms, we can even directly add controls that are supported on only one platform, such as Android Floating action buttons, directly into XAML file.

Difference between Shared Project and PCL (Portable Class Library)

Here are the two ways of sharing the project. Both of these allow us to share the project between different platforms like Android, iOS, and Windows.

Differences between the shared project and the PCL (Portable Class Library) are:

Shared Project	Portable Class Library
Side by Side	Each project will include all the resources inside the shared project. A portable assembly (DLL file) has referenced to all the object.
Benefits	Shared Code can be branched. Platform-specific reference can be added. Refactoring always updates all references. Good solution if we plan to share the result assembly with others
Disadvantages	No output, bad for sharing with other developers. Refactoring inside "inactive code" will not update it. No platform-specific references. Only a subset of the .NET framework available.

Navigation Page

A navigation Page manages navigation between the pages. It uses Stack Based Architecture and consists the PUSH and POP property to navigate through the pages. We can add navigation to any type of pages to navigate to another page.

Login Form

Coding

MainPage.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"
             xmlns:local="clr-namespace:ContentPageProperty"
             x:Class="ContentPageProperty.MainPage" BackgroundColor="WhiteSmoke" Title="Login Page">
    <ContentPage.Content>

    <StackLayout x:Name="MainStack">
            <StackLayout Padding="20" Margin="0,80,0,0">
                <Label Text="UserName" TextColor="Black"/>
                <Entry Text="" Placeholder="UserName" x:Name="UserNameEntry"/>
                <Label Text="Password" TextColor="Black"/>
                <Entry Text="" Placeholder="Password" IsPassword="True"/>
                <Button Text="Login" BackgroundColor="DarkGray"  TextColor="Black" Clicked="Button_Clicked"></Button>
                <Label Text="Not a Member? Sign Up Now" TextColor="Black" HorizontalOptions="Center"></Label>
                        

            </StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
    </StackLayout>
    </ContentPage.Content>

</ContentPage>

MainPage.Xaml.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace ContentPageProperty
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            DisplayAlert("Login", "LoginSuccessful", "OK");
            Navigation.PushAsync(new HomePage(UserNameEntry.Text));

        }
    }
}

App.Xaml

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace ContentPageProperty
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new MainPage());
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

HomePage.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="ContentPageProperty.HomePage" Title="Home Page">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
            <Label x:Name="AppUserName" FontSize="20"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

HomePage.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace ContentPageProperty
{
	[XamlCompilation(XamlCompilationOptions.Compile)]
	public partial class HomePage : ContentPage
	{
		public HomePage (String UserNameEntry)
		{
			InitializeComponent ();
            AppUserName.Text = "Hello," + UserNameEntry;

        }

      
    }
}

OUTPUT

Here, we will fill up the information in the text spaces User Name, Password and then click on Login

After filling up the information, this page will switch us to the Navigation Page.

Navigation Page

After Clicking on this highlighted arrow we will switch back to the Login Page.

Pickers

Here, three types of pickers are available in Xamarin Forms.

1. Date Picker

Xamarin.Form view allows the user to select the date. The Xamarin.Forms DatePicker invokes the platform's date-picker control that enables the user to select a date. DatePicker defines the eight properties.

MinimumDate: This is a type of DateTime, which it defaults to the first day of the year 1900.
MaximumDate: This is the type of DateTime, which is the default of the last day of the year 2100.

MainPage.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"
             xmlns:local="clr-namespace:App15"
             x:Class="App15.MainPage" BackgroundColor="Aqua">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="DatePicker" FontSize="20" HorizontalOptions="Center"></Label>
            <DatePicker x:Name="dp" MaximumDate="2020/12/31" MinimumDate="2000/12/31"></DatePicker>
        </StackLayout>
    </ContentPage.Content>

Output

2. Time Picker

3. Xamarin.Forms view allow the user to select a time. Xamarin.Forms TimePicker invokes the platforms time-picker control and enables the user to choose a time.

MainPage.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"
             xmlns:local="clr-namespace:App15"
             x:Class="App15.MainPage" BackgroundColor="Aqua">
    <ContentPage.Content>
        <StackLayout Padding="10">
            <Label Text="DatePicker" FontSize="20" HorizontalOptions="Center"></Label>
            <DatePicker x:Name="dp" MaximumDate="2020/12/31" MinimumDate="2000/12/31"></DatePicker>
            <TimePicker x:Name="tp"></TimePicker>
            <Button x:Name="button" Clicked="Button_Clicked" Text="Details"></Button>
            <Label x:Name="details"></Label>
        </StackLayout>
    </ContentPage.Content>

    

</ContentPage>

MainPage.XAML.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App15
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            var date = dp.Date;
            var time = tp.Time;
            details.Text = string.Format("Date:{0}\n Time:{1}", date, time);
        }
    }
}

Output

4. Picker (Known as a dropdown list)

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimePicker"
             x:Class="TimePicker.MainPage">

    <StackLayout>
        <Label Text="Picker"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <Picker Title="Color"
                VerticalOptions="CenterAndExpand"
                Margin="10, 0"
                SelectedIndexChanged="OnPickerSelectedIndexChanged">
            <Picker.Items>
                <x:String>Aqua</x:String>
                <x:String>Black</x:String>
                <x:String>Blue</x:String>
                <x:String>Fuchsia</x:String>
                <x:String>Gray</x:String>
                <x:String>Green</x:String>
                <x:String>Lime</x:String>
                <x:String>Maroon</x:String>
                <x:String>Navy</x:String>
                <x:String>Olive</x:String>
                <x:String>Purple</x:String>
                <x:String>Red</x:String>
                <x:String>Silver</x:String>
                <x:String>Teal</x:String>
                <x:String>White</x:String>
                <x:String>Yellow</x:String>
            </Picker.Items>
        </Picker>

        <BoxView x:Name="boxView"
                 WidthRequest="150"
                 HeightRequest="150"
                 HorizontalOptions="Center"
                 VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

MainPage.XAML.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace TimePicker
{
    public partial class MainPage : ContentPage
    {
        

        public MainPage()
        {
            InitializeComponent();
        }
        void OnPickerSelectedIndexChanged(object sender, EventArgs e)
        {
            Picker = (Picker)sender;

            if (picker.SelectedIndex == -1)
            {
                boxView.Color = Color.Default;
            }
            else
            {
                string colorName = picker.Items[picker.SelectedIndex];
                FieldInfo colorField = typeof(Color).GetRuntimeField(colorName);
                boxView.Color = (Color)(colorField.GetValue(null));
            }
        }
    }
}

Output

Tabbed Page

The tabbed page consists the multiple pages or tabs and allows the navigation between each of them. It behaves like a parent, and all others are its child. Here are examples of different types of tabbed pages on different devices. We can see the tab in iOS in the bottom, and in Android, Window phone tab is on the top.

Process 1

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinTabbedPage"
             x:Class="XamarinTabbedPage.MainPage">
    <ContentPage Title="Page1">
        <ContentPage.Content>
            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <Label Text="Tabbed Page1"/>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    <ContentPage Title="Page2">
        <ContentPage.Content>
            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <Label Text="Tabbed Page2"/>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>
    <ContentPage Title="Page3">
        <ContentPage.Content>
            <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                <Label Text="Tabbed Page3"/>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>


</TabbedPage>

MainPage.Xaml.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XamarinTabbedPage
{
    public partial class MainPage : TabbedPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

OUTPUT

Process 2

ICON Insertion

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinTabbedPage"
             x:Class="XamarinTabbedPage.MainPage" Title="MainPage">
    <local:Page1>
    </local:Page1>
    <local:Page2>
    </local:Page2>
   </TabbedPage>

MainPage.Xaml.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XamarinTabbedPage
{
    public partial class MainPage : TabbedPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Page1.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="XamarinTabbedPage.Page1" Title="Page1" Icon="home.png">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Tabed page1"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Page2.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="XamarinTabbedPage.Page2" Title="Page2" Icon="Message.png">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Tabbed Page2"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

APP.Xaml

Coding

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace XamarinTabbedPage
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new MainPage();
            
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

How to add the ICON

Download the icon from ICONFINDER site, click on the below link: https://www.iconfinder.com/search/?q=message&from=homepage, copy from the download folder and paste in the resources in drawable folder.

Page1

The process will repeat for all the pages to add the icon.

OUTPUT

Carousel Page

A type of PAGE that user can swipe from side to side to navigate through the page of the content, like a gallery. It contains a list of pages and display area.

Carousel Page class inherits from MultiPage <Content Page>

Carousel page provides the Navigation through the pages by swiping right or left. It acts as a base page for the other child pages.

Carousel Page will see only one at a time.

Carousel Page: Default Behaviour

Carousel Page Look

Loading of the List of the Pages

Provide a list of pages as child pages to carousel page.
Define the Data Template for ItemTemplate and then assign the collection to Item Source.

MainCarouselPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CarousalPage.MainCarousalPage">
    <ContentPage BackgroundColor="LightPink">
        <ContentPage.Content>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                <Label Text="I am Page1"></Label>
            </StackLayout>
            
        </ContentPage.Content>
    </ContentPage>

    <ContentPage BackgroundColor="Yellow">
        <ContentPage.Content>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                <Label Text="I am Page2"></Label>
            </StackLayout>

        </ContentPage.Content>
    </ContentPage>
    
    <ContentPage BackgroundColor="Red">
        <ContentPage.Content>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                <Label Text="I am Page3"></Label>
            </StackLayout>

        </ContentPage.Content>
    </ContentPage>

App.Xaml

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace CarousalPage
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new MainCarousalPage();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

OUTPUT

Template Page

It is the base class for the content page and shows the full-screen content with a controlled template. In this, we can design the template of our whole application which includes the font sizes, colors, and many other styling techniques.

Page1.Xaml

Without using Template

<?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="Templatepage.Page1">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="App Name" BackgroundColor="Blue"></Label>
        <Label Text="Login Registration Page"></Label>
        <Entry Text="Name"></Entry>
        <Entry Text="Age"></Entry>
            <Entry Text="Address"></Entry>
            <Entry Text="Country"></Entry>
            <Button Text="Submit" BackgroundColor="Black"></Button>
            <Label Text="Terms and Conditions"></Label>
            <Label Text="You can not copy more code"></Label>
        </StackLayout>
    </ContentPage.Content>
</ContentPage

OUTPUT

With Template

Page2.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="Templatepage.Page2" ControlTemplate="{StaticResource ThemeMaster}">
    <ContentPage.Content>
        <StackLayout>
        <Entry Text="Name"></Entry>
        <Entry Text="Age"></Entry>
       <Button Text="Submit" BackgroundColor="Black" TextColor="Blue"></Button>
            
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

In App.Xaml we can work like this to make a template.

App.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Templatepage.App">
    <Application.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="ThemeMaster">
                <StackLayout>
                <Label Text="App Name" BackgroundColor="Blue"></Label>
                    <ContentPresenter>
                    </ContentPresenter>
                <Label Text="Terms and Conditions"></Label>
                <Label Text="You can not copy more code"></Label>
               </StackLayout>

            </ControlTemplate>
        </ResourceDictionary>

    </Application.Resources>
</Application>

App.Xaml.CS

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace Templatepage
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new Page2();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

OUTPUT

Wrap Up

Xamarin.Forms are one of the most powerful features of Xamarin which is useful to create the Cross-Platform application. With the help of which we can reach billions of smart devices. With no doubt we can say Xamarin has become the "choice" for the business due to its seamless API integration capability.

Next TopicXamarin.Forms Life Cycle

← prev next →