Build Cross Platform Apps in Xamarin Forms Part One

Build Cross Platform Apps in Xamarin Forms :

                            Xamarin.Forms is a cross platform allows us to easily create user interface layouts that can be shared across Android, iOS, and Windows Phone.We can share most of the code across Mobile platforms.If our resource is Limited and you are mostly going to focus on 

Functionality rather then Design.Then Xamarin.Forms is the best to Develop cross platform.

Let’s start.

                We will try to create a Sample Application in this Session and how to create Login Page and How to navigate from one form to another.

Next articles we will focus on menu and toolbar.

 Step 1:

File->New Project ->Templates ->Visual C# ->Cross platform ->Blank App(Xamarin.Froms.Portable).

Select Blank App and give the Project Name and Project Location.

 Once Application is created it will look like below.

EmployeeInfo is our shared  Project We can place our code and Design and this project is going to shared by Both android and IOS.

 

Step 2:

            Before do anything I just created some folders for my convenience and now We have to create a Login Page for this Right click in View folder and Select Add-->New Item

  Select Cross-Platform under Visual c# --> Forms ContentPage  add a name and click ok.Likewise Create MainPage.

Step 3:

 We can to add login form Code as below.

MainPage.cs

1. public class MainPage : ContentPage  
2.     {  
3.         public MainPage()  
4.         {  
5.             Content = new StackLayout  
6.             {  
7.                 VerticalOptions = LayoutOptions.Center,  
8.                 Children = {  
9.                         new Label {  
10.                             HorizontalTextAlignment = TextAlignment.Center,  
11.                             Text = "Welcome to EmployeeInfo Xamarin Forms!"  
12.                         }  
13.                     }  
14.             };  
15.     }  

 LoginPage.cs

1. public class LoginPage : ContentPage  
2.    {  
3.        private readonly Entry _userName;  
4.        private readonly Entry _password;  
5.   
6.        public LoginPage()  
7.        {  
8.            var add = new Button  
9.            {  
10.                Text = "Login",  
11.                TextColor = Color.White  
12.            };  
13.            _userName = new Entry { Placeholder = "UserName" };  
14.            _password = new Entry { Placeholder = "Password", IsPassword = true };  
15.            add.Clicked += Add_Clicked;  
16.            var stackLayout = new StackLayout  
17.            {  
18.                Spacing = 20,  
19.                Padding = 50,  
20.                VerticalOptions = LayoutOptions.Center,  
21.   
22.                Children =  
23.                {  
24.                    _userName,  
25.                   _password ,  
26.                    add  
27.                }  
28.            };  
29.            Content = stackLayout;  
30.        }  
31.   
32.        private void Add_Clicked(object sender, EventArgs e)  
33.        {  
34.            if (_userName.Text == "a" && _password.Text == "a")  
35.            {  
36.                Application.Current.MainPage = new MainPage();  
37.            }  
38.            else if (string.IsNullOrEmpty(_userName.Text) || string.IsNullOrEmpty(_password.Text))  
39.            {  
40.                DisplayAlert("Error", "Username and Password are required", "Re-try");  
41.            }  
42.            else  
43.            {  
44.                DisplayAlert("Failed", "Invalid User", "Login Again");  
45.            }  
46.        }  
47.    }  

App.cs 

1. public class App : Application  
2.    {  
3.        public App()  
4.        {  
5.            MainPage = new LoginPage();  
6.        }  
7.   
8.        protected override void OnStart()  
9.        {  
10.            // Handle when your app starts  
11.        }  
12.   
13.        protected override void OnSleep()  
14.        {  
15.            // Handle when your app sleeps  
16.        }  
17.   
18.        protected override void OnResume()  
19.        {  
20.            // Handle when your app resumes  
21.        }  
22.    }  

 Step 4:

           Run the application. 

 Enter username and password and click Login

Summary

               We created a Sample EmployeeInfo Application and add Login page and add some code to navigate around the Application in Next articles we will focus on Menu and Toorbar.

Thank you