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

Question

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

显示的文字看起来非常适合WVGA分辨率（480×800），但对于1080p分辨率来说却非常小。

我已经阅读了很多类似的东西 Guidelines for scaling to pixel density或 Guidelines for supporting multiple screen sizes

但是我仍然不知道如何缩放文本以保持可读性，无论显示分辨率/ DPI如何。

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

示例：

• WVGA上的FontSize 16，ScaleFactor 1x等于FontSize 16
• WXGA上的FontSize 16与ScaleFactor 1.6x等于FontSize 25,6
• 720p上的FontSize 16，ScaleFactor 1.5x等于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'}" />

这是我的转换器类

    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），您需要处理返回正确的Type＆＃39; ed输出。

我的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。

Answer 4

您的示例图像具有误导性，因为设备的实际尺寸也会有所不同。 This blog post告诉您如何设置模拟器以获得更准确的表示。

如果你想在每个屏幕上显示完全相同的内容（例如，6英寸手机只显示4英寸手机的爆炸版本，而不是显示50％以上的内容），请使用ViewBox来扩展您的应用。但这并不是一个特别好的用户体验。

Answer 5

我正在等待答案，并自己发布了一个相关问题 作为临时解决方案，我使用了iValueConverter，这适用于某些分辨率，但不适用于其他分辨率。

我的iValueConverter如下：

class FontSizeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
    {
    var display = Helpers.ScreenResolution();
    var height = display.Height;
    var oldFontSize = (int)value;
    if(oldFontSize == null) return;

    // Calculate the new Fontsize based on the designed Fontsize
    // and design display size in Visual Studio designer...
    var newFontSize = (int)Math.Round((oldFontSize / 768.0) * height, 0);
    return newFontSize;
}

public object ConvertBack(object value, Type targetType, object parameter, string language)
{
    throw new NotImplementedException();
}}

我希望这会有所帮助......