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
The label is used to show the text in a single or multi-line text. Here, we can show the text with multiple formatting options in the same line.
Entry
To enter the text in a one-line uses the Entry. The entry has password mode.
Editor
To enter the text, which can take more than one line.

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.

MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Label"
             x:Class="Label.MainPage" 
              Title="Label Demo - XAML">
    <StackLayout Padding="5,10">
        <Label Text="Label Page"></Label>
        <Label LineBreakMode="WordWrap">
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="Red Bold, " TextColor="Red" FontAttributes="Bold" />
                    <Span Text="default, " Style="{DynamicResource BodyStyle}">
                        <Span.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding TapCommand}" />
                        </Span.GestureRecognizers>
                    </Span>
                    <Span Text="italic small." FontAttributes="Italic" FontSize="Small" />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>

</ContentPage>

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.

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Label"
             x:Class="Label.MainPage" 
              Title="Entry Page-XAML">
    <StackLayout Padding="5,10">
        <Label Text="Enter Your Name"></Label>
        <Entry Placeholder="UserName" TextColor="Black" BackgroundColor="Yellow"></Entry>
    </StackLayout>

</ContentPage>

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.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Label"
             x:Class="Label.MainPage" 
              Title="Editor Page-XAML">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Label Text="Hii i am Editor"></Label>
            <Editor Placeholder="Enter text here" PlaceholderColor="Olive" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Image
Image displays the Bitmap. In the common project,Bitmaps can be downloaded over the web and can embedd as a resource . We can share the images across platforms with Xamarin.Forms. Images are the important part of application navigation,branding and usability. Xamarin.Forms application needs to be share images across all the platforms. It also displays different images on each platform. Platform-specific images are also required icons and splash screens.

Display images

Xamarin.Forms use the image view to display the images on a page. It has two important pages:

Source: An image source instance that can be file, Uri, Resources which sets the image to display.
Aspect: how to size the image within the bounds it is being displayed within.

ImageSource: Instances can be obtained using the static method for each type of image source.
- From File: Requires a name of the file(filename) or path of the file (Filepath) which can be resolved on each platform.

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.

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Label"
             x:Class="Label.MainPage" 
              Title="Editor Page-XAML">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
// In the source we have to give the name of the image file.
            <Image Source="nature.jpg"></Image>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Output

Now we will learn how we can use the image in the backend code.

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Label"
             x:Class="Label.MainPage" 
              Title="Editor Page-XAML">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Image Source="" x:Name="Myimage"></Image>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

MainPage.XAML.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Label
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            Myimage.Source = ImageSource.FromFile("nature.jpg");


        }
    }

Output

FromUri: Requires Uri (Uniform Resource Indicator)object e.g. new Uri ("https://sample-videos.com/download-sample-jpg-image").
Here, we will display the images through the URI in which we give the path from the internet to the source.
From resource: Requires resource identifier to an image file embedded in the application or .Net Standard Library Project with a BuildAction: EmbeddedResource.
FromStream: Requires a stream that supplies the image data.

Aspect: Aspect property determines how the image will be scaled to fit the display area:
- Fill: Stretches the image to completely and fill the display area. The result of this can be an image is being distorted.
- AspectFill: Clips the images so that it fills the display area while preserving the aspect (i.e. no distortion).
- AspectFit: Letterboxes the image (if required) so that the entire image fits into the display area, with blank spaces added to top/bottom depend on whether the image is wide or tall.

Images can be loaded from Local file, embedded resource or downloaded.

BoxView: BoxView is a simple rectangle of specified width, height, and colour. We can use BoxView for decoration, rudimentary graphics, and interaction with the user through touch.

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Label"
             x:Class="Label.MainPage" 
              Title="Editor Page-XAML">
    <StackLayout>
        <Label Text="BoxView"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <BoxView Color="Accent"
                 WidthRequest="150"
                 HeightRequest="150"
                 HorizontalOptions="Center"
                 VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

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.

WebView: WebView is a view for displaying the web and HTML content on our app. WebView displays the HTML content inside our app.
- Content
  WebView supports the following types of content:
  - HTML & CSS website: WebView supports all the websites that are written using the HTML & CSS, which includes the support of javascript.
  - Documents: WebView is implemented using the native component on each platform that's why WebView is capable of showing the documents that are viewable on each platform. This means that PDF files work on iOS and Android.
  - HTML Strings: WebView can show HTML strings from memory.
  - Local Files: WebView can type of content in the app.

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Label"
             x:Class="Label.MainPage" 
              Title="Editor Page-XAML">
    <ContentPage.Content>
    <StackLayout BackgroundColor="Orange" Padding="5">
            <Entry Text="" x:Name="urlEntry" Placeholder="URL"></Entry>
            <Button Text="Get data from URL" Clicked="Button_Clicked" BackgroundColor="Wheat" TextColor="Black"></Button>
            <StackLayout>
                <ScrollView>
                    <WebView x:Name="BROWSER" VerticalOptions="FillAndExpand" HeightRequest="500"></WebView>
                </ScrollView>
            </StackLayout>
    </StackLayout>
    </ContentPage.Content>
</ContentPage>

MainPage.XAML.CS

using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Label
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
           // Myimage.Source = ImageSource.FromResource("Label.images.hey.jpg");


        }

        private void AbsoluteLayout_SizeChanged(object sender, EventArgs e)
        {

        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            var url = "http://"+urlEntry.Text;
            BROWSER.Source = url; 

        }
    }
}

OpenGLView

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:OpenGLVIEW"
             x:Class="OpenGLVIEW.MainPage">

    <StackLayout>
        <Label Text="OpenGLView"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <OpenGLView x:Name="openGLView"
                    VerticalOptions="FillAndExpand" />

        <Label x:Name="regretsLabel"
               Text="Sorry, OpenGLView cannot be used on this device!"
               FontSize="Large"
               HorizontalTextAlignment="Center"
               VerticalOptions="CenterAndExpand"
               Margin="10, 0" />
    </StackLayout>

</ContentPage>

Views that initiate the command

Buttons

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.

MainPage.XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MapView1"
             x:Class="MapView1.MainPage">

    <StackLayout>
        <Label Text="Button"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <Button Text="Click Me!"
                Font="Large"
                BorderWidth="1"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                Clicked="Button_Clicked" BackgroundColor="Yellow"/>

        <Label x:Name="label"
               Text="0 button clicks"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage> 

Coding behind the button_click here, button will count how many times button pressed.

MainPage.XAML.CS

using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace MapView1
{
    public partial class MainPage : ContentPage
    {
        static int ClickTotal;
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            ClickTotal += 1;
            label.Text = String.Format("{0} button click{1}", ClickTotal, ClickTotal == 1 ? "" : "s");

        }
    }
}

OUTPUT:

ImageButton

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

SearchBar

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.

Implementation

Here, we will code in the following steps:

Creating the UI class
Make a class and set the binding to the list view.
Add data to the list and add functionality to the search bar

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.

MainPage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:imagebutton1"
             x:Class="imagebutton1.MainPage">

    <StackLayout>
        <SearchBar TextChanged="SearchBar_TextChanged"></SearchBar>
        <ListView x:Name="list">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Name}" Detail="{Binding Num}">

                    </TextCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </StackLayout>

</ContentPage>

Now we will create a class which contains two property Name and NUM like this:

Contacts.CS

namespace imagebutton1
{
    public class Contacts
    {
        public string Name { get; set; }
        public string Num { get; set; }
        public string imgsource { get; set; }
    }
}

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:

public List<Contacts> tempdata;
       

        public MainPage()
        {
            InitializeComponent();
            data();
            list.ItemsSource = tempdata;

        }

        public void data()
        {
            // all the temp data  
            tempdata = new List<Contacts> {
                new Contacts(){ Name = "Shaily", Num = "2323423"},
                new Contacts(){ Name = "Vishi", Num = "23423"},
                new Contacts(){ Name = "Vaishali", Num = "233423423"},
                new Contacts(){ Name = "AkshayILU", Num = "2423"},
                new Contacts(){ Name = "Aman", Num = "323423"},
                new Contacts(){ Name = "Arpita", Num = "2323423"},
                new Contacts(){ Name = "Himanshu", Num = "2323423"},
                new Contacts(){ Name = "Arvind", Num = "2323423"},
                new Contacts(){ Name = "Neetu", Num = "2323423"},
                new Contacts(){ Name = "etc", Num = "2323423"},
            };
        }

Here we will make an event handler of Text Changed functionality of search bar like this:

Code

private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
        {
            //that's all you need to do a search   

            if (string.IsNullOrEmpty(e.NewTextValue))
            {
                list.ItemsSource = tempdata;
            }

            else
            {
                list.ItemsSource = tempdata.Where(x => x.Name.StartsWith(e.NewTextValue));
            }
        }

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

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:imagebutton1"
             x:Class="imagebutton1.MainPage">

    <StackLayout>
        <SearchBar TextChanged="SearchBar_TextChanged"></SearchBar>
        <ListView x:Name="list">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Name}" Detail="{Binding Num}">

                    </TextCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </StackLayout>

</ContentPage>

MainPage.XAML.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace imagebutton1
{
    public partial class MainPage : ContentPage
    {
        public List<Contacts> tempdata;
       

        public MainPage()
        {
            InitializeComponent();
            data();
            list.ItemsSource = tempdata;

        }

        public void data()
        {
            // all the temp data  
            tempdata = new List<Contacts> {
                new Contacts(){ Name = "Shaily", Num = "2323423"},
                new Contacts(){ Name = "Vishi", Num = "23423"},
                new Contacts(){ Name = "Vaishali", Num = "233423423"},
                new Contacts(){ Name = "AkshayILU", Num = "2423"},
                new Contacts(){ Name = "Aman", Num = "323423"},
                new Contacts(){ Name = "Arpita", Num = "2323423"},
                new Contacts(){ Name = "Himanshu", Num = "2323423"},
                new Contacts(){ Name = "Arvind", Num = "2323423"},
                new Contacts(){ Name = "Neetu", Num = "2323423"},
                new Contacts(){ Name = "etc", Num = "2323423"},
            };
        }

        private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
        {
            //that's all you need to do a search   

            if (string.IsNullOrEmpty(e.NewTextValue))
            {
                list.ItemsSource = tempdata;
            }

            else
            {
                list.ItemsSource = tempdata.Where(x => x.Name.StartsWith(e.NewTextValue));
            }
        }
    }
}

Views for setting the Values

ListView

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.

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListView"
             x:Class="ListView.MainPage">
    <StackLayout Margin="20,35,20,20">
        <ListView>
            <ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Baboon</x:String>
                    <x:String>Capuchin Monkey</x:String>
                    <x:String>Blue Monkey</x:String>
                    <x:String>Squirrel Monkey</x:String>
                    <x:String>Golden Lion Tamarin</x:String>
                    <x:String>Howler Monkey</x:String>
                    <x:String>Japanese Macaque</x:String>
                </x:Array>
            </ListView.ItemsSource>
        </ListView>
    </StackLayout>

</ContentPage>

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.

Output

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

Monkey.cs

namespace ListView
{
    class Monkey
    {
        public string Name { get; set; }
        public string Location { get; set; }
        public string ImageUrl { get; set; }

        public override string ToString()
        {
            return Name;
        }
    }
}

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.

DatePicker

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TimePickerView"
             x:Class="TimePickerView.MainPage">

    <StackLayout>
        <Label Text="DatePicker"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <DatePicker Format="D"
                    VerticalOptions="CenterAndExpand"
                    Margin="10, 0" />

    </StackLayout>

</ContentPage>

TimePicker

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App15"
             x:Class="App15.MainPage" BackgroundColor="Aqua">
    <ContentPage.Content>
        <StackLayout Padding="10">
            <Label Text="DatePicker" FontSize="20" HorizontalOptions="Center"></Label>
            <DatePicker x:Name="dp" MaximumDate="2020/12/31" MinimumDate="2000/12/31"></DatePicker>
            <TimePicker x:Name="tp"></TimePicker>
            <Button x:Name="button" Clicked="Button_Clicked" Text="Details"></Button>
            <Label x:Name="details"></Label>
        </StackLayout>
    </ContentPage.Content>

    

</ContentPage>

MainPage.XAML.CS

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App15
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            var date = dp.Date;
            var time = tp.Time;
            details.Text = string.Format("Date:{0}\n Time:{1}", date, time);
        }
    }
}

OUTPUT

TableView

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.

MainPage.XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TableView"
             x:Class="TableView.MainPage">
    <TableView Intent="Settings">
        <TableRoot>
            <TableSection Title="Ring">
                <SwitchCell Text="New Voice Mail" />
                <SwitchCell Text="New Mail" On="true" />
            </TableSection>
        </TableRoot>
    </TableView>

</ContentPage>

Output