Getting Started – Xamarin.Forms

Introduction:

Xamarin.Forms is a cross platform UI toolkit that allow user to efficiently create native user interface layout. Code can be shared all the device (IOS,Android , Windows Phone and Win store app) .

System Requirement:

1. Mac / Windows 7++ Machine with 8 GB RAM
2. Xamarin  Studio 5.0 or new version/ Visual Studio 2012 or new version

Support Devices:

Xamarin.Forms applications can be support following operating systems devices

• Android 4.0.3 (API 15) or higher
• iOS 6.1 or higher
• Windows Phone 8.1
• Windows 8.1
• Windows 10 Universal Apps
• Windows Phone 8 Silverlight

                                 

How to create First Xamarin.Form Application?

Step 1:

Open Visual Studio ( Run ➔ Devenv.exe)

• My system having following VS  version with xamarin

Step 2:

Create New Project ( File ➔ New ➔ Project )

Step 3:

Open New Project template Cross Platform ➔ Blank App(Xamarin .Forms .Portable)

*** Solution and project name is  DevXamarinForms

Visual Studio automatically creates following projects,

DevXamarinForms.Android, DevXamarinForms.iOS, DevXamarinForms.UWP, etc and a shared Portable Class Library (PCL) project named called DevXamarinForms (Refer below)

After create project solution should be like below

Step 4:

Right Click on Portable Project (DevXamarinForms) ➔ Add ➔ New Item ➔Cross-Platform ➔ Forms Xaml Page and name it HomePage.CS

After that two new file are created under portable library HomePage.XAML and HomePage.XAML.cs

In  HomePage.XAMl , the below code will automatically added into xaml page

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"             x:Class="DevXamarinForms.HomePage"> <Entry x:Name="txtresult" Text="welcome Devenvexe.com" />  <!--Add this TextBox--> </ContentPage>

The xml two name space (xmls) are added into xaml page and refered xamarin and micrsoft url with version.

The HomePage.xaml.cs code-behind file looks like this.

using Xamarin.Forms; namespace DevXamarinForms {    public partial class HomePage : ContentPage    {        public HomePage()        {            InitializeComponent();        }    } }

Where Can find InitializeComponent() Method :

InitializeComponent() method will generate during build so build your portable library ,  C# code file is generated from the XAML file. If you look in the \DevXamarinForms\DevXamarinForms\obj\Debug directory, you’ll find a file named DevXamarinForms.HomePage.xaml.g.cs. The ‘g’ stands for generated.

namespace DevXamarinForm { using System; using Xamarin.Forms; using Xamarin.Forms.Xaml; public partial class HomePage : global::Xamarin.Forms.ContentPage { [System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build. Tasks.XamlG", "0.0.0.0")] private global::Xamarin.Forms.Entry txtresult; [System.CodeDom.Compiler.GeneratedCodeAttribute("Xamarin.Forms.Build. Tasks.XamlG", "0.0.0.0")]        private void InitializeComponent() {            this.LoadFromXaml(typeof(HomePage));            txtresult = this.FindByName<global::Xamarin.Forms.Entry>("txtresult");        }    } }

Just Modify App.CS file, like below

using System; using System.Collections.Generic; using System.Linq; using System.Text; using Xamarin.Forms; namespace DevXamarinForm {    public class App : Application    {        public App()        {            // The root page of your application            //MainPage = new ContentPage            //{            //    Content = new StackLayout            //    {            //        VerticalOptions = LayoutOptions.Center,            //        Children = {            //            new Label {            //                HorizontalTextAlignment = TextAlignment.Center,            //                Text = "Welcome to Xamarin Forms!"            //            }            //        }            //    }            //};            MainPage = new HomePage(); // Add this code        }    } }

Build and Run Application:

Displaying List Data in Xamarin.Android and Visual Studio

Introduction

Let we look regarding list view binding. The cross-platform applications with Xamarin.iOS, Xamarin.Android the ListView control binding is structurally similar.

Xamarin.IOS	UITableViewSource
Xamarin.Android	BaseAdapter

Your need follow Below steps for customizing a list view appearance

Step 1: Layout:

We need to create layout with List View controls.

HelloApp (ProjectName) è Resources  è layout (Right Click) è Add New Item è Select ( Android layout )  è Click Add

File Name: ListDemo.axaml  and drag drop List View control into layout page

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:minWidth="25px"     android:minHeight="25px">     <ListView         android:minWidth="25px"         android:minHeight="25px"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:id="@+id/UserList" /> </LinearLayout>

****ListView Control name : UserList

Step 2: Model :

Create Model and add whatever property is required.

Model Name: User

Namespace :HelloApp.Model

namespace HelloApp.Model {     public class User     {               public string UName;           } }

Step 3: Adapter

Create adapter class and derived from BaseAdapter .

BaseAdapter is abstract class. we need implement following methods. We need select Row template and

namespace HelloApp.Adapters {     class UserAdapters : BaseAdapter<User>     {         List<User> userlist;         Activity useractivity;         public UserAdapters(Activity context ,List<User> item):base()         {             useractivity = context;             userlist = item;         }         public override User this[int position]         {             get             {                 throw new NotImplementedException();             }         }         public override int Count         {             get             {                 return userlist.Count;             }         }         public override long GetItemId(int position)         {             return position;         }         public override View GetView(int position, View convertView,                ViewGroup parent)         {             var item = userlist[position];             if(convertView == null)             {                 convertView = useractivity.LayoutInflater.Inflate(Android.Resource.Layout. SimpleExpandableListItem1,null);                            }             convertView.FindViewById<TextView>(Android.Resource.Id.Text1).Text = item.uname;             return convertView;         }     } }

Step 4: Activity

HelloApp (ProjectName) (Right Click) è Add New Item è Select ( Activity)  è Click Add

Source Code :

namespace HelloApp {     [Activity(Label = "ListDemoActivity" , MainLauncher = true)]     public class ListDemoActivity : Activity     {         private ListView UserListView;         private List<User> userlist;         protected override void OnCreate(Bundle savedInstanceState)         {             base.OnCreate(savedInstanceState);             base.SetContentView(Resource.Layout.ListDemo);             UserListView = FindViewById<ListView>(Resource.Id.UserList);             userlist = new List<User>();             userlist.Add(new User { UName = "Sutahahr" });             userlist.Add(new User { UName = "Suresh" });             userlist.Add(new User { UName = "Sumathi" });             userlist.Add(new User { UName = "Sujatha" });             UserListView.Adapter = new UserAdapters(this, userlist);                    }     }    }

Source code explanation:

1.  [Activity(Label = "ListDemoActivity (Title Of Text)" , MainLauncher = true(Initial launcher))]

2.  private ListView UserListView – Find Control and assign to local variable

3.  private List<User> userlist;   - Assign Collection value

4.  base.SetContentView(Resource.Layout.ListDemo); - Assign layout content in activity

5.  UserListView = FindViewById<ListView>(Resource.Id.UserList); - Find user control from layout page

6.  userlist = new List<User>(); - add collection

7.  UserListView.Adapter = new UserAdapters(this, userlist); - Assign user collection into adapters