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;
  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,
  22. Children =
  23. {
  24. _userName,
  25. _password ,
  26. add
  27. }
  28. };
  29. Content = stackLayout;
  30. }
  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. }
  8. protected override void OnStart()
  9. {
  10. // Handle when your app starts
  11. }
  13. protected override void OnSleep()
  14. {
  15. // Handle when your app sleeps
  16. }
  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.