Get correct device width in Xamarin forms

Question

I'm using Xamarin labs in my Xamarin Forms project and it has a class that you can use to request information about the running device the app is on.

In my case I want to know the current Width of the Device screen. To get this you need to wire up the IDisplay interface in the iOS appdelegate so that you can use that in your forms code.

So in my forms code I get the width by requesting Resolver.Resolve<IDevice>.Display.Width or Resolver.Resolve<IDevice>.Display.XDpi

Now when running this on a iPhone 6 simulator I'm getting 750 for width and 326 for XDpi. What I'm now trying to do is use one of these 2 values to size images on the screen, so that they will have the exact width of the screen.

var image = new Image (){ Source = "img1.jpg", WidthRequest = _display.Width });

I'm displaying them inside a ExtendedScrollView

<StackLayout>
    <controlsXLabs:ExtendedScrollView x:Name="ImageScrollView"
                                      Orientation="Horizontal"
                                      AnimateScroll="true"
                                      Scrolled="OnScrolled">
        <StackLayout x:Name="DiscoverImagesStackLayout" Orientation="Horizontal" />
    </controlsXLabs:ExtendedScrollView>
    <Button Text="Click me" Clicked="OnButtonClicked" />
</StackLayout>

But the problem I'm facing now is that using Width ( 750 ) is to big ( retina scaling? ) and using XDpi is to small!

In other words how do I get the actual screen width that I can use to match with the width of my images? Or am I doing something wrong?

Added screenshots, first one is to big, second to small ( in reference to the screen size )

Answer 1

It looks like Xamarin Forms XAML layout uses iOS's points for measuring - that is, a virtual resolution that is then scaled up to match the device's physical pixels.

However, the Xamarin Forms Labs IDisplay interface you are using returns the width/height value is physical pixels, and that's why everything looks so big. Luckily it seems to have a Scale property, which is the multiplier applied to the virtual resolution when the raster process wants to compose the final, physical image.

So, just divide Display.Width or Display.Height by Display.Scale and you will get the dimensions that the device's composition layer is using for the viewport size - in your case it should be a width of 375 points/virtual units since the iPhone 6 scale multiplier is 2.

If you want more information on how the virtual resolutions of iOS are corresponded with physical screen sizes, you can find a very detailed schematic in this link .