Design Login Page Using XAML In Xamarin.Forms

What are Xamarin and Xamarin Forms?

  • Xamarin is Cross-Platform to develop Multi-Platform applications
  • Xamarin is Shared code(C#), But Separately Design an UIs Android(java), Windows(C#), IOS.
  • Xamarin forums is UIs & Shared code (C#) are same. To Develop multi-platforms applications, Run the all projects (Android, Windows, IOS) on Same Time.

Prerequisites

  • Visual Studio 2017 Enterprise

The steps given below are required to be followed in order to Create Login Page in Xamarin Android, using Microsoft Visual Studio 2017.

Step 1

  • Go to the Visual Studio
  • Click File -> New -> Project

    Xamarin

Step 2

  • In this step as
  • Click C# -> Cross Platform -> Cross Platform App(Native orXamarin forms).
  • Enter the Application Name, then Click OK

    Xamarin

Step 3

Afterwards,  go to

  • New Cross Platform app Click Blank App ->
  • UIs Technology as Click Xamarin forums ->
  • Code sharing statergy is Click PCL(Portable Class Library) ->
  • Then Click OK

    Xamarin

Step 4

  • UWP Project Select Target version & Minimum Version, then Click OK

    Xamarin

Step 5

  • In this step go to Solution Explorer -> Portable Class Library, then Click Xaml, Insert the code given below the Xaml Page, the save it

    Xamarin
    1. <?xml version="1.0" encoding="utf-8" ?>  
    2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Layout1" x:Class="Layout1.MainPage" Title="LoginPage" WidthRequest="20" Padding="20" BackgroundColor="Yellow">  
    3.     <StackLayout Spacing="20" Padding="50" VerticalOptions="Center">  
    4.         <Entry Placeholder="Mail id"></Entry>  
    5.         <Entry Placeholder="Password" IsPassword="True"></Entry>  
    6.         <Button Text="Log In" TextColor="White" BackgroundColor="##ff77D065"></Button> </StackLayout>  
    7. </ContentPage>  

Step 6

  • Click build menu, then go to Configuration Manager
  • Configure your Android, Windows, IOS Depoly & Build Setting, then Click Close

    Xamarin

Step 7

  • Go to the Solution Explorer -> Click UWP application, ->Right Click ->then Add the Reference

    Xamarin

    Click Cross Platform ->Extension->add given below extension
  • Windows Desktop Extensions for UWP 10.0.143953

    Xamarin

Step 8

In this step

  • Select build & Depoly Option, then Click to Start your the application

Now, go to Run option, choose Debug from the list of Android or IOS or UWP simulators, which are available. You can choose any one simulator and run it.

Xamarin

Step 9

Output

  • After few seconds, the app will start running on your Android simulator. You will see your app working successfully.

    Xamarin
  • The login Page Created Succesfully

Conclusion

 How to Create Login Page in Xaml using xamarin forms on Visual Studio 2017.