Windows phone 8.1 dimensions issue

Question

I am having problems understanding the dimensions while developing an App for windows phone.

I know there are 3 resolutions:

WVGA  480 ×  800   15:9
WXGA  768 × 1280   15:9 1.6x scale
720p  720 × 1280   16:9 1.5x scale, 80 pixels taller (53 pixels, after scaling)

The issue is that the Width of the page seems to be always 400 points;

When i am positioning an item (a Rectangle) in my Page, i set it's Width to 400 . I run the 480x800 emulator (8.1 WVGA 4 inch 512 mb) and the rectangle occupies the whole screen perfectly.

But when i try a bigger emulator like the 720p, the rectangle is still occupyng all the width of the page. Shouldn't it occupy 400 px and leave a gap of (720-480)??

Why do all the resolutions take 400 to be the fullwidth of the page?

EDIT: I realized that the 400px is different from 480 because the "Device" in Visual Studio says the resolution is 480x800 at 120% scale.

Why does it use this scale? How can i remove this and use the real 480 width points?

EDIT 2: I found the answer to this issue about the 400 px width here

So my graphic designer was working on a 480x800 canvas for designing the App pages. But i had to use a 400x800 canvas instead. So it's very difficult to adapt the designer mock ups to the real App.

What dimensions should the designer usa for the canvas??

Answer 1

Sounds like you are using Windows Phone 8.1 Universal App project. Scaling works differently on that platform vs. the old Silverlight platform (which uses the 1.0 / 1.5 / 1.6 system where all devices are considered to be 480 px wide).

For Universal Apps, the effective resolution depends on the size of the device as well as the physical resolution, so (for the most part) larger phones can show more content.

If you want to fill the screen's width, use HorizontalAlignment=Stretch rather than specifying a width.

Answer 2

In my code its working Fine in emulator 720p please share your Code here. I can not post Image So I cannot share My Screen

My Code is Here

  <Grid Background="Green"> <Rectangle Fill="Red" Width="400"/> </Grid>