Condividi tramite

Cenni preliminari sull'utilizzo del layout automatico

  • Articolo

Aggiornamento: novembre 2007

In questo argomento vengono illustrate le linee guida per gli sviluppatori sulla modalità di scrittura di applicazioni Windows Presentation Foundation (WPF) con interfacce utente 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 interfacce utente 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.

  • Vantaggi dell'utilizzo del layout automatico

  • Layout automatico e controlli

  • Layout automatico e standard di codifica

  • Layout automatico e griglie

  • Layout automatico e griglie tramite la proprietà IsSharedSizeScope

  • Argomenti correlati

Vantaggi dell'utilizzo del layout automatico

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.

Layout automatico e controlli

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.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonLoc.Pane1"
    Name="myWindow"
    SizeToContent="WidthAndHeight"
    >

<DockPanel> 
    <Button FontSize="28" Height="50">My name is Hope.</Button>
</DockPanel>
</Window>

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

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonLoc.Pane1"
    Name="myWindow"
    SizeToContent="WidthAndHeight"
    >

 <DockPanel> 
    <Button FontSize="28" Height="50">Me llamo Esperanza.</Button>
  </DockPanel>
</Window>

Nella figura riportata di seguito viene illustrato l'output degli esempi di codice.

Pulsante a ridimensionamento automatico

Lo stesso pulsante con testo in lingue diverse

Nota

Per l'esempio di codice completo da cui sono stati estratti gli esempi precedenti, vedere Esempio di layout automatico per applicazioni localizzabili.

Layout automatico e standard di codifica

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.

  • Utilizzare SizeToContent.

  • Di seguito è riportato un esempio:

<StackPanel
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="GridLoc.Pane1"
>

Aggiungere 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 la proprietà XmlLang 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.

Layout automatico e griglie

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 posizionati in colonne e righe e di posizionare gli elementi dell'interfaccia utente in ciascuna cella. È 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.

<Grid Name="grid" ShowGridLines ="false">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="0" FontSize="24">Grid
</TextBlock>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="1" FontSize="12"  
    Grid.ColumnSpan="2">The following buttons and text are positioned using a Grid.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="2" Background="Pink" 
    BorderBrush="Black" BorderThickness="10">Button 1
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="2" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the background 
   color.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="3" Foreground="Red">
   Button 2
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="3" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the foreground 
   color.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="4">
   <Image Source="data\flower.jpg"></Image>
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="4" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Adds an image as 
   the button's content.
</TextBlock>
</Grid>

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

Griglia

Esempio di Grid

Nota

Per l'esempio di codice completo, vedere Esempio di griglia per applicazioni localizzabili.

Layout automatico e griglie tramite la proprietà IsSharedSizeScope

Le griglie sono utili 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 IsSharedSizeScope dell'elemento Grid è 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

Vedere anche

Attività

Procedura: utilizzare un layout automatico per creare un pulsante

Procedura: utilizzare una griglia per il layout automatico

Concetti

Globalizzazione per Windows Presentation Foundation