Xamarin.Forms is implemented as a .NET Portable Class Library ( PCL), which makes it very easy to share the Xamarin.Forms API’s across a variety of platforms. The first step to getting started is to create a solution for the various projects that will make up the application.

A Xamarin.Forms solution can be created in Xamarin Studio or Visual Studio and will typically contain the following projects:

• Portable Library – This project is the cross platform application library that holds all of the shared code and share UI.

• Xamarin.Android Application – This project holds Android specific code and is the entry point for Android applications.

• Xamarin.iOS Application – This project holds iOS specific code and is the entry point for iOS applications.

• Windows Phone Application – This project holds the Windows Phone specific code and is the entry point for Windows Phone applications.

In this tutorial we are just going to see how to create Xamarin.Forms and try to understand its projects and working of important files.

Let’s Start:
To create a Xamarin.Forms application we are going to create a new solution, go into Xamarin and New solution

Go into C#->Mobile Apps-> Blank XamarinApp(Xamarin.Forms Portable) and give name of solution as “HelloXamarinForm”

In Solution Tab you can see files for your iOS and Android and also a common project , for windows phone development you have to use Visual Studio with Xamarin.

Now go in HelloXamarinForm, you will find HelloXamarinForm.cs. Open the file:

namespace HelloXamarinForm
{
    public class App : Application
    {
        public App ()
        {
            // The root page of your application
            MainPage = new ContentPage {
                Content = new StackLayout {
                    VerticalOptions = LayoutOptions.Center,
                    Children = {
                        new Label {
                            XAlign = TextAlignment.Center,
                            Text = "Welcome to Xamarin Forms!"
                        }
                    }
                }
            };
        }
}

Here, App is the main class that is responsible to generate UI for Android and iOS.
-MainPage gets instance of ContentPage which is a type of Page in Xamarin.Xorms that is used to display content.
-StackLayout is a type of Linear layout that holds controls in it.
-Here we simply declare a Label to display text in our view, we can create a instance of label and use it in our view but that we are going to do latter in our tutorial.

We have a Android and a iOS project in our this solution. This App class is going to be used in that both plateform to load UI and backend code.

Go to HelloXamarinForm.Droid and open MainActivity.cs:

namespace HelloXamarinForm.Droid
{
    [Activity (Label = "HelloXamarinForm.Droid", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity
    {
        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);

            global::Xamarin.Forms.Forms.Init (this, bundle);

            LoadApplication (new App ());
        }
    }
}

Here in LoadApplication method we create an instance of App that will initialize Xamarin.Forms framework, and then load your Xamarin.Forms application.

Now go to HelloXamarinForm.iOS project and open AppDelegate file:

namespace HelloXamarinForm.iOS
{
    [Register ("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching (UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init ();

            LoadApplication (new App ());

            return base.FinishedLaunching (app, options);
        }
    }
}

Here in AppDelegate file as same as Android we create a instance of App and initialize the Xamarin.Forms framework and start up the Xamarin.Forms application. This is done inside the FinishedLaunching method, as demonstrated in the code.

Try to build and run the app and you will see the application is run in both Android and iOS.

If you like this tutorial then you can download full copy of the code from github. 

After we complete our tutorial it will look like this:

Let’s Start:
Create a new Solution and go to C#-> Mobile Apps -> Blank App (Xamarin.Forms Portable) and give name “StdControlsXamarinForm”.

Go to StdControlsXamarinForm.cs file and you will see code for Label , delete that code because we don’t need it.
Now in Constructor of App create object of a Label, Button and Image:

public class App : Application
{
        public App ()
        {
            Label lbl_name = new Label {
                Text = "This is Label",
                //VerticalOptions=
            };
            Image img = new Image {
                Source="Default.png",
                HeightRequest=200,
                WidthRequest=200
            };
            Button btn_click = new Button {
                Text = "Click here"
            };
            // The root page of your application
            MainPage = new ContentPage {
                Content = new StackLayout {
                    VerticalOptions = LayoutOptions.Center,
                    Children = {
                        lbl_name, img,btn_click
                    }
                }
            };
        }
}

Here, we created a Label, Image and Button control to display in our tutorial app. Now try to build and run the app.

We’ve added a button but when you click on it, it will not do anything, because we didn’t handle it’s click event of button.
For that add this code:

btn_click.Clicked += (sender, e) => {
                lbl_name.Text="Button Clicked";
};

Now try to build and run the app, if you did everything right you will see your demo app like:

If you like this tutorial then you can download full copy of the code from github. 

Action sheets consist of a really convenient and fast way to display a bunch of options that the user should select from, and it is widely used in great number of applications.

• First create a new solution and name it as “ActionSheetXamarinForm” .
  
• First of all we go to “ActionSheetXamarinForms.cs” and add the following code inside the constructor.
  

  public App ()
  {
     MainPage = new NavigationPage (new ActionSheetPage ());
  }

• Above line of code will set “ActionSheetpage” as the main page and add a Navigation Bar to the main page.
• Navigation Bar is neccessory to invoke “DisplayActionSheet” it will not work without adding it.

• Create a new file and name it as
  

• Now add one label and two button inside the constructor the code for it is as follows
  

  var label = new Label
   {
        Text = "ActionSheetDemo",
        VerticalOptions = LayoutOptions.CenterAndExpand,
        HorizontalOptions = LayoutOptions.CenterAndExpand, 
    };
  
  var btn1 = new Button
        { 
         Text="ActionSheet Simple ",
        VerticalOptions = LayoutOptions.CenterAndExpand,
             	HorizontalOptions = LayoutOptions.CenterAndExpand, 
        };
  
        var btn2 = new Button
  { 
             	Text="ActionSheet Cancel/Delete",
              VerticalOptions = LayoutOptions.CenterAndExpand,
              HorizontalOptions = LayoutOptions.CenterAndExpand, 
              
  };

• The above code will create one label and two buttons.
• The main task is to create and display an actionsheet while the button is being clicked so we have to apply a click event on both the buttons add the following code to create a actionsheet in click event of the button.
  

  btn1.Clicked += async (sender, e) =>
   {
  
   var action = await DisplayActionSheet ("ActionSheet: Send to?", 
  
  "Cancel", null, "Email", "Twitter", "Facebook");
  
   };
  
  
   btn2.Clicked += async (sender, e) => 
  {
  
    var action= await DisplayActionSheet ("ActionSheet: Save Photo
  
  	?","Cancel","Delete","Photo Roll","Email");
              
  };

• Now that we have created the click events for the button. Its time to add the label and the button as the children of the “ActionSheetPage”
  

  Content = new StackLayout 
  {
         Children = 
         {
          label,btn1,btn2
         }
  };

Now we have finished with the application run you app in both android and ios simulator and test them.
Simulator for android and iOS will look like below.

Android simulator will look like below

If you like this tutorial then you can download full copy of the code from github. 

The following demo will show you how to create and use a listview in the xamarin.Forms

Create a new solution and name it as “ListVIewXamarinForms”.

Now we have to create a listview and add some items in to the listview for display purpose
Open the ListviewXamarinForms.cs file and make the following changes.
Create a list and name it as “item” The following code will create a list.

List <string> item = new List<string> ();

The list is being created but still there is nothing to display so we had to add some content to the list as follows.

item.Add ("Apple");
item.Add ("Banana");
item.Add ("Graps");
item.Add ("Orange");
item.Add ("Pineapple");
item.Add ("Strawberry");
item.Add ("Lemon");
item.Add ("Mango");
item.Add ("Cherry");
item.Add ("Watermelon");

Now we have to create a listview add the following code to create a listview.

var listview= new ListView
{
      RowHeight=40
};

After creation of the list we have to assign the data to the listview . We have to use the previously created list here add the following code to assign the list to listview.

listview.ItemsSource= item;

Now we have finished with the listview all we have to do just add the listview control to the layout

Run your application and it will look like below.

The same code will work on Android as well as iOS both. The simulator will look like above on both the platform.

If you like this tutorial then you can download full copy of the code from github. 

Goto the “ListViewXamarinForms.cs” file and make the following changes to it.
Create a class name “data” add two string variable named “Img”and”Name”.

public string Name { get; set;}
public string Img { get; set;}

Next in the constructor of the newly created class add the following code into it.

public data(string name,string img)
{
      this.Name=name;
      this.Img=img;
}

Now in the constructor of the main class “App” creates a new variable named “img” and assign it the memory for storing an image.

Now that we have created a variable for the image we have to assign an image to the newly created image by adding the following lines to it.

var img = new Image ();
img.Source="Default.png";

“Default.png” is the default image name,that is stored in the resource folder of the project.
Now to set the image with the name of it we have to create a List and the type of the list will be the newly created class “data”.

The following code creates a list.

List<data> data = new List<data>

Now we have to add the data to the newly created list remember that we can not add data to the list by using the “Add” function because we have created List of the class type not the inbuilt user defined type.

For that we have to use the constructor of the class “data” the code is given below for adding data to the list

List<data> data = new List<data> 
{
   new data ("Apple", "contact.png"),
   new data("Banana", "contact.png"),
   new data ("Graps", "contact.png"),
   new data("Orange", "contact.png"),
   new data("Pineapple", "contact.png"),
   new data("Strawberry", "contact.png"),
   new data("Lemon", "contact.png"),
            
};

In the above snippet of the code we have called the constructor of the class “data” and the arguments re the name of the item and the image for it.

To display the header at the top of the listview we have to add the following code.

Label header = new Label
{
    Text = "ListView Custom Cell",
    Font = Font.BoldSystemFontOfSize(30),
     HorizontalOptions = LayoutOptions.Center
         
};

We have to create a cell and a list view for that adds the following code.

var Cell = new DataTemplate (typeof(ListCell));

ListView listview= new ListView
{
       ItemsSource= data,
       ItemTemplate = Cell
                
};

Note that we have to set the itemsource as the “data” and itemtemplate as the newly created “cell”.

Now we have to add the listview and the header to the layout for it add the following code.

MainPage = new ContentPage 
{
     Content = new StackLayout
     {
     Padding= new Thickness(0,15,0,0),
     VerticalOptions = LayoutOptions.Center,
     Children = {
                        header,listview
                  }
     }
};

Now create an new file and name it as “ListCell.cs”

First of all inherit the “ViewCell” to the ListCell class for using the cell.
We have to first display an image on the starting of the layout so we have to add the following code to the constructor of the class.

var img_image = new Image () 
{
       HorizontalOptions = LayoutOptions.Start
};

To set the height and the width of the image add the following code.

img_image.WidthRequest = img_image.HeightRequest = 40;

We have to set the binding of the img_image as follows.

img_image.SetBinding (Image.SourceProperty, "Img");

Next we arte going to create a new layout and we will be using the img_image in that layout so this variable will be referred as “Img” in the newly created layout for that we will need to have binding.

We have to call a function and later on we will see the implementation of it.

var nameLayout = CreateNameLayout();

Now we are going to create a new layout of the type “StackLayout” and set the orientation and the children of that layout add the following code.

var viewLayout = new StackLayout()
{
    Orientation = StackOrientation.Horizontal,
    Children = { img_image, nameLayout }       };

View = viewLayout;

The above code will set the current view as the newly created ViewLayout.

Now we have to give the implementation of the function “CreateNameLayout”. In the body of the function we area going to create a new label and set the binding of the newly created label as follows.

We also have to create a new layout which we area going to return from the function and set the newly created label as the children of the newly created layout.

At the end of the function return the layout to from where we are calling our function.

Now run your application on both android and iOS and see examine the simulator of both of them.

If you like this tutorial then you can download full copy of the code from github. 

Now Create New Solution.

The MainPage is initialized with a MainView, which we will define below, wrapped into a NavigationPage, which will create a navigation bar above the content.

Now Open The NavigationSegueXamarinForms.cs and Initialize NavigationBar.

public App ()
{
       MainPage = new NavigationPage (new MainView ());
}

From Above Code We Are Redirect To the MainView and Add the Navigation Over That Page.

Now Open The MainView.cs File and Define the Button in that File. Below Code For Define Button.

var btn_PushAsync = new Button 
{
       Text = "PushAsync"
};

Here We give The Button Name To ‘btn_PushAsync’ and Give That Button text to ‘PushAsync’.

Next We Perform The Click Event On btn_PushAsync Button.Below Code For Button Click Event.

btn_PushAsync.Clicked+= async (sender, e) => 
{
         await Navigation.PushAsync(new SecondPage());
};

When We Click On PushAsync Button It Will Redirect to SecondPage

Next We Put That Button To View

Content = new StackLayout 
{ 
        Children = 
        {
          btn_PushAsyn
        }
};

Now Create a New File ‘SecondPage’.So When user Click On PushAsync Button That Redirect to This SecondPage.

Now Open The SecondPage.cs File and Define More Button on That and Also Perform The Click Event of All Button. Below Code For That.

public SecondPage ()
{
            var btn_PopAsync = new Button 
            {
                Text = "PopAsync"
            };
            var btn_PushModalAsync = new Button  
            {
                Text = "PushModalAsync"
            };
            var btn_PopModalAsync = new Button 
            {
                Text = "PopModalAsync"
            };
            var btn_PopToRootAsync = new Button 
            {
                Text = "PopToRootAsync"
            };

            btn_PopAsync.Clicked+= async (sender, e) => 
            {
                await Navigation.PopAsync();
            };
            btn_PushModalAsync.Clicked+= async (sender, e) => 
            {
                await Navigation.PushModalAsync(new MainView());
            };
            btn_PopModalAsync.Clicked+= async (sender, e) => 
            {
                await Navigation.PopToRootAsync();
            };
            btn_PopToRootAsync.Clicked+= async (sender, e) => 
            {
                await Navigation.PopToRootAsync();
            };
            Content = new StackLayout { 
                Children = {
                    btn_PopAsync,
                    btn_PushModalAsync,
                    btn_PopModalAsync,
                    btn_PopToRootAsync
                }

};

Now Our app is Ready to Run.Lets Run The App.

In Ios Device.

In Android Device.

If you like this tutorial then you can download full copy of the code from github. 

We are going to update code in our old ListViewXamarinForms solution, so if you don’t know how we implement it please refer it.

Let’s Start:

Row Selection:

For Row Selection in Xamarin.Forms there are 2 methods that can used to handle selection.

• ItemTaped
• ItemSelected

The basic difference between ItemTaped and ItemSelected is that ItemSelected Code that handles this event should first check thee.SelectedItem is not null because the event is called again when de-selecting the row

In our tutorial we are going to use ItemSelected:

listview1.ItemSelected += (sender, e) => {
                data d=(data) e.SelectedItem;
                DisplayAlert("ListView Item select",d.Name+" Selected","Ok");
    
};

We used ViewModel to store the data and Row Selection will return object of our ViewModel so first we have to cast it in our ViewModel object to access its value.
Then we simply display this row selection in Alert.

Delete Button in in ListView in iOS and Android (Context Action)

Context actions can be implemented in any Cell subclass (as long as it isn’t being used as a group header) by creating MenuItems and adding them to the ContextActions collection for the cell. You must at least configure the following:
• Text – the string that appears in the menu item.
• Clicked – the event when the item is clicked.
• IsDestructive – (optional) when true the item is rendered differently (eg. a red background on iOS).
In our tutorial we have class named ListCell that implement ViewCell class:

var deleteAction = new MenuItem {
            Text = "Delete", IsDestructive = true 
};

This will create a MenuItem and set it’s text to “Delete” and IsDestructive will show this button RED in iOS.

deleteAction.SetBinding (MenuItem.CommandParameterProperty, new Binding ("."));
            deleteAction.Clicked += (sender, e) => {
                data d;
                var mi = ((MenuItem)sender);
                d= (data)mi.CommandParameter;
                Debug.WriteLine ("delete Context Action clicked: " + mi.CommandParameter +"Name= "+ d.Name +" Number="+d.Number);
            };

We created and bind the MenuItem now we have to add this into the view so :

ContextActions.Add (deleteAction);

Now try to build and run the app, if everything is done as we mention your application will look like this:

For iOS:

For Android:

If you like this tutorial then you can download full copy of the code from github. 

In this tutorial we are going to see how to pass data between different pages in Xamarin.Forms.

We simply try to add a Entry (TextBox, TextField) and a Button and when button press it send the text entered to the second page.

Let’s Start:
For this, we will create a new solution, go to new solution select -> C# -> Mobile Apps -> Blank App(Xamarin.Forms Portable) and give it name “PassDataXamarinForms”

Create 2 files that extendsContantPage give it name as “MainPage” and “SecondPage”.

Set NavigationPage to the “MainPage.cs”, if you don’t know about it refer our old tutorial of NavigationPage.

Now in MainPage.cs add a Entry and Button Control:

public MainPage ()
{
            Entry txt_name = new Entry {
                WidthRequest=250,
                HorizontalOptions = LayoutOptions.Start,
                Placeholder="Enter Name"
            };
            var txtlayout = new StackLayout {
                Padding= new Thickness(35,20,0,0),
                Children={
                    txt_name,
                },
                    
            };
            txtlayout.WidthRequest = 10;
            Button btn_send = new Button{
                Text="Send"
            };

            btn_send.Clicked += (sender, e) => {
                Navigation.PushAsync(new SecondPage(txt_name.Text));
            };

            Content = new StackLayout { 
                Children = {
                    txtlayout,btn_send
                }
            };
            Title="First Page";
}

In Navigation.PushAsync we pass data of Entry in Constructor.
For this we have to change in the Constructor method of SecondPage:

public SecondPage (string data)
{
            string Name = data;
            Label lbl_name = new Label {
                Text ="hello "+ Name
            };
            Content = new StackLayout { 
                Children = {
                    lbl_name
                }
            };
            Title="Second Page";
}

Now just try to build and run the app, if everything is fine you will see your app like:

For iOS:

For Android:

If you like this tutorial then you can download full copy of the code from github. 

Let’s Start:

Create a new solution for Xamarin.Forms and name is “TabbedPageXamarinForms”.

Create a new ContentView file and name it as TabPage and extend it with TabbedPage.
Set NavigationPage to to the TabPage through:

public class App : Application
{
        public App ()
        {
            // The root page of your application
            MainPage = new NavigationPage (new TabPage ());
        }
}

We need different Page to display in TabbedPage, create 3 another ContantPage files and name it “FirstPage”,“SecondPage”,“ThirdPage”.

Now write below code in TabPage.cs

public class TabPage : TabbedPage
{
        public TabPage ()
        {
            this.Children.Add (new FirstPage (){ Title = "First" });
            this.Children.Add (new SecondPage (){ Title = "Second" });
            this.Children.Add (new ThirdPage (){ Title = "Third" });
            this.Title="TabbedPage";
        }
}

Now try to build and run the app you will see your app like:

For iOS:

For Android:

If you like this tutorial then you can download full copy of the code from github. 

In this demo we are going to implement a single webview in our application.

Let’s Start:

We are just simply going to add a label and a webview in our application demo.

Create a new Xamarin.Forms solution and name it as “WebViewXamarinForms”.
Create a new ContentPage file and name it as WebViewPage, add NavigationPage to it.

Now in WebViewPage.cs:

public class WebViewPage : ContentPage
{
        public WebViewPage ()
        {
            Label lbl_header = new Label {
                Text = "WebView",
                HorizontalOptions = LayoutOptions.Center
            };
            WebView webview = new WebView {
                Source = "http://google.com",
                VerticalOptions = LayoutOptions.FillAndExpand
            };
            this.Content = new StackLayout {
                Children = {
                     webview
                }
            };
        
        }
}

Now try to build and run the app.
In iOS it will run without changes but for Android you have to add permission for Internet in AndroidMenifest.xml file.

If you like this tutorial then you can download full copy of the code from github.