Scale factor Windows Phone

Question

How to make correct design measurements for all resolutions in windows phone? As per Microsoft article base screen size is 800x400 (853x400) but in real life it doesnt looks like true.

I did design in base resolution 853x400

Code

  <Image Width="160" Height="90" Source="{Binding ImageURL}"/>

What I expect to see on different emulators

• WVGA 4 inch - x1 = 160x90
• 720p 4.7 inch - x1.5 = 240x135
• 1080p 5.5 inch - x2.25 = 360x203

What I see

• WVGA 4 inch - x1.2 = 192x108
• 720p 4.7 inch - x1.8 = 288x162
• 1080p 5.5 inch - x2.4 = 384x216

From this base resolution is 800x450?

When testing margins - I got more or less same results:

Code

  <Grid Margin="14, 0, 0, 0"/>

• WVGA 4 inch - x1.214 = 17px
• 720p 4.7 inch - x1.79 = 25px
• 1080p 5.5 inch - x2.43 = 34px

But fonts drawing is different -+ Code

  <Style x:Key="TitleStyle" TargetType="TextBlock">
    <Setter Property="FontSize" Value="28" />
    <Setter Property="FontWeight" Value="SemiLight" />
    <Setter Property="VerticalAlignment" Value="Center"></Setter>
</Style>

Results

• WVGA 4 inch - x0.93 = 26px
• 720p 4.7 inch - x1.32 = 37px
• 1080p 5.5 inch - x1.75 = 49px

What I should do? How to work with different resolutions correctly?

Answer 1

As @yasen says, RawPixelPerViewPixel is what you want. The 480px baseline resolution is specific to Silverlight applications, whereas you are building a Universal (XAML) application. More information about this can be found in this recorded presentation from //build. You can skip forward to 48:35 if you just want to know about the change from WP8 to 8.1