Xamarin.Forms (Cross Platform)
Pre-requisite for Xamarin.Forms (Cross Platform)
- Basic Knowledge of C#
- Some Knowledge about Xaml
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.
|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.|
The child element in the page known as Layout
|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.
The child element of Views is known as Cell.
|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|
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 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 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.
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
- 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|| |
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.
- 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.
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 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.
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.