Hey guy in this tutorial we are going to create Cinemax Ui design.
It’s an simple design but in this tutorial you have to understand about maximum reuse of code i.e we are going to declare some styles in Application.resources which can be used in any pages inside xamain forms.
That’s one way of localization. Now in this App.Xaml we are going to provide some styles for our buttons , font size for the label , font family etc. Code is pretty explanatory. So show up the code 😀
Step1: App.Xaml Will Look like:

Now our next work is to make MainPage as our Startup page.
Step2: App.Xaml.cs Will Look Like this:

Now let’s deep dive inside the project root. There is no rocket science involved in this design . As i have explained inside the tutorial we are going to make 5 row’s.
Where each row is going to be added with contents like images text. But you have to understand is grid starts from 0 to 4 so grid 2 is going to be divided into 3 columns and added with respected content’s.
Here label with statics resource command will call all the globally defined label styles from App.xaml .
Basics :

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

Grid:
Grid supports arranging views into rows and columns. we can separate any layout with the help of grid.
Step3: MainPage Will Look Like this