How to get/detect screen size in Xamarin.Forms?

Question

I am trying to rewrite an app that I wrote for iOS. I was going to write an android version but thought It'd be better to make this the opportunity to use Xamarin.Forms. Doing it one page at a time, now I'm stuck on a page where I need to get the screen's width and height. Does anyone know the equivalent of iOS' View.Frame.Width in Xamarin.Forms?

Answer 1

Update: You can use Xamarin.Essentials nuget package for this and many other purposes.

var width = DeviceDisplay.MainDisplayInfo.Width;
var height = DeviceDisplay.MainDisplayInfo.Height;

Old answer:

There is an easy way to get the screen's width and height in Xamarin.Forms and access it globally from everywhere in your app. I'd do something like this:

1. Create two public members in your App.cs:

public static class App
{
    public static int ScreenWidth;
    public static int ScreenHeight;
    ...
}

2. Set the values in your MainActivity.cs (Android) or your AppDelegate.cs (iOS):

Android:

protected override void OnCreate(Bundle bundle)
{
    ...

    App.ScreenWidth = (int)Resources.DisplayMetrics.WidthPixels; // real pixels
    App.ScreenHeight = (int)Resources.DisplayMetrics.HeightPixels; // real pixels

    // App.ScreenWidth = (int)(Resources.DisplayMetrics.WidthPixels / Resources.DisplayMetrics.Density); // device independent pixels
    // App.ScreenHeight = (int)(Resources.DisplayMetrics.HeightPixels / Resources.DisplayMetrics.Density); // device independent pixels

    ...
}

iOS:

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    ...

    App.ScreenWidth = (int)UIScreen.MainScreen.Bounds.Width;
    App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;

    ...
}

Answer 2

If you are using xamarin forms, then you can find width and height of current screen in portable class library(pcl) like below.

For Width you use this in pcl,

Application.Current.MainPage.Width

For height you can do this in pcl,

Application.Current.MainPage.Height

Answer 3

There isn't currently a way from Xamarin.Forms itself but we have it implemented as PCL compatible interface in Xamarin.Forms.Labs which you can get from NuGet or source code from GitHub.

https://github.com/XForms/Xamarin-Forms-Labs

IDevice has IDisplay property with the information; height, width, pixel density for X & Y and couple of extension methods to calculate sized in inches.

Sample page for getting information from the device:

https://github.com/XForms/Xamarin-Forms-Labs/blob/master/samples/Xamarin.Forms.Labs.Sample/Pages/Services/ExtendedDeviceInfoPage.cs

        #region Display information
        var display = device.Display;
        var displayFrame = new Frame();
        if (display != null)
        {
            displayFrame.Content = new StackLayout()
            {
                Children =
                {
                    new Label() { Text = display.ToString() },
                    new Label() { Text = string.Format("Screen width is\t {0:0.0} inches.", display.ScreenWidthInches()) },
                    new Label() { Text = string.Format("Screen height is\t {0:0.0} inches.", display.ScreenHeightInches()) },
                    new Label() { Text = string.Format("Screen diagonal size is\t {0:0.0} inches.", display.ScreenSizeInches()) }
                            }
                        };
        }
        else
        {
            displayFrame.Content = new Label() { TextColor = Color.Red, Text = "Device does not contain display information." };
        }

        stack.Children.Add(displayFrame); 
        #endregion

Creating an exact inch-by-inch frame on all platforms regardless of display properties:

https://github.com/XForms/Xamarin-Forms-Labs/blob/master/samples/Xamarin.Forms.Labs.Sample/Pages/Services/AbsoluteLayoutWithDisplayInfoPage.cs

public class AbsoluteLayoutWithDisplayInfoPage : ContentPage
{
    public AbsoluteLayoutWithDisplayInfoPage(IDisplay display)
    {
        this.Title = "Absolute Layout With Display Info";
        var abs = new AbsoluteLayout();
        var inchX = display.WidthRequestInInches(1);
        var inchY = display.HeightRequestInInches(1);
        var originX = display.WidthRequestInInches(display.ScreenWidthInches() / 2);
        var originY = display.HeightRequestInInches(display.ScreenHeightInches() / 2);

        abs.Children.Add(new Label() { Text = "1\"x\"1\" blue frame" });

        abs.Children.Add(new Frame()
            {
                BackgroundColor = Color.Navy,
            },
            new Rectangle(originX - inchX/2, originY - inchY/2, inchX, inchY));

        abs.Children.Add(new Frame()
            {
                BackgroundColor = Color.White
            },
            new Rectangle(originX - inchX/16, originY - inchY/16, inchX/8, inchY/8));

        this.Content = abs;
    }
}

To get to the device info either set your DI resolver or use a static container. All 3 platforms have a singleton device calls with static CurrentDevice property:

resolverContainer.Register<IDevice>(t => WindowsPhoneDevice.CurrentDevice)
resolverContainer.Register<IDevice>(t => AppleDevice.CurrentDevice)
resolverContainer.Register<IDevice>(t => AndroidDevice.CurrentDevice)

Answer 4

Recipe

Create a new Xamarin.Android application named ScreenSize. Edit Main.axml so that it contains two TextViews:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:text="Screen Width:"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/screenWidthDp" />
    <TextView
        android:text="Screen Height:"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/screenHeightDp" />
</LinearLayout>

1. Edit Activity1.cs, change the code in OnCreate to the following:

   ![enter image description here][1] private int ConvertPixelsToDp(float pixelValue) { var dp = (int) ((pixelValue)/Resources.DisplayMetrics.Density); return dp; }

2. Run the application. Depending on the device, it will display the screen height and width. The following screen shot is from a Galaxy Nexus:

[image link] https://i.stack.imgur.com/TQhba.png

Answer 5

In your App file define a public static variable

public static Size ScreenSize;

You should initialise the variable both in IOS and Android before calling the App constructer. For IOS, in FinishedLaunching method

App.ScreenSize = new Size(UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height);

and For Android, in OnCreate function

            App.ScreenSize = new Xamarin.Forms.Size((int)(Resources.DisplayMetrics.WidthPixels / Resources.DisplayMetrics.Density), (int)(Resources.DisplayMetrics.HeightPixels / Resources.DisplayMetrics.Density));

Answer 6

Updating for future developers trying to do this that either haven't looked or missed it. The Page class inherits from VisualElement, which now has two properties (which happen to be bindable for use in XAML):

Width - Gets the current rendered width of this element. This is a read-only bindable property. Height - Gets the current rendered height of this element. This is a read-only bindable property.

in your page codebehind you would just do something like:

var myWidth = this.Width;
var myHeight = this.Height;

if you needed to know if it changes, use the SizeChanged event:

public MyPage()
{
    SizeChanged += OnSizeChanged;
}

private void OnSizeChanged(object sender, EventArgs e)
{
    var myWidth = this.Width;
    var myHeight = this.Height;
}

ref: Microsoft Docs