Views in Xamarin
The building blocks of cross-platform mobile application is Xamarin.Forms views. Views are the user-interfaces objects such as labels, buttons, and sliders which are known as controls or widgets in other programming environments.
Views can be divided into several categories:
Views for Presentation
Xamarin.Forms have three primary views for working with text:
Label: Label view is used to display the text. We can show multiple lines of text or a single line of text. Label can present text with multiple formatting options used in inline. The label view can wrap or truncate the text when it can't fit on one line.
Entry: Entry is used to accept the single-line text. Entry offers controls over colours and fonts. Entry has a password mode and can show placeholder text until we entered the text.
Editor: Editor is used to enter the multi-line text input. Editor offers the controls over colours and fonts. Editor like other-text presenting views shows the text property. Editor can be used to set and read the text presented by editor.
Xamarin.Forms use the image view to display the images on a page. It has two important pages:
To show the image on the Xamarin. Forms we should have to follow the following steps:
Here, we are going to add the image through the file name. For that firstly, we should have to download the image ("jpg image download"). Copy the image from the folder where we saved the file and paste it into a drawable folder for this we should have to follow these steps: the Android-> Resources-> Drawable.
Now we will learn how we can use the image in the backend code.
Images can be loaded from Local file, embedded resource or downloaded.
BoxView might seem simple at the first look, but it can be versatile and can produce almost all the visuals that are usually possible only with the vector graphics.
Views that initiate the command
When we click on a button, it responds and will perform a particular task in an application. In all the Xamarin.Forms button plays an important role. The button displays the short text string when it follows the command. Button can also display a bitmap image or a combination of text and image. To initiate the command user presses the button with a finger or with the mouse.
Coding behind the button_click here, button will count how many times button pressed.
The ImageButton displays an image and responds to tap or click, which directs an application to perform a particular task.
ImageButton View combines the Button view and Image view to create a button whose content is an image. When we press the button with our finger or click it with the mouse, it will perform a particular task for the application.
Setting the image source
ImageButton defines a source property which should be configured to display the image on the button
It is a part of the UI elements of Xamarin.Forms. It is used to search the data from a list or web page or anything. We can place the search bar to do a search from the web or from anywhere else. Mostly we use a search bar on Google homepage or any search engine.
Here, we will code in the following steps:
Creating a UI
Firstly we will create Xamarin.Forms project. Here, we will create an application and will make a ListView and search bar on a XAML file. Here, we can use Stack Layout and add a search bar and list view in the stack layout. The search bar will place on the top of the list.
Now we will create a class which contains two property Name and NUM like this:
Now we will add the binding to text cell of listview.
Here, class is create and binding is done. Now we will do coding in Xaml.CS file.
To add the data is ListView and functionality to search bar. Here, firstly we create a contact class then initialize it and add some new data. After this, we will set the item source of ListView to the list of contacts.
Code to add the data to our ListView:
Here we will make an event handler of Text Changed functionality of search bar like this:
Whenever the text in the search bar is changed, it can work on two possible conditions. If the text is null or empty, we will set the item source of list to temp data. Temp data contains the list of all the data. Else this can change the item source of list according to the LINQ query. This query works on temp data and finds the given text in the character match with the starting value of the name. Now we will see to search the some data:
Complete XAML code and CS code
Views for setting the Values
ListView is a view for presenting a list of data, especially the long list which needs scrolling. Xamarin.Forms provide ListView Control which can be used for displaying the scrollable list of data. ListView control is best for homogeneous data.
This code defines the user interface for the page which consists the ListView in a StackLayout. The ListView.ItemSource property specifies the item to display.
Populate with Data
Here, we will populate the data using the ItemSource property, which is of type IEnumerable. Here we will fill the ListView with data from a collection of the object of objects stored in it.
Monkey class will add
This code defines the Monkey object which stores the name, location and URL of an image which represents the monkey. Also, the class overrides the ToString method to return the name property.
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.
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.
TableView is a view for displaying the scrollable list of data or choices where there are rows which don't share the same template. TableView does not have the concept of ItemSource, so here we will add the items manually.
Structure: Elements in TableView are organized in sections. At the root of the TableView is the TableRoot which is a parent to one or more TableSection instances. Each TableSection consist of the heading and one or more ViewCell cases.