xaml - escala de tamaño de fuente en la aplicación universal de Windows Store(W8.1+WP8.1)

windows-phone-8.1 windows-8.1

Question

¿Cómo escala el texto en la aplicación universal de la Tienda Windows (W8.1 + WP8.1)? Básicamente, la aplicación debería tener el mismo aspecto, independientemente del dispositivo / resolución que se use. La situación actual es que el diseño (diseño dinámico basado en cuadrícula) y las imágenes se escalan bien, excepto el texto (tamaño de fuente).

El texto que se muestra se ve bien para la resolución WVGA (480 × 800) pero es increíblemente pequeño para una resolución de 1080p.

Ya leí muchas cosas como Pautas para escalar a densidad de píxeles o Pautas para admitir múltiples tamaños de pantalla

Pero todavía no sé cómo escalar el texto para mantenerlo legible independientemente de la resolución de pantalla / DPI.

Por supuesto, podría escribir una clase que use la propiedad DisplayInformation.ResolutionScale para convertir el tamaño de fuente en un valor apropiado.

ejemplo:

• FontSize 16 en WVGA con ScaleFactor 1x es igual a FontSize 16
• FontSize 16 en WXGA con ScaleFactor 1.6x es igual a FontSize 25,6
• FontSize 16 en 720p con ScaleFactor 1.5x es igual a FontSize 24
• FontSize 16 en 1080p con ScaleFactor 2.25x es igual a FontSize 36

Pero no estoy seguro si esto funcionará para todos los escenarios. ¿Hay una mejor manera de hacerlo? Pensé que una tarea tan común podría realizarse con alguna funcionalidad incorporada.

Descargo de responsabilidad: esto (con suerte) no es una pregunta "permítame buscarlo en Google". Encontré toneladas de páginas que tratan sobre escalar, pero todas cubren el diseño o las imágenes. Pero no pude encontrar nada acerca de la escala de tamaño de fuente. Por favor, perdóname si me perdí algo.

Edit: Me temo que no pude expresar el problema con claridad: (WVGA a la izquierda, 1080p a la derecha)

Answer 1

Descubrí que el uso del método IValueConverter funcionaba bastante bien cuando se usaba junto con la propiedad 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;
    }
}

Tenga en cuenta que si usa más de FontSize (ya que también lo estoy usando para ColumnDefinition.Width) tendrá que manejar la devolución de la salida Type''ed adecuada.

Mi uso de XAML se parece a esto:

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

Y para completar la solución, para cada página XAML en la que use esto, debe incluir lo siguiente, reemplazar SwapChainBackgroundPanel con la clase que esté usando y definir el espacio de nombres xml correctamente:

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

Answer 2

Estoy esperando una respuesta a esto y he publicado una pregunta relacionada yo mismo.
Como solución provisional, utilicé un iValueConverter y esto funciona en ciertas resoluciones pero no en otras.

Mi iValueConverter es el siguiente:

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

Espero que esto ayude...

Answer 3

Las imágenes de muestra son engañosas porque el tamaño real de los dispositivos también sería diferente. Esta publicación del blog le indica cómo configurar los emuladores para una representación más precisa.

Si desea el mismo contenido exacto en cada pantalla (es decir, un teléfono de 6 "solo muestra una versión ViewBox de un teléfono de 4", en lugar de mostrar un 50% más de contenido), entonces use un ViewBox para escalar su aplicación. Sin embargo, esta no es una experiencia de usuario particularmente buena.

Answer 4

Lo que hice para mi aplicación de la Tienda Windows fue vincular la propiedad FontSize a la altura de la página y convertir el valor (tendría que jugar un poco, hasta que encuentre el valor correcto para su caso).

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

Y aquí está mi clase de convertidor

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

No es perfecto, pero funciona bastante bien hasta que encuentre una solución mejor.

Answer 5

WinRT puede escalar automáticamente todo lo que se ejecuta sobre él y lo hará en función de la densidad de píxeles de la pantalla. En Windows 8.0 solía escalar en 100%, 140% y 180%. La versión más reciente podría tener incluso más factores de escala. No creo que puedas optar por esta escala.

Si no está interesado en utilizar el escalado integrado que funciona a nivel de sistema, entonces está obligado a hacer todo por sí mismo. Puede escalar el texto manualmente configurando el tamaño de fuente o puede usar el poder de las transformaciones para escalar su texto o su IU completa.