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 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
  
  
  

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="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
  
  
  

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

Output

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

• The login Page Created Succesfully

Conclusion

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