Compartir a través de

Ajuste del diseño y las fuentes, y admita RTL.

Diseñe la aplicación para admitir los diseños y fuentes de varios idiomas, incluida la dirección del flujo RTL (de derecha a izquierda). La dirección del flujo es la dirección en la que se escribe y muestra el script, y los elementos de la interfaz de usuario de la página se examinan mediante el ojo.

Directrices de diseño

Los idiomas como alemán y finlandés suelen usar más caracteres que el inglés. Normalmente, las fuentes del Este asiático requieren más altura. Además, los idiomas como árabe y hebreo requieren que los paneles de diseño y los elementos de texto estén dispuestos en orden de lectura de derecha a izquierda (RTL).

Debido a estas variaciones en las métricas del texto traducido, se recomienda no incorporar posicionamiento absoluto, anchos fijos o alturas fijas en la interfaz de usuario (UI). En su lugar, aproveche los mecanismos de diseño dinámicos integrados en los elementos de la interfaz de usuario de Windows. Por ejemplo, los controles de contenido (como botones), los controles de elementos (como las vistas de cuadrícula y las vistas de lista) y los paneles de diseño (como cuadrículas y paneles de pila) cambian automáticamente el tamaño y el flujo de forma predeterminada para ajustarse a su contenido. Seudolocaliza tu aplicación para descubrir los casos límite problemáticos en los que los elementos de la interfaz de usuario no se ajustan correctamente al contenido.

El diseño dinámico es la técnica recomendada y podrá usarla en la mayoría de los casos. Es menos preferible, pero aún mejor que incrustar tamaños en el marcado de la interfaz de usuario, es establecer los valores de diseño en función del idioma. Este es un ejemplo de cómo puede exponer una propiedad Width en la aplicación como un recurso que los localizadores pueden establecer correctamente por idioma. En primer lugar, en el archivo de recursos de la aplicación (.resw), agregue un identificador de propiedad con el nombre "TitleText.Width" (en lugar de "TitleText", puedes usar cualquier nombre que quieras). A continuación, use un x:Uid para asociar uno o varios elementos de interfaz de usuario con este identificador de propiedad.

<TextBlock x:Uid="TitleText">

Para obtener más información sobre los archivos de recursos (.resw), los identificadores de propiedad y x:Uid, consulta Localize strings in your UI and app package manifest.

Fuentes

Use la clase de asignación de fuentes LanguageFont para acceder mediante programación a la familia de fuentes, el tamaño, el peso y el estilo recomendados para un idioma determinado. La clase LanguageFont de proporciona acceso a la información correcta de fuente para varias categorías de contenido, incluidos encabezados de la interfaz de usuario, notificaciones, texto del cuerpo y fuentes del cuerpo de documentos editables por el usuario.

Reflejar imágenes

Si la aplicación tiene imágenes que deben reflejarse (es decir, se puede voltear la misma imagen) para RTL, puede usar FlowDirection.

<!-- en-US\localized.xaml -->
<Image ... FlowDirection="LeftToRight" />

<!-- ar-SA\localized.xaml -->
<Image ... FlowDirection="RightToLeft" />

Si tu aplicación necesita una imagen diferente para voltear la imagen correctamente, entonces puedes usar el sistema de gestión de recursos con el calificador LayoutDirection (consulta la sección LayoutDirection de sobre cómo adaptar tus recursos para el idioma, la escala y otros calificadores). El sistema elige una imagen denominada file.layoutdir-rtl.png cuando el lenguaje en tiempo de ejecución de la aplicación (consulte Descripción de los idiomas de perfil de usuario y los idiomas de manifiesto de la aplicación) está establecido en un idioma RTL. Este enfoque puede ser necesario cuando se voltea parte de la imagen, pero otra parte no.

Manejo de idiomas de derecha a izquierda (RTL)

Cuando la aplicación se localiza para los lenguajes de derecha a izquierda (RTL), usa la propiedad FrameworkElement.FlowDirection y establece el relleno y los márgenes simétricos. Paneles de diseño como Grid escalan y voltean automáticamente con el valor de FlowDirection que establezca.

Establezca FlowDirection en el panel de diseño raíz (o marco) de la página o en la propia página. Esto hace que todos los controles contenidos en ellos hereden esa propiedad.

Importante

Sin embargo, FlowDirection no se establece automáticamente en función del idioma de presentación seleccionado por el usuario en la configuración de Windows; tampoco cambia dinámicamente en respuesta al idioma de visualización cambiado por el usuario. Si el usuario cambia la configuración de Windows de inglés a árabe, por ejemplo, la propiedad FlowDirection no cambiar automáticamente de izquierda a derecha a izquierda. Como desarrollador de la aplicación, debe establecer FlowDirection apropiadamente para el idioma que se muestra actualmente.

La técnica mediante programación consiste en usar la propiedad LayoutDirection del idioma de visualización de usuario preferido para establecer la propiedad FlowDirection (consulte el ejemplo de código siguiente). La mayoría de los controles incluidos en Windows usan FlowDirection ya. Si va a implementar un control personalizado, debe usar FlowDirection para realizar los cambios de diseño adecuados para los lenguajes RTL y LTR.

this.languageTag = Windows.Globalization.ApplicationLanguages.Languages[0];

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

var flowDirectionSetting = Windows.ApplicationModel.Resources.Core.ResourceContext.GetForCurrentView().QualifierValues["LayoutDirection"];
if (flowDirectionSetting == "LTR")
{
    this.layoutRoot.FlowDirection = Windows.UI.Xaml.FlowDirection.LeftToRight;
}
else
{
    this.layoutRoot.FlowDirection = Windows.UI.Xaml.FlowDirection.RightToLeft;
}

#include <winrt/Windows.ApplicationModel.Resources.Core.h>
#include <winrt/Windows.Globalization.h>
...

m_languageTag = Windows::Globalization::ApplicationLanguages::Languages().GetAt(0);

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

auto flowDirectionSetting = Windows::ApplicationModel::Resources::Core::ResourceContext::GetForCurrentView().QualifierValues().Lookup(L"LayoutDirection");
if (flowDirectionSetting == L"LTR")
{
    layoutRoot().FlowDirection(Windows::UI::Xaml::FlowDirection::LeftToRight);
}
else
{
    layoutRoot().FlowDirection(Windows::UI::Xaml::FlowDirection::RightToLeft);
}

this->languageTag = Windows::Globalization::ApplicationLanguages::Languages->GetAt(0);

// For bidirectional languages, determine flow direction for the root layout panel, and all contained UI.

auto flowDirectionSetting = Windows::ApplicationModel::Resources::Core::ResourceContext::GetForCurrentView()->QualifierValues->Lookup("LayoutDirection");
if (flowDirectionSetting == "LTR")
{
    this->layoutRoot->FlowDirection = Windows::UI::Xaml::FlowDirection::LeftToRight;
}
else
{
    this->layoutRoot->FlowDirection = Windows::UI::Xaml::FlowDirection::RightToLeft;
}

La técnica anterior hace FlowDirection una función de la propiedad LayoutDirection del idioma de visualización de usuario preferido. Si por cualquier motivo no desea esa lógica, puede exponer una propiedad de FlowDirection en la aplicación como un recurso en el que los localizadores puedan establecerse apropiadamente para cada idioma en el que se traduce.

En primer lugar, en el archivo de recursos de la aplicación (.resw), agregue un identificador de propiedad con el nombre "MainPage.FlowDirection" (en lugar de "MainPage", puedes usar cualquier nombre que quieras). A continuación, use un x:Uid para asociar el elemento principal Page (o su panel de diseño raíz o marco) con este identificador de propiedad.

<Page x:Uid="MainPage">

En lugar de una sola línea de código para todos los idiomas, esto depende de que el traductor traduzca correctamente este recurso de propiedad para cada idioma. Tenga en cuenta que existe una mayor posibilidad de error humano al utilizar esta técnica.

API importantes