Welcome to Xamarin Guy Show Blog

Keep updated for latest and Greatest Posts from Xamarin guy

Xamarin Forms Advanced LogIn Page UI Design[Tutorial 13]

Hey guys in this tutorial we are going to make Advanced LogIn Page UI Design inside xamarin forms project.
Step1 :
At first set your MainPage as Start up Page inside App.xaml.cs.

Step 2 :
Now the design page i.e: Our MainPage.xaml. Understanding this tutorial is not like understanding rocket science 😀 .

Basics:

StackLayout:
It  organizes our  views in a one-dimensional line  either horizontally or vertically.

Entry:
It is used for single-line text input. It supports multiple keyboard types and  can be used as a password field.
Label:
Label which is a view  is used for displaying text. It can  have custom fonts , colored text and font families etc.
Button:
 It  displays a  text string or bitmap image or both   indicating a command, When  user presses the Button  with a finger or clicks it with a mouse to initiate that command.
After a Button command is clicked then user can perform various events like navigation, validation, converter etc..
Grid:
Grid supports arranging views into rows and columns. we can separate any layout with the help of grid.

Simple 3 rows are defined. In which we have given fixed height to 1st and 3rd row . For 2nd row have again divided it to 7 rows that’s all now we will add our necessary content inside the grid rows.

Code and tutorial is pretty explanatory so follow it and enjoy. 🙂

In first grid row 0 image and a label is added .
On second grid row image entry and button is added & On last grid row, we have added labels for login which can be made clickable by adding gestures.
 
 

Download full project from here : http://xamaringuyshow.com/loginappuitut13/

2 thoughts on “Xamarin Forms Advanced LogIn Page UI Design[Tutorial 13]

  • Rafa
    at

    Hi, do you have the images you use to share ? Thanks

    • samirgc
      at

      You can download images that are available labeled free of use in google.

Leave a Reply