plz give solution ..................
what do you mean "how to design screens"?
In XAML. You write your markup in the XAML editor.
The below code will help to design mobile screens on the basis of mobile screen height and width.
Design based on this it will fit all mobile resolutions.
public class App : Application
public static int screenHeight, screenWidth;
MainPage = new UserLogin();
//The root page of your application
protected override void OnStart()
// Handle when your app starts
protected override void OnSleep()
// Handle when your app sleeps
protected override void OnResume()
// Handle when your app resumes
#region For screen Height & Width
var pixels = Resources.DisplayMetrics.WidthPixels;
var scale = Resources.DisplayMetrics.Density;
var dps = (double)((pixels - 0.5f) / scale);
var ScreenWidth = (int)dps;
App.screenWidth = ScreenWidth;
//RequestedOrientation = ScreenOrientation.Portrait;
pixels = Resources.DisplayMetrics.HeightPixels;
dps = (double)((pixels - 0.5f) / scale);
var ScreenHeight = (int)dps;
App.screenHeight = ScreenHeight;
#region For Screen Height & Width
App.screenWidth = (int)UIScreen.MainScreen.Bounds.Width;
App.screenHeight = (int)UIScreen.MainScreen.Bounds.Height;
If you used MVVM pattern you have to get these ScreeenHeight and ScreenWidth in ViewModel Then give height and widths for your Views and Layouts.
// The below two lines will use to get the MOBILE SCREEN HEIGHT && WIDTH in ViewModel
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:local="clr-
<Label x:Name="lblTitle" HorizontalOptions="FillAndExpand"/>
<Image x:Name="imgProfile" Source="Logo.png" />
public partial class UserLogin : BaseContentPage
// Here you get the MOBILE SCREEN HEIGHT && WIDTH
//The above value is equal to fontsize =20
public class UserLogin: ContentPage
// Here you get the MOBILE SCREEN HEIGHT && WIDTH
Label lab = new Label()
FontSize = heightScreen/ 36.8
//the above value is equal to fontsize =20
Image imgProfile=new Image()
If you're micro-managing display based on screen dimensions (as if this were windows XP in 201) there is a problem.
A huge part of the mobile paradigm is that your UI will self adjust based on its hierarchy. Columns of 1/3 screen width won't care if the width is 400px or 600px - as an example.
At most you should just need to know if you are on a tablet to provide the tablet UI or on a phone.. or the orientation of landscape or portrait. But resolution is not something you should be concerned with.
Additional to that is the fact that at an OS level the user may have their fonts magnified. The user font scaling can be anywhere from 50% to 250% in some cases. You don't want to go down that rabbit hole of taking the resolution and then calculating font magnification, and, and, and.
Stick with the modern standards of tablet versus phone, landscape versus portrait... and don't spend hundreds of man-hours micro-managing stuff you shouldn't be trying to control in the first place.
As @ClintStLaurent says, that's a nightmare to manage.
Try using the built in XAML features to size regions of the screen based on the percentage sizes of the device screen.
<RowDefinition Height="2*"></RowDefinition> -- Use 20% of the available space
<RowDefinition Height="8*"></RowDefinition> -- Use 80% of the available space
Hi @NMackay , how can we apply this for Button and Entry tag inside StackLayout ?
@ClintStLaurent and @NMackay - Xamarin Forms lacks some functionality that makes it essential to compute certain features relative to screen dimensions. I've encountered two main limitations:
Font sizes. Given wide range of device sizes, it is desirable to change the font size based on device size. That is, if you have a layout that is proportional to device size, then fonts within that layout should (often) also be proportional to device size. (I'm especially referring to buttons and other small one-line controls/labels, not "text" content, which is more likely to be based on user's font size preference.)
margins/padding. On small devices, is sometimes desireable to reduce margins/padding, so that there is more room for the text or other content.
IMHO, Without screen-relative sizing of these details, one has to resort to making it fit on smallest device .. then it looks ridiculous on largest device.
You might want to check out Xamarin.Essentials - Device Display Information to get the details of the User's display.
Here is code using Xamarin.Essentials, to compute various useful values:
var metrics = Xamarin.Essentials.DeviceDisplay.ScreenMetrics;
int widthPixels = (int)metrics.Width;
int heightPixels = (int)metrics.Height;
float density = (float)metrics.Density;
const int DPS_PER_INCH = 160;
float dpi = density * DPS_PER_INCH;
// "DPS" are the logical units Xamarin Forms uses during layout.
float widthDps = (widthPixels / density);
float heightDps = (heightPixels / density);
float widthInches = (widthDps / DPS_PER_INCH);
float heightInches = (heightDps / DPS_PER_INCH);
For comparison, Xamarin iOS "DPS" can be retrieved this way; identical to "widthDps"/"heightDps" above:
var screenWidthDps = (float)UIScreen.MainScreen.Bounds.Width;
var screenHeightDps = (float)UIScreen.MainScreen.Bounds.Height;
Xamarin Inc., as a wholly-owned Microsoft subsidiary acting as a separate legal entity, adheres to the Microsoft Privacy Statement: Privacy & cookies