font size scaling in Windows Store Universal App (W8.1 + WP8.1)

Question

How do i scale text in Windows Store Universal App (W8.1 + WP8.1)? Basically, the app should look the same regardless which device/resolution is used. The current situation

Answer 1

I found that using the IValueConverter method worked pretty well when used in conjunction with the ResolutionScale property:

class ScaleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        var resolutionScale = (int)DisplayInformation.GetForCurrentView().ResolutionScale / 100.0;
        var baseValue = int.Parse(parameter as string);
        var scaledValue = baseValue * resolutionScale;
        if (targetType == typeof(GridLength))
            return new GridLength(scaledValue);
        return scaledValue;
    }
}

Please note, that if you use for more than FontSize (as I am also using it for ColumnDefinition.Width) you will need to handle returning the proper Type'ed output.

My XAML usage looks something like this:

And to just complete the solution, for each XAML page you use this on, you need to include the following, replacing SwapChainBackgroundPanel with whatever class you are using, and defining the xml namespace properly: