Roger Hartley
Roger Hartley

Reputation: 684

How to get the physical diagonal screen size in a UWP app

In a UWP app, I want to place a command bar at the top of the app when running on a desktop/large tablet, and place it at the bottom when running on a mobile/small tablet so that it’s optimised for one handed use.

I also want to make all of my runtime layout decisions based on screen/window size and ignore device family. What I’d like to do is detect if the screen size is less than 7” – if it is then move the command bar.

The problem is I can’t find any API that gives me this information. I’ve looked at the DisplayInformation class, which give me DPI information, and ApplicationView.GetForCurrentView().VisibleBounds, which gives me the window size, but I can’t see how to get or calculate the physical screen size in inches.

I’m sure this is a common, recommended, pattern so I must be missing something obvious. Any ideas?

Upvotes: 2

Views: 1610

Answers (2)

Gaurav
Gaurav

Reputation: 195

Note: It requires Build 10586 or higher. Will throw exception on build 10240.

    public static bool IsScreenSizeLessThan7inches()
    {
        //Get the diagonal size of the integrated display
        double actualSizeInInches = Double.MaxValue;
        if (DisplayInformation.GetForCurrentView().DiagonalSizeInInches.HasValue)
            actualSizeInInches = DisplayInformation.GetForCurrentView().DiagonalSizeInInches.Value;

        //If the diagonal size is <7" use the OneHanded optimized view
        if (actualSizeInInches > 0 && actualSizeInInches <7)
            return true;
        else
            return false;
    }

Upvotes: 3

tomab
tomab

Reputation: 2151

I've come across same issue and in the end I choose to use only the window size and update my app layout according to it instead of physical screen size. This is because on large desktop monitors if the app is full screen I want one layout (e.g. place the command bar at the top) and if the app is narrowed, like on a windows phone 10, I want the other layout (e.g. place the command bar at the bottom).

This solution is more suitable because it can handle different sizes of your app on same screen.

There is an enum:

public enum LayoutType
{
    Overlay,
    Parallel
}

And then there is an event subscribing:

window.SizeChanged += LayoutRootSizeChanged;

private void LayoutRootSizeChanged(object sender, WindowSizeChangedEventArgs e)
{
    var height = e.Size.Height;
    var width = e.Size.Width;
    if (ApplicationView.GetForCurrentView().Orientation == ApplicationViewOrientation.Landscape)
    {
       LayoutType = width > 800 ? LayoutType.Parallel : LayoutType.Overlay;
    }
    else
    {
        LayoutType = LayoutType.Overlay;
    }
}

Upvotes: 0

Related Questions