Condividi tramite

Panoramica dell'uso del layout automatico

Questo argomento presenta linee guida per gli sviluppatori su come scrivere applicazioni Windows Presentation Foundation (WPF) con interfacce utente localizzabili. In passato, la localizzazione di un'interfaccia utente richiedeva molto tempo. Ogni lingua per cui l'interfaccia utente è stata adattata richiedeva una regolazione pixel per pixel. Oggi con il design corretto e gli standard di codifica corretti, è possibile costruire interfacce utente in modo che i localizzatori abbiano meno ridimensionamento e riposizionamento. L'approccio alla scrittura di applicazioni che possono essere ridimensionate e riposizionate più facilmente è detto layout automatico e può essere ottenuto usando la progettazione di applicazioni WPF.

Vantaggi dell'uso del layout automatico

Poiché il sistema di presentazione WPF è potente e flessibile, offre la possibilità di layout degli elementi in un'applicazione che può essere adattata in base ai requisiti di linguaggi diversi. L'elenco seguente evidenzia alcuni dei vantaggi del layout automatico.

  • L'interfaccia utente viene visualizzata bene in qualsiasi lingua.

  • Riduce la necessità di adattare la posizione e le dimensioni dei controlli dopo la traduzione del testo.

  • Riduce la necessità di adattare le dimensioni della finestra.

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

  • La localizzazione può essere ridotta al punto in cui è poco più della traduzione di stringhe.

Layout e controlli automatici

Il layout automatico consente a un'applicazione di regolare automaticamente le dimensioni di un controllo. Ad esempio, un controllo può cambiare per adattarsi alla lunghezza di una stringa. Questa funzionalità consente ai localizzatori di tradurre la stringa; non è più necessario ridimensionare il controllo in base al testo tradotto. Nell'esempio seguente viene creato un pulsante con contenuto in lingua inglese.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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, tutto quello che devi fare per fare un pulsante spagnolo è modificare il testo. Ad esempio:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>

L'immagine seguente mostra l'output degli esempi di codice:

Lo stesso pulsante con testo in lingue diverse

Standard di layout e codifica automatici

L'uso dell'approccio di layout automatico richiede un set di standard di codifica e progettazione e regole per produrre un'interfaccia utente completamente localizzabile. Le linee guida seguenti aiuteranno nel creare codice di layout in modo automatico.

Non usare posizioni assolute

Per una discussione sui vari tipi di pannelli, consultare la Panoramica dei pannelli in .

Non impostare una dimensione fissa per una finestra

  • Usa Window.SizeToContent. Per esempio:

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

Aggiungere un FlowDirection

  • Aggiungere un FlowDirection all'elemento radice dell'applicazione.

    WPF offre un modo pratico per supportare layout orizzontali, bidirezionali e verticali. Nel framework di presentazione la proprietà FlowDirection può essere usata per definire il layout. I modelli di direzione del flusso sono:

Usare tipi di carattere compositi anziché tipi di carattere fisici

  • Con i tipi di carattere compositi, la proprietà FontFamily non deve essere localizzata.

  • Gli sviluppatori possono usare uno dei tipi di carattere seguenti o crearne uno personalizzato.

    • Interfaccia utente globale
    • San Serif globale
    • Serif globale

Aggiungi xml:lang

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

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

Layout automatico e griglie

L'elemento Grid è utile per il layout automatico perché consente a uno sviluppatore di posizionare gli elementi. Un controllo Grid è in grado di distribuire lo spazio disponibile tra i suoi elementi figlio, utilizzando una disposizione a colonne e righe. Gli elementi dell'interfaccia utente possono estendersi su più celle ed è possibile avere griglie all'interno delle griglie. Le griglie sono utili perché consentono di creare e posizionare un'interfaccia utente complessa. Nell'esempio seguente viene illustrato l'uso di una griglia per posizionare alcuni pulsanti e testo. Si noti che l'altezza e la larghezza delle celle sono impostate su Auto; pertanto, la cella che contiene il pulsante con un'immagine si adatta 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>

L'immagine seguente mostra la griglia prodotta dal codice precedente.

Esempio di griglia Griglia

Layout automatico e griglie tramite la proprietà IsSharedSizeScope

Un elemento Grid è utile nelle applicazioni localizzabili per creare controlli che si adattano al contenuto. Tuttavia, a volte si desidera che i controlli mantengano una determinata dimensione indipendentemente dal contenuto. Ad esempio, se hai i pulsanti "OK", "Annulla" e "Sfoglia" probabilmente non vuoi che i pulsanti siano adatti al contenuto. In questo caso, la proprietà associata Grid.IsSharedSizeScope è utile per condividere lo stesso dimensionamento tra più elementi della griglia. Nell'esempio seguente viene illustrato come condividere dati di ridimensionamento 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"/>

Annotazioni

Per l'esempio di codice completo, fare riferimento a Condivisione delle proprietà di dimensionamento tra griglie.

Vedere anche

  • Last updated on