Xamarin.Forms (Cross Platform)
Pre-requisite for Xamarin.Forms (Cross Platform)
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.
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.
In a device, from the navigation bar to the end of the screen known as a page.
The child element in the page known as Layout
The layout contains lots of elements are known as Views.
The child element of Views is known as Cell.
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.
In Xamarin, Six Types of pages are available.
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.
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
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.
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 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.
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).
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.
What we will Learn
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
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:
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.
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.
After Clicking on this highlighted arrow we will switch back to the Login Page.
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.
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.
4. Picker (Known as a dropdown list)
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.
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.
The process will repeat for all the pages to add the icon.
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 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
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.
Without using Template
In App.Xaml we can work like this to make a template.
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.