Cenni preliminari sull'utilizzo del layout automatico

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'UI era un processo che richiedeva molto tempo. Ogni lingua per la quale l'UI 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.

• 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'UI 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'UI 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. Di seguito è riportato un 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>

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

Pulsante a ridimensionamento automatico

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'UI completamente localizzabile. Le linee guida riportate di seguito agevolano la codifica del layout automatico.

Standard di codifica	Descrizione
Non utilizzare posizioni assolute.	Non utilizzare Canvas poiché comporta il posizionamento assoluto degli elementi. Utilizzare DockPanel, StackPanel e Grid per posizionare i controlli. Per informazioni sui diversi tipi di pannelli, vedere Cenni preliminari sugli elementi Panel.
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" >
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'UI, 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 utilizzando una disposizione per colonne e righe. È possibile estendere gli elementi dell'UI su più celle e inserire griglie all'interno di altre griglie. Le griglie sono utili poiché consentono la creazione e il posizionamento di un'UI 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.

Grid

Layout automatico e griglie basate sull'utilizzo della proprietà IsSharedSizeScope

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

Vedere anche

Attività

Procedura: utilizzare un layout automatico per creare un pulsante

Procedura: utilizzare una griglia per il layout automatico

Concetti

Globalizzazione per WPF