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.


  • 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


Step 2

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


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


Step 4

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


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

    1. <?xml version="1.0" encoding="utf-8" ?>  
    2. <ContentPage xmlns="" xmlns:x="" 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


Step 7

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


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


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.


Step 9


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

  • The login Page Created Succesfully


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

Similar Articles