Per visualizzare l'articolo in inglese, selezionare la casella di controllo Inglese. È possibile anche visualizzare il testo inglese in una finestra popup posizionando il puntatore del mouse sopra il testo.
Traduzione
Inglese

Cenni preliminari sull'utilizzo del layout automatico

 

Pubblicato: giugno 2016

In questo argomento vengono illustrate le linee guida per gli sviluppatori sulla modalità di scrittura di applicazioni Windows Presentation Foundation (WPF) con user interfaces (UIs) localizzabili. In passato, la localizzazione di un'Interfaccia utente era un processo che richiedeva molto tempo. Ogni lingua per la quale l'Interfaccia utente veniva adattata richiedeva modifiche pixel per pixel. Oggi, con la progettazione e gli standard di codifica corretti, è possibile creare le UIs in modo da limitare le attività di ridimensionamento e riposizionamento da parte dei localizzatori. L'approccio alla scrittura di applicazioni che è possibile ridimensionare e riposizionare con maggiore semplicità viene definito layout automatico e può essere ottenuto utilizzando la progettazione delle applicazioni WPF.

Di seguito sono elencate le diverse sezioni di questo argomento.

Grazie alle caratteristiche di potenza e flessibilità, il sistema di presentazione di WPF consente di creare il layout di elementi in un'applicazione che può essere modificata per soddisfare i requisiti di lingue diverse. Nell'elenco riportato di seguito sono indicati alcuni vantaggi del layout automatico.

  • L'Interfaccia utente viene visualizzata correttamente in qualsiasi lingua.

  • È possibile ridurre le esigenze di ulteriori modifiche alla posizione e alle dimensioni dei controlli dopo la traduzione del testo.

  • È possibile ridurre le esigenze di ulteriori modifiche alle dimensioni delle finestre.

  • Il rendering del layout dell'Interfaccia utente viene eseguito correttamente in qualsiasi lingua.

  • La localizzazione può essere ridotta a semplici attività che vanno poco oltre la traduzione delle stringhe.

Il layout automatico consente di modificare automaticamente le dimensioni di un controllo in un'applicazione. Ad esempio, un controllo può essere modificato per regolare la lunghezza di una stringa. Questa funzionalità consente ai localizzatori di tradurre la stringa, senza dover ridimensionare il controllo per adattare il testo tradotto. Nell'esempio riportato di seguito viene creato un pulsante con contenuto in lingua inglese.

Nell'esempio, l'unica operazione da compiere per creare un pulsante in lingua spagnola consiste nella modifica del testo. Di seguito è riportato un esempio:

Nell'immagine riportata di seguito viene illustrato l'output degli esempi di codice.

Lo stesso pulsante con testo in lingue diverse

Pulsante a ridimensionamento automatico

L'utilizzo dell'approccio di layout automatico richiede un insieme di standard e regole di codifica e di progettazione per creare un'Interfaccia utente completamente localizzabile. Le linee guida riportate di seguito agevolano la codifica del layout automatico.

Standard di codifica

Descrizione

Non utilizzare posizioni assolute.

Non impostare una dimensione fissa per una finestra.

Aggiunta di una proprietà FlowDirection.

  • Aggiungere una proprietà FlowDirection all'elemento radice dell'applicazione.

  • WPF offre un modo pratico per supportare layout orizzontali, bidirezionali e verticali. Nel framework della presentazione è possibile utilizzare la proprietà FlowDirection per definire il layout. I pattern di direzione di flusso sono:

    • LeftToRight (LrTb): layout orizzontale per l'alfabeto latino, asiatico e così via.

    • RightToLeft (RlTb): bidirezionale per arabo, ebraico e così via.

Utilizzare tipi di carattere compositi anziché tipi di carattere fisici.

  • Con i tipi di carattere compositi, non è necessario localizzare la proprietà FontFamily.

  • Gli sviluppatori possono utilizzare uno dei tipi di carattere riportati di seguito oppure crearne uno personalizzato.

    • Global User Interface

    • Global San Serif

    • Global Serif

Aggiungere xml:lang.

  • Aggiungere l'attributo xml:lang all'elemento radice dell'Interfaccia utente, ad esempio xml:lang="en-US" per un'applicazione in lingua inglese.

  • Poiché i tipi di carattere compositi utilizzano xml:lang per determinare il tipo di carattere da utilizzare, impostare questa proprietà per supportare scenari multilingue.

L'elemento Grid è utile per il layout automatico poiché consente a uno sviluppatore di posizionare gli elementi. Un controllo Grid è in grado di distribuire lo spazio disponibile tra gli elementi figlio utilizzando una disposizione per colonne e righe. È possibile estendere gli elementi dell'Interfaccia utente su più celle e inserire griglie all'interno di altre griglie. Le griglie sono utili poiché consentono la creazione e il posizionamento di un'Interfaccia utente complessa. Nell'esempio riportato di seguito viene illustrato l'utilizzo di una griglia per posizionare alcuni pulsanti e testo. Poiché l'altezza e la larghezza delle celle sono impostate su Auto, la cella che contiene il pulsante con un'immagine viene modificata in modo da adattarsi all'immagine.

Nell'immagine riportata di seguito viene illustrata la griglia creata dal codice precedente.

Esempio di Grid

Grid

Un elemento Grid è utile nelle applicazioni localizzabili per creare controlli che vengono modificati per adattarsi al contenuto. Tuttavia, in alcuni casi potrebbe essere opportuno che i controlli mantengano una determinata dimensione indipendentemente dal contenuto. Ad esempio, nei casi dei pulsanti "OK", "Annulla" e "Sfoglia", probabilmente non si desidera che le dimensioni di tali pulsanti si adattino al contenuto. In questo caso, la proprietà associata Grid.IsSharedSizeScope dell'elemento è utile per condividere le stesse dimensioni tra più elementi griglia. Nell'esempio riportato di seguito viene illustrato come condividere dati sulle dimensioni di colonne e righe tra più elementi Grid.

<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">  
    <Button Click="setTrue" Margin="0,0,10,10">Set IsSharedSizeScope="True"</Button>
    <Button Click="setFalse" Margin="0,0,10,10">Set IsSharedSizeScope="False"</Button>
</StackPanel> 

<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">

<Grid ShowGridLines="True" Margin="0,0,10,0">
  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup="FirstColumn"/>
    <ColumnDefinition SharedSizeGroup="SecondColumn"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
  </Grid.RowDefinitions>

    <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0" Width="200" Height="100"/>
    <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0" Width="150" Height="100"/>

    <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
    <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
</Grid>

<Grid ShowGridLines="True">
  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup="FirstColumn"/>
    <ColumnDefinition SharedSizeGroup="SecondColumn"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>        
    <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
  </Grid.RowDefinitions>

    <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0"/>

    <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
    <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
</Grid>

</StackPanel>

<TextBlock Margin="10" DockPanel.Dock="Top" Name="txt1"/>

Nota   Per il codice di esempio completo, vedere Procedura: condividere le proprietà di ridimensionamento tra griglie

Mostra: