Ajuste o layout e as fontes e suporte RTL

Projete seu aplicativo para oferecer suporte a layouts e fontes de vários idiomas, incluindo a direção do fluxo RTL (da direita para a esquerda). A direção do fluxo é aquela em que o script é escrito e exibido, e os elementos da interface na página são percorridos pelo olhar.

Diretrizes de layout

Línguas como o alemão e o finlandês utilizam normalmente mais carateres do que o inglês. As fontes do Leste Asiático normalmente exigem mais altura. E idiomas como árabe e hebraico exigem que os painéis de layout e os 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 inclua posicionamento absoluto, larguras fixas ou alturas fixas em sua interface do usuário (UI). Em vez disso, aproveite os mecanismos de layout dinâmico incorporados 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 refluem automaticamente por padrão para ajustar seu conteúdo. Pseudolocalize a sua aplicação para descobrir casos extremos problemáticos em que os elementos da interface de utilizador não se dimensionam corretamente para o conteúdo.

O layout dinâmico é a técnica recomendada, e você poderá usá-lo na maioria dos casos. Menos preferível, mas ainda assim melhor do que inserir tamanhos na marcação da interface do usuário, é definir valores de layout em função do idioma. Veja 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 seu aplicativo (.resw), adicione um identificador de propriedade com o nome "TitleText.Width" (em vez de "TitleText", você pode usar qualquer nome que desejar). Em seguida, use um x:Uid para associar um ou mais elementos da interface do usuário a esse identificador de propriedade.

<TextBlock x:Uid="TitleText">

Para saber mais sobre Arquivos de Recursos (.resw), identificadores de propriedade e x:Uid , veja Localizar cadeias de caracteres no manifesto da interface do usuário e do pacote do aplicativo.

Fontes

Use o LanguageFont classe 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, corpo de texto e fontes de corpo de documento editáveis 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 a sua aplicação exigir uma imagem diferente para virar a imagem corretamente, pode usar o sistema de gestão de recursos com o qualificador LayoutDirection (consulte a secção LayoutDirection de Ajuste os seus recursos para idioma, escala e outros qualificadores). O sistema escolhe uma imagem nomeada file.layoutdir-rtl.png quando a linguagem de tempo de execução do aplicativo (consulte Compreender idiomas de perfil de usuário e idiomas de manifesto do aplicativo) é definida como uma linguagem RTL. Essa abordagem pode ser necessária quando alguma parte da imagem é invertida, mas outra parte não.

Tratamento de idiomas da direita para a esquerda (RTL)

Quando seu aplicativo estiver localizado para idiomas da direita para a esquerda (RTL), use a propriedade FrameworkElement.FlowDirection e defina preenchimento e margens simétricos. Os painéis de layout, como Grid,, dimensionam e invertem automaticamente com o valor de FlowDirection que definir.

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

A técnica programática é usar a propriedade LayoutDirection do idioma de preferência do utilizador para definir a propriedade FlowDirection (veja o exemplo de código abaixo). A maioria dos controles incluídos no Windows já usa o FlowDirection . Se você estiver implementando um controle personalizado, ele deverá usar o FlowDirection para fazer as alterações de layout apropriadas para os idiomas 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 LayoutDirection propriedade do idioma de exibição do usuário preferido. Se, por qualquer 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 seu aplicativo (.resw), adicione um identificador de propriedade com o nome "MainPage.FlowDirection" (em vez de "MainPage", você pode usar qualquer nome que desejar). Em seguida, use um x:Uid para associar seu elemento Page principal (ou seu painel de layout raiz ou quadro) 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, esteja ciente de que há uma oportunidade extra para o erro humano quando você usa essa técnica.

APIs importantes

• FrameworkElement.FlowDirection
• LanguageFont

Tópicos relacionados

• Desenhe a sua aplicação para texto bidirecional
• Localizar cadeias de caracteres na sua interface de utilizador e no manifesto do pacote da aplicação
• Adapte seus recursos para idioma, escala e outros qualificadores
• Compreender os idiomas do perfil de utilizador e os idiomas do manifesto da aplicação