How to port styles (like fontsize for TextBlock) from Windows Phone 8 Silverlight to Windows Phone 8.1 WinRT

Question

I have an existing Windows Phone 8 Silverlight application with a lot of different styles defined for TextBlocks on different pages.

I am now trying to port my entire project to a Windows Universal App, hence the Windows Phone 8 Silverlight project needs to be converted into Windows Phone 8.1 WinRT. I am able to get most part working, except the styles.

I have issues in getting the styles right mostly for TextBlocks. The same fontsize and fontfamily doesn't seem to render in the same way for the Windows Phone 8.1 WinRT Project.

Here's an example. I have the following Style for a TextBlock

<Style x:Name="NormalStyle"
           TargetType="TextBlock">
    <Setter Property="Foreground"
                Value="Red" />
    <Setter Property="FontSize"
                Value="100" />
    <Setter Property="FontFamily"
                Value="Segoe WP" />
    <Setter Property="LineStackingStrategy"
                Value="BlockLineHeight" />
    <Setter Property="TextTrimming"
                Value="WordEllipsis" />
    <Setter Property="TextWrapping"
                Value="Wrap" />
</Style>

And I am using the same above style in both my Silverlight Windows Phone 8 and Windows Phone 8.1 WinRT projects as shown below.

<TextBlock Text="Hi"
               Style="{StaticResource NormalStyle}" />

Here is how it appears in the Windows Phone 8 Silverlight

enter image description here

Here is how it appears in the Windows Phone 8.1 WinRT

enter image description here

As you can see from the above images, the font size is much larger in Windows Phone 8.1 Universal App than in the silverlight Windows Phone 8. So just copy pasting the styles is not an option.

Is there a suggested/defined way to port my styles from Silverlight application to Windows Phone 8.1 WinRT application?
Something like WinRT fontsize is 5 less than Silverlight fontsize?
Or do I have to go through each style and modify one by one and compare both the apps manually to conclude that the styles are matching precisely?
How about other styles(non-textblock). Is there a suggested way to port them?

I would be very glad if someone can point me in the right direction. Thanks in Advance.

There are new screen resolutions in WP 8.1. If you have any constants, than you need to mupltiple them by 0.8. This applies to FontSize, Width, Height, Margin and so on. In your case set FontSize=80 in your style. — Валера Галанин
@ВалераГаланин - Do you have a link/documentation which talks about the same in detail? — HelpMatters
@ВалераГаланин - Thanks a lot. That helps a lot. — yasir

Валера Галанин Валера Галанин · Accepted Answer · 2014-09-17T17:00:11

The minimum effective resolution for windows phone 8 (and 8.1 silverlight) is 480x800.

In Windows Phone 8.1 XAML the minimum effective resolution is 384x640

640 = 800 * 0.8

384 = 480 * 0.8

So if you designed for 480x800 in Windows Phone 8, and now you want to migrate to Windows Phone 8.1 you need to multiple all your hardcoded constants (Height, Width, FontSize, Margin) by 0.8 to achieve the same size of screen element for new minimal effective resolution.

You can watch great Peter Torr build 2014 video: http://channel9.msdn.com/Events/Build/2014/3-541 On 50.50 he mentions that fact.

How to port styles (like fontsize for TextBlock) from Windows Phone 8 Silverlight to Windows Phone 8.1 WinRT

1 Answers