Javatpoint Logo
Javatpoint Logo

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.Forms

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.

Xamarin.Forms

Page

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

Xamarin.Forms
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

Xamarin.Forms
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.

Xamarin.Forms

Cell

The child element of Views is known as Cell.

Xamarin.Forms
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
Xamarin.Forms

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

Xamarin.Forms

Procedure to Create the Content Page

Click on FILE-> NEW->PROJECT

Xamarin.Forms

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

Xamarin.Forms

Give the Name of the Application-> Click Ok

Xamarin.Forms

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

Xamarin.Forms

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

Xamarin.Forms

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

MainPage.XAML.CS

Output

Xamarin.Forms

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

MainPage.Xaml.CS

OUTPUT

Xamarin.Forms

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).

Add Page2.Xaml

MainPage.Xaml

MainPage.Xaml.CS

OUTPUT

Xamarin.Forms

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

Xamarin.Forms

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

MainPage.Xaml.CS

App.Xaml

HomePage.Xaml

HomePage.Xaml.cs

OUTPUT

Xamarin.Forms

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

Xamarin.Forms

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

Navigation Page

Xamarin.Forms

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

Xamarin.Forms

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

Output

Xamarin.Forms Xamarin.Forms

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

MainPage.XAML.CS

Output

Xamarin.Forms

4. Picker (Known as a dropdown list)

MainPage.XAML.CS

Output

Xamarin.Forms

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.

Xamarin.Forms

Process 1

MainPage.XAML

MainPage.Xaml.CS

OUTPUT

Xamarin.Forms

Process 2

ICON Insertion

MainPage.XAML

MainPage.Xaml.CS

Page1.Xaml

Page2.Xaml

APP.Xaml

Coding

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

Xamarin.Forms

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

Xamarin.Forms
Xamarin.Forms

Carousel Page Look

Xamarin.Forms

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

App.Xaml

OUTPUT

Xamarin.Forms

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

OUTPUT

Xamarin.Forms

With Template

Page2.Xaml

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

App.Xaml

App.Xaml.CS

OUTPUT

Xamarin.Forms

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.






Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA