Windows Store Universal App中的字体大小缩放(W8.1 + WP8.1)

Question

如何在Windows应用商店通用应用程序(W8.1 + WP8.1)中缩放文本？基本上,无论使用哪种设备/分辨率,应用程序看起来都应该相同.目前的情况是布局(基于动态网格的布局)和图像比文本(字体大小)更好地缩放.

显示的文字看起来很适合WVGA分辨率(480×800),但对于1080p分辨率来说却非常小.

我已经阅读了许多内容,例如 缩放到像素密度的指南或 支持多种屏幕尺寸的指南

但我仍然不知道如何扩展文本以保持可读性,无论显示分辨率/ DPI.

当然,我可以编写一个使用DisplayInformation.ResolutionScale属性将字体大小转换为适当值的类.

例:

• 带有ScaleFactor 1x的WVGA上的FontSize 16等于FontSize 16
• 带有ScaleFactor 1.6x的WXGA上的FontSize 16等于FontSize 25,6
• 带有ScaleFactor 1.5x的7​​20p上的FontSize 16等于FontSize 24
• 带有ScaleFactor 2.25x的1080p上的FontSize 16等于FontSize 36

但我不确定这是否适用于所有情况.有没有更好的方法呢？我认为这样的常见任务可以通过一些内置功能来执行.

免责声明:这是(希望)不是"让我谷歌这个为你问题"我发现大量的页面是关于缩放,但它们都覆盖布局或图像.但我找不到任何有关字体大小缩放的信息.如果我错过了什么,请原谅我.

---

编辑:我很害怕,我没有清楚地表达问题:(左边是WVGA,右边是1080p)

Answer 1

我为我的Windows应用商店应用做的是将FontSize属性绑定到页面高度并转换值(您必须播放一些,直到找到适合您的情况的值).

<TextBlock Grid.Row="0" Text="Some Text" 
FontSize="{Binding ElementName=pageRoot, Path=ActualHeight, 
Converter={StaticResource PageHeightConverter}, ConverterParameter='BodyFontSize'}" />

这是我的Converter类

    class PageHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        switch ((string)parameter)
        {
            case "HeroImage":
                return ((((double)value) * 2) / 3);
            case "TitleFontSize":
                return (int)((double)value / 40);
            case "BodyFontSize":
                return (int)((double)value / 60);
            default:
                return 0;
        }
    }
}

它并不完美,但在找到更合适的解决方案之前效果很好.

Answer 2

我发现使用IValueConverter方法与ResolutionScale属性结合使用时效果很好:

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;
    }
}

请注意,如果您使用的不仅仅是FontSize(因为我也将它用于ColumnDefinition.Width),您将需要处理返回正确的Typeed输出.

我的XAML用法如下所示:

<TextBlock Text="string" FontSize="{Binding ElementName=root, Path=ActualHeight, Converter={StaticResource ScaleConverter}, ConverterParameter='30'}" />

要完成解决方案,对于您使用此方法的每个XAML页面,您需要包含以下内容,将SwapChainBackgroundPanel替换为您正在使用的任何类,并正确定义xml命名空间:

<SwapChainBackgroundPanel.Resources>
    <local:ScaleConverter x:Key="ScaleConverter"></local:ScaleConverter>
</SwapChainBackgroundPanel.Resources>

Answer 3

WinRT 可以自动缩放在其上运行的所有内容，并根据显示器的像素密度进行缩放。在 Windows 8.0 中，它曾经以 100%、140% 和 180% 进行缩放。新版本可能有更多的比例因子。我不认为您可以选择退出这种扩展。

如果您对使用在系统级别运行的内置缩放不感兴趣，那么您几乎被迫自己做所有事情。您可以通过设置字体大小来手动缩放文本，也可以使用转换的功能来缩放文本或整个 UI。