Modificare layout e tipi di carattere e supportare RTL

Progettare l'app per supportare i layout e i tipi di carattere di più lingue, tra cui la direzione del flusso RTL (da destra a sinistra). La direzione del flusso è la direzione in cui viene scritto e visualizzato lo script e gli elementi dell'interfaccia utente nella pagina vengono analizzati dall'occhio.

Linee guida per il layout

Le lingue come il tedesco e il finlandese usano in genere più caratteri rispetto all'inglese. I tipi di carattere dell'Asia orientale richiedono in genere un'altezza maggiore. E le lingue come l'arabo e l'ebraico richiedono che i pannelli di layout e gli elementi di testo siano disposti in ordine di lettura da destra a sinistra (RTL).

A causa di queste variazioni nelle metriche del testo tradotto, è consigliabile non creare il bake di posizionamento assoluto, larghezze fisse o altezze fisse nell'interfaccia utente. Sfruttare invece i meccanismi di layout dinamico integrati negli elementi dell'interfaccia utente di Windows. Ad esempio, i controlli contenuto (ad esempio pulsanti), i controlli elementi (ad esempio le visualizzazioni griglia e le visualizzazioni elenco) e i pannelli di layout (ad esempio griglie e stackpanel) ridimensionano e reflow automaticamente per impostazione predefinita per adattarne il contenuto. Pseudo-localizzare l'app per individuare eventuali casi limite problematici in cui gli elementi dell'interfaccia utente non vengono ridimensionati correttamente per il contenuto.

Il layout dinamico è la tecnica consigliata e sarà possibile usarlo nella maggior parte dei casi. Meno preferibile, ma ancora meglio delle dimensioni di cottura nel markup dell'interfaccia utente, è impostare i valori di layout come funzione del linguaggio. Ecco un esempio di come esporre una proprietà Width nell'app come risorsa che i localizzatori possono impostare in modo appropriato per ogni lingua. In primo luogo, nel file di risorse dell'app (.resw), aggiungere un identificatore di proprietà con il nome "TitleText.Width" (invece di "TitleText", è possibile usare qualsiasi nome desiderato). Usare quindi un x :Uid per associare uno o più elementi dell'interfaccia utente a questo identificatore di proprietà.

<TextBlock x:Uid="TitleText">

Per altre info su File di risorse (con estensione resw), identificatori di proprietà e x:Uid, vedi Localizzare le stringhe nell'interfaccia utente e nel manifesto del pacchetto dell'app.

Tipi di carattere

Utilizzare la classe di mapping dei tipi di carattere LanguageFont per l'accesso a livello di codice alla famiglia di caratteri, alle dimensioni, allo spessore e allo stile consigliati per una determinata lingua. La classe LanguageFont consente di accedere alle informazioni corrette sul tipo di carattere per varie categorie di contenuto, tra cui intestazioni dell'interfaccia utente, notifiche, testo del corpo del corpo e tipi di carattere modificabili dall'utente.

Immagini di mirroring

Se l'app include immagini che devono essere con mirroring (ovvero la stessa immagine può essere capovolta) per RTL, è possibile usare FlowDirection.

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

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

Se l'app richiede un'immagine diversa per capovolgere correttamente l'immagine, è possibile usare il sistema di gestione delle risorse con il LayoutDirection qualificatore (vedere la sezione LayoutDirection di Adattare le risorse per lingua, scalabilità e altri qualificatori). Il sistema sceglie un'immagine denominata file.layoutdir-rtl.png quando la lingua di runtime dell'app (vedere Informazioni sulle lingue del profilo utente e sulle lingue del manifesto dell'app) è impostata su una lingua RTL. Questo approccio può essere necessario quando alcune parti dell'immagine vengono capovolte, ma un'altra parte non lo è.

Gestione dei linguaggi da destra a sinistra (RTL)

Quando l'app viene localizzata per le lingue da destra a sinistra (RTL), usa la proprietà FrameworkElement.FlowDirection e imposta spaziatura interna e margini simmetrici. Pannelli di layout, ad esempio scala griglia e capovolgimento automatico con il valore di FlowDirection impostato.

Impostare FlowDirection nel pannello o nel frame radice della pagina o nella pagina stessa. In questo modo tutti i controlli contenuti all'interno ereditano tale proprietà.

Importante

FlowDirection, tuttavia, non viene impostato automaticamente in base alla lingua di visualizzazione selezionata dall'utente nelle impostazioni di Windows, né cambia in modo dinamico in risposta alla lingua di visualizzazione dell'utente. Se l'utente passa le impostazioni di Windows dall'inglese all'arabo, ad esempio, la proprietà FlowDirection non cambierà automaticamente da sinistra a destra a sinistra. Gli sviluppatori di app devono impostare FlowDirection in modo appropriato per il linguaggio attualmente visualizzato.

La tecnica programmatica consiste nell'usare la LayoutDirection proprietà della lingua di visualizzazione utente preferita per impostare la proprietà FlowDirection (vedere l'esempio di codice riportato di seguito). La maggior parte dei controlli inclusi in Windows usa già FlowDirection . Se si implementa un controllo personalizzato, è consigliabile usare FlowDirection per apportare modifiche di layout appropriate per i linguaggi 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;
}

La tecnica precedente rende FlowDirection una funzione della LayoutDirection proprietà della lingua di visualizzazione utente preferita. Se per qualsiasi motivo non si vuole usare questa logica, è possibile esporre una proprietà FlowDirection nell'app come risorsa che i localizzatori possono impostare in modo appropriato per ogni lingua in cui si traducono.

In primo luogo, nel file di risorse dell'app (.resw), aggiungere un identificatore di proprietà con il nome "MainPage.FlowDirection" (invece di "MainPage", è possibile usare qualsiasi nome desiderato). Usare quindi x:Uid per associare l'elemento Page principale (o il relativo pannello o frame di layout radice) a questo identificatore di proprietà.

<Page x:Uid="MainPage">

Anziché una singola riga di codice per tutte le lingue, questo dipende dal traduttore "traducendo" correttamente questa risorsa di proprietà per ogni lingua tradotta; quindi tenere presente che c'è un'opportunità aggiuntiva per l'errore umano quando si usa questa tecnica.

API importanti