Build Cross Platform Apps In Xamarin Forms - Part One

Xamarin.Forms is a cross platform that allows us to easily create a user interface layout that can be shared across Android, iOS and Windows Phone. We can share most of the code across Mobile platforms. If our resources are limited and you are mostly going to focus on the functionality rather than the design, Xamarin.Forms is the best to develop a cross platform.

 

Let’s start.

We will try to create a sample Application in this session, how to create a login page, and how to navigate from one form to another. In the coming articles, we will focus on the menu and toolbar.

 

Step 1

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

Select blank app, the project name and project location.

Once the application is created, it will look as given below. EmployeeInfo is our shared project. We can place our code and design and this project is going to be shared by both Android and iOS.

Step 2

Before doing 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 add a login form and the code is given 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 the username, password and click Login.

We created a sample EmployeeInfo Application and added Login page and added some code to navigate around the Application. In the coming articles, we will focus on the Menu and Toolbar.