Learning Resources

Step1: TranslateExtension.cs

	using System;
	using System.Collections.Generic;
	using System.Globalization;
	using System.Reflection;
	using System.Resources;
	using System.Text;
	using Xamarin.Forms;
	using Xamarin.Forms.Xaml;
	namespace NewResourceLearning.Helpers.Resources
	{
	[ContentProperty("Text")]
	public class TranslateExtension : IMarkupExtension
	{
	const string ResourceId = "NewResourceLearning.Helpers.Resources.AppResources";
	public string Text { get; set; }
	public object ProvideValue(IServiceProvider serviceProvider)
	{
	if (Text == null)
	return null;
	ResourceManager resourceManager = new ResourceManager(ResourceId, typeof(TranslateExtension).GetTypeInfo().Assembly);
	return resourceManager.GetString(Text, CultureInfo.CurrentCulture);
	}
	}
	}

view raw TranslateExtension.cs hosted with ❤ by GitHub

Step2:MainPage.xaml

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:NewResourceLearning"
	xmlns:res="clr-namespace:NewResourceLearning.Helpers.Resources"
	x:Class="NewResourceLearning.MainPage">
	<StackLayout>
	<Label Text="{res:Translate Mystringcall1}" FontSize="Medium" TextColor="Black"
	VerticalOptions="CenterAndExpand"
	VerticalTextAlignment="Center"
	Margin="20,0"
	HorizontalOptions="FillAndExpand"
	HorizontalTextAlignment="Start"/>
	<Label Text="{res:Translate Mystringcall2}" FontSize="Medium" TextColor="Black"
	VerticalOptions="CenterAndExpand"
	VerticalTextAlignment="Center"
	Margin="20,0"
	HorizontalOptions="FillAndExpand"
	HorizontalTextAlignment="Start"/>
	</StackLayout>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

MVVM Example 3 A new Approach to property Changed

MainPage.Xaml will look Like this:

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:MvvmExample3"
	x:Class="MvvmExample3.MainPage">
	<ContentPage.Padding>
	<OnPlatform x:TypeArguments="Thickness"
	iOS="20, 40, 20, 20"
	Android="20, 20, 20, 20"
	WinPhone="20, 20, 20, 20" />
	</ContentPage.Padding>
	<ContentPage.Content>
	<StackLayout VerticalOptions="FillAndExpand"
	HorizontalOptions="FillAndExpand"
	Orientation="Vertical"
	Spacing="15">
	<Label Text="PersonName"/>
	<Entry Text="{Binding PersonName}" Placeholder="Full Name"/>
	<Label Text="WorksIn"/>
	<Entry Text="{Binding WorksIn}" Placeholder="Your Website"/>
	<StackLayout Orientation="Horizontal" Spacing="10">
	<Label Text="Save Data?"/>
	<Switch IsToggled="{Binding MySwitch}"/>
	</StackLayout>
	<Label Text="{Binding DisplayMessage}"/>
	</StackLayout>
	</ContentPage.Content>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

MainPage.Xaml.cs will look Like this:

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	using Xamarin.Forms;
	namespace MvvmExample3
	{
	public partial class MainPage : ContentPage
	{
	public MainPage()
	{
	InitializeComponent();
	BindingContext = new ViewModel.MyNewViewModel();
	}
	}
	}

view raw MainPage.xaml.cs hosted with ❤ by GitHub

MyNewViewModel.cs will look Like this:

	using System;
	using System.Collections.Generic;
	using System.ComponentModel;
	using System.Runtime.CompilerServices;
	using System.Text;
	namespace MvvmExample3.ViewModel
	{
	public class MyNewViewModel : INotifyPropertyChanged
	{
	string firstname = "Samir";
	string lastname = "Xamarin University";
	bool myswitch;
	public event PropertyChangedEventHandler PropertyChanged;
	void OnPropertyChanged([CallerMemberName] string name = "")
	{
	PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
	}
	public bool MySwitch
	{
	get { return myswitch; }
	set
	{
	myswitch = value;
	OnPropertyChanged();
	OnPropertyChanged(nameof(DisplayMessage));
	}
	}
	public string PersonName
	{
	get { return firstname; }
	set
	{
	firstname = value;
	OnPropertyChanged();
	OnPropertyChanged(nameof(DisplayMessage));
	}
	}
	public string WorksIn
	{
	get { return lastname; }
	set
	{
	lastname = value;
	OnPropertyChanged();
	OnPropertyChanged(nameof(DisplayMessage));
	}
	}
	public string DisplayMessage
	{
	get
	{
	return $"Mr {PersonName}" + $"Worksin"
	+ $"{WorksIn}"
	+ $"{(myswitch ? "saved to database" : " is not saved to database")}";
	}
	}
	}
	}

view raw MyNewViewModel.cs hosted with ❤ by GitHub

MVVM Example 2 Connecting With View Model

Your main page will look like this:
MainPage.xaml

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:MvvmExample2"
	x:Class="MvvmExample2.MainPage">
	<StackLayout>
	<!-- Place new controls here -->
	<Label Text="{Binding DateTime, StringFormat='{0:T}'}"
	FontSize="Large"
	HorizontalOptions="Center"
	VerticalOptions="Center"/>
	</StackLayout>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

MainPage.xaml.cs

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	using Xamarin.Forms;
	namespace MvvmExample2
	{
	public partial class MainPage : ContentPage
	{
	public MainPage()
	{
	InitializeComponent();
	BindingContext = new MyNewMvvmViewModel();
	}
	}
	}

view raw MainPage.xaml.cs hosted with ❤ by GitHub

Your ViewModel Will Look Like this:

	using System;
	using System.Collections.Generic;
	using System.ComponentModel;
	using System.Text;
	using Xamarin.Forms;
	namespace MvvmExample2
	{
	public class MyNewMvvmViewModel : INotifyPropertyChanged
	{
	//ViewModel generally implement the INotifyPropertyChanged interface,
	//which means that the class fires a PropertyChanged event whenever one of its properties changes.
	public MyNewMvvmViewModel()
	{
	this.DateTime = DateTime.Now;
	Device.StartTimer(TimeSpan.FromSeconds(1), () =>
	{
	this.DateTime = DateTime.Now;
	return true;
	});
	}
	DateTime dateTime;
	public event PropertyChangedEventHandler PropertyChanged;
	public DateTime DateTime
	{
	set
	{
	if (dateTime != value)
	{
	dateTime = value;
	if (PropertyChanged != null)
	{
	PropertyChanged(this, new PropertyChangedEventArgs("DateTime"));
	}
	}
	}
	get
	{
	return dateTime;
	}
	}
	}
	}

view raw MyNewMvvmViewModel.cs hosted with ❤ by GitHub

MVVM Example 1 with out Model and ViewModel

Please watch tutorial for complete detail:

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:MvvmExample1"
	xmlns:sys="clr-namespace:System;assembly=mscorlib"
	x:Class="MvvmExample1.MainPage">
	<!--It is a program with out view model-->
	<!--Here’s a program that defines an XML namespace declaration for the System namespace:-->
	<StackLayout BindingContext="{x:Static sys:DateTime.Now}"
	HorizontalOptions="Center"
	VerticalOptions="Center">
	<!--The program can use x:Static to obtain the current date and time from the static DateTime.Now property
	and set that DateTime value to the BindingContext on a StackLayout-->
	<Label Text="{Binding Year, StringFormat='The year is {0}'}" />
	<Label Text="{Binding StringFormat='The month is {0:MMMM}'}" />
	<!--DateTime value itself is used for the StringFormat-->
	<Label Text="{Binding Day, StringFormat='The day is {0}'}" />
	<Label Text="{Binding StringFormat='The time is {0:T}'}" />
	</StackLayout>
	</ContentPage>
	<!--the big problem is that the date and time are set once when the page is first built, and never change:-->

view raw MainPage.xaml hosted with ❤ by GitHub

DesignChallenge 5

Try this design Challenge :

	<?xml version="1.0" encoding="utf-8"?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:SLeep"
	x:Class="SLeep.MainPage"
	xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
	ios:Page.UseSafeArea="true" >
	<ContentPage.Resources>
	<Style TargetType="BoxView">
	<Setter Property="HeightRequest" Value="100"/>
	<Setter Property="WidthRequest" Value="100"/>
	<Setter Property="Margin" Value="5"/>
	</Style>
	<Style TargetType="Frame">
	<Setter Property="HeightRequest" Value="200"/>
	<Setter Property="CornerRadius" Value="5"/>
	<Setter Property="Margin" Value="5"/>
	<Setter Property="WidthRequest" Value="90"/>
	<Setter Property="BackgroundColor" Value="White"/>
	</Style>
	</ContentPage.Resources>
	<ScrollView Orientation="Vertical">
	<FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceEvenly" VerticalOptions=" FillAndExpand" BackgroundColor="#f9f8f8">
	<Frame HasShadow="true">
	<FlexLayout Direction="Column">
	<Image Source="image1.jpg" HorizontalOptions="FillAndExpand" WidthRequest="100"/>
	<Label Text="Hyatt Hotel" TextColor="Black" FontSize="Micro"/>
	<BoxView HeightRequest="1" BackgroundColor="Silver"/>
	<Label Text="Hotel well established in pune" FontSize="Micro" TextColor="Silver"/>
	</FlexLayout>
	</Frame>
	<Frame HasShadow="true">
	<FlexLayout Direction="Column">
	<Image Source="image2.jpg" HorizontalOptions="FillAndExpand" WidthRequest="100"/>
	<Label Text="Rame Grand" TextColor="Black" FontSize="Micro"/>
	<BoxView HeightRequest="1" BackgroundColor="Silver"/>
	<Label Text="This is a hotel where you love to stay" FontSize="Micro" TextColor="Silver"/>
	</FlexLayout>
	</Frame>
	<Frame HasShadow="true" >
	<FlexLayout Direction="Column">
	<Image Source="image3.jpg" HorizontalOptions="FillAndExpand" WidthRequest="100"/>
	<Label Text="KR Inn" TextColor="Black" FontSize="Micro"/>
	<BoxView HeightRequest="1" BackgroundColor="Silver"/>
	<Label Text="Smart Hotel with all your beautiful needs" FontSize="Micro" TextColor="Silver"/>
	</FlexLayout>
	</Frame>
	<Frame HasShadow="true">
	<FlexLayout Direction="Column">
	<Image Source="image4.jpeg" HorizontalOptions="FillAndExpand" WidthRequest="100"/>
	<Label Text="Marriote Suites" TextColor="Black" FontSize="Micro"/>
	<BoxView HeightRequest="1" BackgroundColor="Silver"/>
	<Label Text="It feels better than your home" FontSize="Micro" TextColor="Silver"/>
	</FlexLayout>
	</Frame>
	</FlexLayout>
	</ScrollView>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

Design Challenge 4"

	<?xml version="1.0" encoding="UTF-8"?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	x:Class="NewFlex2.NewForms3">
	<ContentPage.Content>
	<ScrollView>
	<Grid ColumnSpacing="0" RowSpacing="0">
	<Grid.RowDefinitions>
	<RowDefinition Height="AUTO" />
	<RowDefinition Height="AUTO" />
	<RowDefinition Height="AUTO" />
	<RowDefinition Height="*" />
	<RowDefinition Height="AUTO" />
	</Grid.RowDefinitions>
	<!-- header background -->
	<Image Aspect="AspectFill" Source="HeaderBackground.png" />
	<Image Aspect="Fill" Margin="0,-1,0,-1" Source="CurvedMask.png" VerticalOptions="End" />
	<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Grid.Row="1" Padding="15,3,0,0">
	<FlexLayout HorizontalOptions="Center" VerticalOptions="Center">
	<Frame WidthRequest="250"
	HeightRequest="500" >
	<FlexLayout Direction="Column">
	<StackLayout Padding="0,0" HorizontalOptions="Start" VerticalOptions="Start">
	<Grid RowSpacing="1" ColumnSpacing="1" >
	<Grid.RowDefinitions>
	<RowDefinition Height="*"/>
	<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*"/>
	<ColumnDefinition Width="*"/>
	</Grid.ColumnDefinitions>
	<Button Text="-1-"
	TextColor="Black"
	FontSize="Small"
	BackgroundColor="White"
	Image="TakeImage"
	Grid.Row="0"
	Grid.Column="0"
	/>
	<Button Text="-2-"
	TextColor="Black"
	FontSize="Small"
	BackgroundColor="White"
	Image="Upload.png"
	Grid.Row="0"
	Grid.Column="1"
	/>
	</Grid>
	</StackLayout>
	<BoxView HeightRequest="1" BackgroundColor="Silver"/>
	<StackLayout Padding="0,0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
	<Grid RowSpacing="1" ColumnSpacing="1" >
	<Grid.RowDefinitions>
	<RowDefinition Height="*"/>
	<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*"/>
	<ColumnDefinition Width="*"/>
	</Grid.ColumnDefinitions>
	<Button Text="-3-"
	TextColor="Black"
	FontSize="Small"
	BackgroundColor="White"
	Image="Analyze"
	Grid.Row="0"
	Grid.Column="0"
	/>
	<Button Text="-4-"
	TextColor="Black"
	FontSize="Small"
	BackgroundColor="White"
	Image="Listen"
	Grid.Row="0"
	Grid.Column="1"
	/>
	</Grid>
	</StackLayout>
	<BoxView HeightRequest="1" BackgroundColor="Silver"/>
	<StackLayout Padding="0,0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
	<Grid RowSpacing="1" ColumnSpacing="1" >
	<Grid.RowDefinitions>
	<RowDefinition Height="*"/>
	<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*"/>
	<ColumnDefinition Width="*"/>
	</Grid.ColumnDefinitions>
	<Button Text="-5-"
	TextColor="Black"
	FontSize="Small"
	BackgroundColor="White"
	Image="TakeImage"
	Grid.Row="0"
	Grid.Column="0"
	/>
	<Button Text="-6-"
	TextColor="Black"
	FontSize="Small"
	BackgroundColor="White"
	Image="Listen"
	Grid.Row="0"
	Grid.Column="1"
	/>
	</Grid>
	</StackLayout>
	</FlexLayout>
	</Frame>
	</FlexLayout>
	</StackLayout>
	</Grid>
	</ScrollView>
	</ContentPage.Content>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

Design Challenge 3"

Main Page.Xaml:

	<?xml version="1.0" encoding="UTF-8"?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	x:Class="NewFlex2.newpagexaml"
	xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
	ios:Page.UseSafeArea="true">
	<ContentPage.Content>
	<ScrollView>
	<Grid ColumnSpacing="0" RowSpacing="0">
	<Grid.RowDefinitions>
	<RowDefinition Height="AUTO" />
	<RowDefinition Height="AUTO" />
	<RowDefinition Height="AUTO" />
	<RowDefinition Height="*" />
	<RowDefinition Height="AUTO" />
	</Grid.RowDefinitions>
	<!-- header background -->
	<Image Aspect="AspectFill" Source="HeaderBackground.png" />
	<Image Aspect="Fill" Margin="0,-1,0,-1" Source="CurvedMask.png" VerticalOptions="End" />
	<ScrollView Orientation="Both" Grid.Row="2" >
	<FlexLayout HorizontalOptions="Center" VerticalOptions="Center">
	<Frame WidthRequest="180"
	HeightRequest="500">
	Grid ColumnSpacing="0" RowSpacing="0">
	<FlexLayout Direction="Column">
	<StackLayout HorizontalOptions="End">
	<Label Text="Business is state of mind" TextColor="Green" FontSize="Medium"/>
	<BoxView HeightRequest="1" BackgroundColor="Gray"/>
	<Label Text="A business name structure does not separate the business entity from the owner" FontSize="Small"/>
	<Label Text=" &#x2022; Focus" FontSize="Micro" />
	<Label Text=" &#x2022; Devortion" FontSize="Micro" />
	<Label Text=" &#x2022; Grace" FontSize="Micro"/>
	<Label FlexLayout.Grow="1" />
	</StackLayout>
	</FlexLayout>
	</Frame>
	</FlexLayout>
	</ScrollView>
	</Grid>
	</ScrollView>
	</ContentPage.Content>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

Design Challenge 2

MainPage.Xaml:

	<?xml version="1.0" encoding="utf-8"?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:NewFlex2" x:Class="NewFlex2.MainPage"
	xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
	ios:Page.UseSafeArea="true">
	<ContentPage.Resources>
	<Style TargetType="Frame">
	<Setter Property="BackgroundColor" Value="#fdfdfd" />
	<Setter Property="BorderColor" Value="#e5e5e5" />
	<Setter Property="Margin" Value="10" />
	<Setter Property="CornerRadius" Value="15" />
	</Style>
	<Style TargetType="Label">
	<Setter Property="Margin" Value="0, 5" />
	</Style>
	<Style x:Key="headerLabel" TargetType="Label">
	<Setter Property="Margin" Value="0, 8" />
	<Setter Property="FontSize" Value="Large" />
	<Setter Property="TextColor" Value="Blue" />
	</Style>
	<Style TargetType="Image">
	<Setter Property="FlexLayout.Order" Value="-1" />
	<Setter Property="FlexLayout.AlignSelf" Value="Center" />
	</Style>
	<Style TargetType="Button">
	<Setter Property="Text" Value="MoreInfo" />
	<Setter Property="FontSize" Value="Small" />
	<Setter Property="TextColor" Value="White" />
	<Setter Property="BackgroundColor" Value="#4c90ee" />
	<Setter Property="BorderRadius" Value="30" />
	</Style>
	</ContentPage.Resources>
	<ScrollView Orientation="Both">
	<FlexLayout>
	<Frame WidthRequest="250"
	HeightRequest="500">
	<FlexLayout Direction="Column">
	<StackLayout VerticalOptions="CenterAndExpand" Padding="5">
	<StackLayout Orientation="Horizontal">
	<Entry Placeholder="First Name"></Entry>
	<Entry Placeholder="Last Name"></Entry>
	</StackLayout>
	<Entry Placeholder="Email"></Entry>
	<Entry Placeholder="Password" IsPassword="True"></Entry>
	<StackLayout Orientation="Horizontal">
	<Entry Placeholder="Profession"></Entry>
	<Entry Placeholder="Residence"></Entry>
	</StackLayout>
	<Entry Placeholder="Confirm Password" IsPassword="True"></Entry>
	<Label Text="Date Of Birth"></Label>
	<DatePicker></DatePicker>
	<Label Text="Address"></Label>
	<Editor></Editor>
	<StackLayout Orientation="Horizontal">
	<Label Text="Save Password"></Label>
	<Switch IsToggled="False"></Switch>
	</StackLayout>
	<Button Text="Sign Up"></Button>
	<Label Text="Already have account? Sign In" TextColor="Blue"></Label>
	</StackLayout>
	<Label FlexLayout.Grow="1" />
	</FlexLayout>
	</Frame>
	</FlexLayout>
	</ScrollView>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

Design Challenge 1

MainPage in Xaml:

	<?xml version="1.0" encoding="utf-8"?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:newflex" x:Class="newflex.MainPage"
	xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
	ios:Page.UseSafeArea="true" >
	<ContentPage.Resources>
	<Style TargetType="Frame">
	<Setter Property="BackgroundColor" Value="#fdfdfd" />
	<Setter Property="BorderColor" Value="#e5e5e5" />
	<Setter Property="Margin" Value="10" />
	<Setter Property="CornerRadius" Value="15" />
	</Style>
	<Style TargetType="Label">
	<Setter Property="Margin" Value="0, 5" />
	</Style>
	<Style x:Key="headerLabel" TargetType="Label">
	<Setter Property="Margin" Value="0, 8" />
	<Setter Property="FontSize" Value="Large" />
	<Setter Property="TextColor" Value="Blue" />
	</Style>
	<Style TargetType="Image">
	<Setter Property="FlexLayout.Order" Value="-1" />
	<Setter Property="FlexLayout.AlignSelf" Value="Center" />
	</Style>
	<Style TargetType="Button">
	<Setter Property="Text" Value="MoreInfo" />
	<Setter Property="FontSize" Value="Small" />
	<Setter Property="TextColor" Value="White" />
	<Setter Property="BackgroundColor" Value="#4c90ee" />
	<Setter Property="BorderRadius" Value="30" />
	</Style>
	</ContentPage.Resources>
	<ScrollView Orientation="Both">
	<FlexLayout>
	<Frame WidthRequest="320"
	HeightRequest="650">
	<FlexLayout Direction="Column">
	<Grid BackgroundColor="White">
	<Grid.RowDefinitions>
	<RowDefinition Height="50"/>
	<RowDefinition Height="*"/>
	<RowDefinition Height="50"/>
	</Grid.RowDefinitions>
	<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,10,0,0" Grid.Row="0">
	<Label Text=""/>
	<Image Source="download.jpeg" HeightRequest="400" WidthRequest="300" Opacity="0.6" VerticalOptions="Start" Margin="0,3,0,0"/>
	</StackLayout>
	<Grid Grid.Row="1" Margin="20,0,20,0">
	<Grid.RowDefinitions>
	<RowDefinition Height="*"/>
	<RowDefinition Height="50"/>
	<RowDefinition Height="50"/>
	<RowDefinition Height="Auto"/>
	<RowDefinition Height="40"/>
	<RowDefinition Height="40"/>
	<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<Image Source="Samir.png" HeightRequest="70" VerticalOptions="EndAndExpand"/>
	<Entry Grid.Row="1" Placeholder="Email or Phone Number" PlaceholderColor="#bababa" FontSize="16"/>
	<Entry Grid.Row="2" Placeholder="Password" PlaceholderColor="#bababa" FontSize="16"/>
	<Button Text="LogIn" BackgroundColor="#3897f0" TextColor="White" HeightRequest="50" VerticalOptions="Start" Grid.Row="3"/>
	<Label Text="LoginTrouble?GetHelp" HorizontalOptions="Center" Grid.Row="4" Margin="0,10,0,0" FontSize="12"/>
	<Grid Grid.Row="5">
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*"/>
	<ColumnDefinition Width="Auto"/>
	<ColumnDefinition Width="*"/>
	</Grid.ColumnDefinitions>
	<Label BackgroundColor="#bababa" HeightRequest="1" HorizontalOptions="FillAndExpand" VerticalOptions="Center"/>
	<!--<Label Text="" Grid.Column="1" VerticalOptions="Center" Margin="10,0,10,0"/>-->
	<Image Source="http://blog.addthiscdn.com/wp-content/uploads/2015/11/facebook_2.png" Grid.Column="1" VerticalOptions="Center" Margin="10,0,10,0"/>
	<Label BackgroundColor="#bababa" Grid.Column="2" HeightRequest="1" HorizontalOptions="FillAndExpand" VerticalOptions="Center"/>
	</Grid>
	<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Grid.Row="6">
	<Label Text="LoginWithFacebook" TextColor="#485992" />
	</StackLayout>
	</Grid>
	<StackLayout Grid.Row="2" BackgroundColor="#ffffff">
	<Label HeightRequest="1" BackgroundColor="#e3e3e3"/>
	<Label Text="Dont'Have Account Login? SignUp" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
	</StackLayout>
	</Grid>
	</FlexLayout>
	</Frame>
	</FlexLayout>
	</ScrollView>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

FlexLayout XamarinForms

Step 1 :
Your MainPage.xaml will beLike this:

	<?xml version="1.0" encoding="utf-8"?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:newflex" x:Class="newflex.MainPage"
	xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
	ios:Page.UseSafeArea="true" >
	<ContentPage.Resources>
	<Style TargetType="Frame">
	<Setter Property="BackgroundColor" Value="#fdfdfd" />
	<Setter Property="BorderColor" Value="#e5e5e5" />
	<Setter Property="Margin" Value="10" />
	<Setter Property="CornerRadius" Value="15" />
	</Style>
	<Style TargetType="Label">
	<Setter Property="Margin" Value="0, 5" />
	</Style>
	<Style x:Key="headerLabel" TargetType="Label">
	<Setter Property="Margin" Value="0, 8" />
	<Setter Property="FontSize" Value="Large" />
	<Setter Property="TextColor" Value="Blue" />
	</Style>
	<Style TargetType="Image">
	<Setter Property="FlexLayout.Order" Value="-1" />
	<Setter Property="FlexLayout.AlignSelf" Value="Center" />
	</Style>
	<Style TargetType="Button">
	<Setter Property="Text" Value="MoreInfo" />
	<Setter Property="FontSize" Value="Small" />
	<Setter Property="TextColor" Value="White" />
	<Setter Property="BackgroundColor" Value="#4c90ee" />
	<Setter Property="BorderRadius" Value="30" />
	</Style>
	</ContentPage.Resources>
	<ScrollView Orientation="Both">
	<FlexLayout>
	<Frame WidthRequest="300"
	HeightRequest="550">
	<FlexLayout Direction="Column">
	<Label Text="France national football team"
	Style="{StaticResource headerLabel}" />
	<Label Text="Nickname(s)" />
	<Label Text=" &#x2022; Les Bleus (The Blues)" />
	<Image Source="https://upload.wikimedia.org/wikipedia/en/thumb/a/a3/Equipe_de_France_de_football_Logo.png/240px-Equipe_de_France_de_football_Logo.png"
	WidthRequest="240"
	HeightRequest="180" />
	<Label FlexLayout.Grow="1" />
	<Grid Grid.Row="1" Margin="0,30" ColumnSpacing="0" RowSpacing="0">
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<StackLayout>
	<StackLayout.Children>
	<Image Source="http://bbcpersian7.com/images/facebook-clipart-png-circle-14.jpg" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="103" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Likes" />
	</StackLayout>
	<StackLayout Grid.Column="1">
	<StackLayout.Children>
	<Image Source="https://lh3.googleusercontent.com/N-AY2XwXafWq4TQWfua6VyjPVQvTGRdz9CKOHaBl2nu2GVg7zxS886X5giZ9yY2qIjPh=w300" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="164" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Follow Us" />
	</StackLayout>
	<StackLayout Grid.Column="2">
	<StackLayout.Children>
	<Image Source="https://seeklogo.com/images/T/twitter-icon-circle-blue-logo-94339974C6-seeklogo.com.png" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="107" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Tweet Us" />
	</StackLayout>
	</Grid>
	<Button/>
	</FlexLayout>
	</Frame>
	<Frame WidthRequest="300"
	HeightRequest="550">
	<FlexLayout Direction="Column">
	<Label Text="Belgium national football team "
	Style="{StaticResource headerLabel}" />
	<Label Text="Nickname(s)" />
	<Label Text=" &#x2022; De Rode Duivels Les Diables Rouges Die Roten Teufel(The Red Devils)" />
	<Image Source="https://s.s-bol.com/imgbase0/imagebase3/large/FC/1/5/5/8/9200000076228551.jpg"
	WidthRequest="240"
	HeightRequest="180" />
	<Label FlexLayout.Grow="1" />
	<Grid Grid.Row="1" Margin="0,30" ColumnSpacing="0" RowSpacing="0">
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<StackLayout>
	<StackLayout.Children>
	<Image Source="http://bbcpersian7.com/images/facebook-clipart-png-circle-14.jpg" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="103" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Likes" />
	</StackLayout>
	<StackLayout Grid.Column="1">
	<StackLayout.Children>
	<Image Source="https://lh3.googleusercontent.com/N-AY2XwXafWq4TQWfua6VyjPVQvTGRdz9CKOHaBl2nu2GVg7zxS886X5giZ9yY2qIjPh=w300" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="164" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Follow Us" />
	</StackLayout>
	<StackLayout Grid.Column="2">
	<StackLayout.Children>
	<Image Source="https://seeklogo.com/images/T/twitter-icon-circle-blue-logo-94339974C6-seeklogo.com.png" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="107" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Tweet Us" />
	</StackLayout>
	</Grid>
	<Button />
	</FlexLayout>
	</Frame>
	<Frame WidthRequest="300"
	HeightRequest="550">
	<FlexLayout Direction="Column">
	<Label Text="Brazil national football team"
	Style="{StaticResource headerLabel}" />
	<Label Text="Nickname(s)" />
	<Label Text=" &#x2022; Seleção (The National Team)" />
	<Image Source="https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/1280px-Flag_of_Brazil.svg.png"
	WidthRequest="180"
	HeightRequest="180" />
	<Label FlexLayout.Grow="1" />
	<Grid Grid.Row="1" Margin="0,30" ColumnSpacing="0" RowSpacing="0">
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<StackLayout>
	<StackLayout.Children>
	<Image Source="http://bbcpersian7.com/images/facebook-clipart-png-circle-14.jpg" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="103" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Likes" />
	</StackLayout>
	<StackLayout Grid.Column="1">
	<StackLayout.Children>
	<Image Source="https://lh3.googleusercontent.com/N-AY2XwXafWq4TQWfua6VyjPVQvTGRdz9CKOHaBl2nu2GVg7zxS886X5giZ9yY2qIjPh=w300" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="164" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Follow Us" />
	</StackLayout>
	<StackLayout Grid.Column="2">
	<StackLayout.Children>
	<Image Source="https://seeklogo.com/images/T/twitter-icon-circle-blue-logo-94339974C6-seeklogo.com.png" HeightRequest="50" WidthRequest="50"></Image>
	</StackLayout.Children>
	<Label Style="{StaticResource StatsNumberLabel}" Text="107" />
	<Label Style="{StaticResource StatsCaptionLabel}" Text="Tweet Us" />
	</StackLayout>
	</Grid>
	<Button />
	</FlexLayout>
	</Frame>
	</FlexLayout>
	</ScrollView>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

Step2:
Your App.xaml will look like this:

	<?xml version="1.0" encoding="utf-8"?>
	<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="flex.App">
	<Application.Resources>
	<!-- This are the Application resource dictionary -->
	<ResourceDictionary>
	<!-- colors -->
	<Color x:Key="HeaderTextColor">#555555</Color> <!--Davy grey-->
	<Color x:Key="BodyTextColor">#bababa</Color> <!--Lightgray-->
	<!-- Customized font -->
	<OnPlatform x:Key="RegularFontFamily" x:TypeArguments="x:String">
	<On Platform="iOS">HelveticaNeue</On>
	<On Platform="Android">sans-serif</On>
	</OnPlatform>
	<OnPlatform x:Key="LightFontFamily" x:TypeArguments="x:String">
	<On Platform="iOS">HelveticaNeue-Light</On>
	<On Platform="Android">sans-serif-light</On>
	</OnPlatform>
	<OnPlatform x:Key="MediumFontFamily" x:TypeArguments="x:String">
	<On Platform="iOS">HelveticaNeue-Medium</On>
	<On Platform="Android">sans-serif-medium</On>
	</OnPlatform>
	<!-- font sizes -->
	<x:Double x:Key="TitleFont">20</x:Double>
	<x:Double x:Key="BodyFont">18</x:Double>
	<x:Double x:Key="TagTextFont">18</x:Double>
	<x:Double x:Key="StatsNumberFont">20</x:Double>
	<x:Double x:Key="StatsCaptionFont">16</x:Double>
	<!-- styles -->
	<Style x:Key="ProfileNameLabel" TargetType="Label">
	<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" /> <!--Davy grey-->
	<Setter Property="FontFamily" Value="{StaticResource MediumFontFamily}" /> <!--Medium In Size-->
	<Setter Property="FontSize" Value="{StaticResource TitleFont}" /> <!--20-->
	</Style>
	<Style x:Key="ProfileTagLabel" TargetType="Label">
	<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" /> <!--Lightgray-->
	<Setter Property="FontFamily" Value="{StaticResource RegularFontFamily}" /> <!--Regular-->
	<Setter Property="FontSize" Value="{StaticResource TagTextFont}" /> <!--18-->
	</Style>
	<Style x:Key="StatsNumberLabel" TargetType="Label">
	<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" /> <!--Davy grey-->
	<Setter Property="HorizontalTextAlignment" Value="Center" />
	<Setter Property="FontFamily" Value="{StaticResource LightFontFamily}" /> <!--light-->
	<Setter Property="FontSize" Value="{StaticResource StatsNumberFont}" /> <!--20-->
	</Style>
	<Style x:Key="StatsCaptionLabel" TargetType="Label">
	<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" /> <!--Lightgray-->
	<Setter Property="Margin" Value="0,-5,0,0" />
	<Setter Property="HorizontalTextAlignment" Value="Center" />
	<Setter Property="FontFamily" Value="{StaticResource LightFontFamily}" /> <!--Light-->
	<Setter Property="FontSize" Value="{StaticResource StatsCaptionFont}" /> <!--16-->
	</Style>
	</ResourceDictionary>
	</Application.Resources>
	</Application>

view raw App.xaml hosted with ❤ by GitHub