Ajustar layout e fontes e dar suporte a RTL

Crie seu aplicativo para dar suporte aos layouts e fontes de vários idiomas, incluindo a direção de fluxo RTL (da direita para a esquerda). A direção do fluxo é a direção na qual o script é gravado e exibido, e os elementos da interface do usuário na página são verificados pelo olho.

Diretrizes de layout

Idiomas como alemão e finlandês normalmente usam mais caracteres do que o inglês. As fontes do Leste Asiático geralmente exigem mais altura. E linguagens como árabe e hebraico exigem que painéis de layout e elementos de texto sejam dispostos na ordem de leitura da direita para a esquerda (RTL).

Devido a essas variações nas métricas do texto traduzido, recomendamos que você não incorpore o posicionamento absoluto, larguras fixas ou alturas fixas na interface do usuário (IU). Em vez disso, aproveite os mecanismos de layout dinâmico que são integrados aos elementos da interface do usuário do Windows. Por exemplo, controles de conteúdo (como botões), controles de itens (como exibições de grade e exibições de lista) e painéis de layout (como grades e stackpanels) redimensionam e refluxam automaticamente por padrão para se ajustarem ao conteúdo. Pseudolocalize seu aplicativo para descobrir casos extremos problemáticos em que os elementos da interface do usuário não dimensionem-se para o conteúdo corretamente.

O layout dinâmico é a técnica recomendada e você poderá usá-lo na maioria dos casos. Menos preferível, mas ainda melhor do que embutir tamanhos diretamente na marcação da UI, é definir valores de layout como função do idioma. Aqui está um exemplo de como você pode expor uma propriedade Width em seu aplicativo como um recurso que os localizadores podem definir adequadamente por idioma. Primeiro, no Arquivo de Recursos do aplicativo (.resw), adicione um identificador de propriedade com o nome "TitleText.Width" (em vez de "TitleText", você pode usar qualquer nome desejado). Em seguida, use um x:Uid para associar um ou mais elementos de interface do usuário a esse identificador de propriedade.

<TextBlock x:Uid="TitleText">

Para obter mais informações sobre Arquivos de Recursos (.resw), identificadores de propriedade e x:Uid, consulte Localizar cadeias de caracteres na interface do usuário e no manifesto do pacote do aplicativo.

Fontes

Use a classe LanguageFont de mapeamento de fontes para acesso programático à família de fontes, tamanho, peso e estilo recomendados para um idioma específico. A classe LanguageFont fornece acesso às informações de fonte corretas para várias categorias de conteúdo, incluindo cabeçalhos de interface do usuário, notificações, texto do corpo e fontes do corpo do documento editável pelo usuário.

Espelhamento de imagens

Se seu aplicativo tiver imagens que devem ser espelhadas (ou seja, a mesma imagem pode ser invertida) para RTL, você poderá usar FlowDirection.

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

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

Se seu aplicativo exigir uma imagem diferente para girar a imagem corretamente, você pode usar o sistema de gerenciamento de recursos com o qualificador LayoutDirection (consulte a seção LayoutDirection de Personalize seus recursos para idioma, escala e outros qualificadores). O sistema escolhe uma imagem chamada file.layoutdir-rtl.png quando o idioma do runtime do aplicativo (consulte Noções básicas sobre idiomas de perfil de usuário e idiomas de manifesto do aplicativo) é definido como um idioma RTL. Essa abordagem pode ser necessária quando alguma parte da imagem é invertida, mas outra parte não é.

Manipulando linguagens da direita para a esquerda (RTL)

Quando seu aplicativo for localizado para idiomas da direita para a esquerda (RTL), use a propriedade FrameworkElement.FlowDirection e defina o preenchimento simétrico e as margens. Painéis de layout, como a Grade , dimensionam-se e invertem-se automaticamente conforme o valor de Direção do Fluxo que você definir.

Defina FlowDirection no painel de layout raiz (ou quadro) da página ou na própria página. Isso faz com que todos os controles contidos dentro herdem essa propriedade.

A técnica programática é usar a propriedade LayoutDirection do idioma de exibição de usuário preferencial para definir a propriedade FlowDirection (consulte o exemplo de código abaixo). A maioria dos controles incluídos no Windows já usa FlowDirection. Se você estiver implementando um controle personalizado, ele deverá usar FlowDirection para fazer alterações de layout apropriadas para linguagens RTL e 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;
}

A técnica acima torna FlowDirection uma função da propriedade LayoutDirection do idioma de exibição de usuário preferencial. Se por algum motivo você não quiser essa lógica, poderá expor uma propriedade FlowDirection em seu aplicativo como um recurso que os localizadores podem definir adequadamente para cada idioma para o qual traduzem.

Primeiro, no Arquivo de Recursos do aplicativo (.resw), adicione um identificador de propriedade com o nome "MainPage.FlowDirection" (em vez de "MainPage", você pode usar qualquer nome desejado). Em seguida, use um x:Uid para associar seu elemento principal Página (ou seu painel de layout raiz ou estrutura) a esse identificador de propriedade.

<Page x:Uid="MainPage">

Em vez de uma única linha de código para todos os idiomas, isso depende do tradutor "traduzir" esse recurso de propriedade corretamente para cada idioma traduzido; portanto, lembre-se de que há essa oportunidade extra de erro humano quando você usa essa técnica.

APIs importantes

• FrameworkElement.FlowDirection
• LanguageFont

Tópicos relacionados

• Projetar seu aplicativo para texto bidirecional
• Localizar cadeias de caracteres na interface do usuário e no manifesto do pacote do aplicativo
• Adapte seus recursos para idioma, escala e outros qualificadores
• Noções básicas sobre idiomas de perfil de usuário e idiomas de manifesto do aplicativo