Design Login Page Using XAML In Xamarin.Forms

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