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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.