38 Different Xamarin.Forms UI Controls

Let’s start with the Application User interface (UI). It is the interface of the Application, which is available for the users to interact with the app.

Here, we are going to discuss 38 different Xamarin.Forms UI controls. In Xamarin forms, we can use all the native controls of each targeted platform.

Four main controls groups of Xamarin.Foms UI are given below.

1. Pages
   Pages refers to the main page i.e. which type of page you are using. e.g. Content page, Navigation page.

2. Layout
   Layout is the layout, which you are using in your page. e.g. Stack Layout, Grid Layout.

3. Views
   Views are the single UI elements, which you are using in your layout e.g. button, label.

4. Cell
   Cells are used to present the data in the table view and list view. e.g. ImageCell, TextCell.

Pages

• Content Page
  It can display a single view. You can place any layout or view in it. You can use content page to show any view with a single element. This element can be anything like label, an entry or you can also use layout in the content page. It doesn’t matter that your layout contains more than one element; it can be placed in a content page. Layouts are also discussed below.
  
  
  

• Navigation Page
  Use it to make navigation between the pages. i.e. move from one page to another. Most of the mobile Applications have more than one page. Thus, you must use navigation page in your Application to move from one page to another.
  
  
  

• Tabbed Page
  Navigate from one page to another via tabs. Via tabbed, you can move from one tab to another. This is also a type of navigation page. In this page, you have multiple tabs and all the tabs are in front of you and you can move from one tab to another tab easily. E.g. Instagram is based on Tabbed page.
  
  
  

• Master Detail Page
  A page that manages two panes of information. Master Detail page contains two panes. Let’s discuss an example of it that you have a list of contacts and you click on a specific contact to see its details and all the details of it are shown on the same page on second pane. This is the Master detail page, where you have two panes.
  
  
  

• Template Page
  It can display full screen content with a control template and the base class for Content page.
  
  
  

• Carousal Page
  Navigate from one page to another via swipe gesture. This is another type of navigation page but in Carousel page, you can swipe to see Next page. Swipe left or swipe right to navigate between the pages, as shown below.
  
  
  

Layout

• Stack Layout
  It can place elements in stack; either in vertical or in Horizontal orientation. In vertical orientation, you can place all the elements vertically or if you set orientation to horizontal, then all its elements are automatically placed in horizontal way. This is the most simple and easy to use layout. You can also see its example here
  
  
  
  
• Absolute Layout
  Use to position its child elements at absolute requested positions. Absolute layouts are used when you want to move away from all the layouts restrictions and make layout totally different. We can use absolute and proportional values to set height, width, X-Axis and Y-Axis of an element.
  
  
  

• Grid Layout
  Divide layout in rows and columns. Your full screen is divided into rows and columns and you can utilize them to make your desired view. Mostly Grid layouts are seen in pictures gallery and other Grid layouts. If you want to learn more about grid layout, visit here.
  
  
  

• Relative Layout
  Use to position its elements relative to other element. For example, you have navigation bar at the top of your Application and you want this navigation bar to be always viewed 20 units down from main container. Now, you may set its y-axis to 20 units down relative to its container.
  
  
  

• Content View
  An element with a single content. ContentView has very little use of its own.
  
  
  

• Scroll View
  It is used for scrolling a page. If you want to show more and more data on an Application page, then don’t take any tension; Scroll View is always there to help you. You can scroll screen up and down to view more data, as show in the image given below. E.g. Facebook and other big social media applications require scrolling.
  
  
  

• Content Presenter
  A layout manager for templated views. It is used within a ControlTemplate to mark, where the content to be presented appears.
  
  
  

• Frame
  It contains a single child with framing options. Frame has a default Layout and Padding is of 20.
  
  
  

• Template View
  An element, which displays content with a control template and the base class for ContentView.
  
  
  

Views

• Activity Indicator
  It is used to indicate that something is working. You can see small circle rotating in an image shown below. This is the sign of an Activity Indicator. It is used to satisfy the user that our Application starts working on its given command.
  
  
  

• BOX View
  A simple box with solid colors. Change box size, color and other properties to make it more attractive.
  
  
  

• Button
  A simple button that can perform any action, which you set on the clicked event of a button. On button, you can set navigations and different task to be done according to your Application logic.
  
  
  

• Date Picker
  It shows a calendar, which is used to pick a date. Date Pickers are mostly seen on Calendar apps, where you can set the events on Date Picker or pick the current date that the user sets it on Picker.
  
  
  

• Editor
  It is a multiple line Text Editor. If you are familiar with an HTML, then you can say an Editor is a text area, which is used to get multiple line inputs from the user. Editor is used to edit multiple lines e.g. when you want long address or the values from the user , than an Editor is used.
  
  
  

• Entry
  Edit single line to text. It is also used to take an input from the user. It is mostly used when small input is required from the user. E.g. if you want a user E-mail or a password, then an entry is the best suitable option for you. In the picture given below, you can see the entry element.
  
  
  

• Image
  It is use to show any image. You can make your application look and fell better by using attractive images. Or you may use images to showcase you products in your Application or many more.
  
  
  

• Label
  It can view some text. Any type of text or description is displayed in a label. Labels makes the users to understand your Application more easily.
  
  
  

• List View
  It is used to present the list of data. You can use different data templates in the list. i.e. TextCell or ImageCell. TextCell contains text and its description whereas an ImageCell contains an image and with a TextCell, you can make you own ViewCell to display the data in your list, as per your desire.
  
  
  

• OpenGL View
  Works only for iOS and Android projects.
  
  
  

• Picker
  A view control is used to pick an element from the list.
  
  
  

• Progress Bar
  It is used to show the progress. On each step of your backend work, you can set Progress Bar value. Progress Bar is used to satisfy the user and makes him aware that his work is progressing. It can show the percentage of work done and remaining work to the user.
  
  
  

• Search Bar
  It is used to search the data from a list or anything. You can place Search bar to make search from a web or from anything. Most of us daily use Search Bar on Google home page.
  
  
  

• Slider
  A control that inputs a linear value.
  
  
  

• Stepper
  It is control that inputs a discrete value, which is constrained to a range.
  
  
  

• Switch
  Toggle button/ on or off button. It is used when you give the user only two choices ‘Yes’ or ‘No’. In real word, we can also use switches to on or off our appliances. This switch is also something like that.
  
  
  

• Table View
  It contains rows and columns. It contains rows and columns to place your data in more presentable way.
  
  
  

• Time Picker
  Time Picker is used to pick a time, which is mostly seen in an Alarm Clock Application and other Application, where we want to set an event or schedule anything.
  
  
  

• Web View
  It is used to present Web data or HTML content.
  
  
  

Cell

Cells are the specialized elements, which are used to present a date in List view and table view. Cells are the elements, which are specially designed to be added in ListView and TableView Controls.

Different types of cells are shown below.

• Entry Cell
  A cell that contains a label and single line entry field.
  
  
  

• Image Cell
  A cell that includes an image in it.
  
  
  

• Text Cell
  A cell is the one, which shows the text and the detail.
  
  
  

• Switch Cell
  It is a cell with a label and on/off switch.
  
  
  

Note

All Images are taken from https://developer.xamarin.com