Condividi tramite

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 percepiti 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 incorporare il posizionamento assoluto, le larghezze fisse o le altezze fisse nell'interfaccia utente (UI). Sfruttare invece i meccanismi di layout dinamico integrati negli elementi dell'interfaccia utente di Windows. Ad esempio, i controlli di contenuto (come pulsanti), i controlli di elementi (come visualizzazioni griglia e visualizzazioni elenco) e i pannelli di layout (come griglie e stackpanel) si ridimensionano e si adattano automaticamente per impostazione predefinita per adattarsi al loro contenuto. Pseudo-localizzare la tua app per individuare eventuali casi limite in cui gli elementi dell’interfaccia utente non si adattano correttamente al contenuto.

Il layout dinamico è la tecnica consigliata e sarà possibile usarlo nella maggior parte dei casi. Meno preferibile, ma comunque migliore che includere dimensioni fisse nel markup dell'interfaccia utente, è impostare i valori di layout in base alla lingua. 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 ulteriori informazioni sui file di risorse (con estensione .resw), identificatori delle proprietà e x:Uid, consultare Localizzare le stringhe nell'interfaccia utente e nel manifesto del pacchetto dell'app.

Tipi di carattere

Utilizzare la classe di mappatura dei caratteri LanguageFont per accedere in modo programmatico alla famiglia di caratteri, alla dimensione, al peso 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 e caratteri modificabili dall'utente nei documenti.

Immagini specchiate

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), utilizza la proprietà FrameworkElement.FlowDirection e imposta riempimenti e margini simmetrici. Pannelli di layout quali Grid scalano e ruotano automaticamente secondo il valore di FlowDirection che imposti.

Imposta FlowDirection sul pannello di layout radice (o frame) della tua Pagina, o sulla Pagina stessa. In questo modo tutti i controlli contenuti all'interno ereditano tale proprietà.

Importante

Tuttavia, FlowDirection non è impostato automaticamente in base alla lingua di visualizzazione selezionata dall'utente nelle impostazioni di Windows, né cambia dinamicamente quando l'utente cambia la lingua di visualizzazione. Se l'utente passa le impostazioni di Windows dall'inglese all'arabo, ad esempio, la proprietà FlowDirection non cambiare 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 un x:Uid per associare l'elemento page principale (o il pannello o il frame di layout radice) a questo identificatore di proprietà.

<Page x:Uid="MainPage">

Anziché utilizzare una singola riga di codice per tutte le lingue, questa tecnica richiede che il traduttore traduca correttamente la risorsa di proprietà per ciascuna lingua; quindi, bisogna essere consapevoli dell'ulteriore possibilità di errore umano quando si adotta questo approccio.

API importanti