Esporta (0) Stampa
Espandi tutto
Il presente articolo è stato tradotto automaticamente. Passare il puntatore sulle frasi nell'articolo per visualizzare il testo originale. Ulteriori informazioni.
Traduzione
Originale

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 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.

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.


<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, l'unica operazione da compiere per creare un pulsante in lingua spagnola consiste nella modifica del testo. Di seguito è riportato un 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>


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

Pulsante a ridimensionamento automatico

Lo stesso pulsante con testo in lingue diverse

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.



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


<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

Esempio di 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

Aggiunte alla community

AGGIUNGI
Microsoft sta conducendo un sondaggio in linea per comprendere l'opinione degli utenti in merito al sito Web di MSDN. Se si sceglie di partecipare, quando si lascia il sito Web di MSDN verrà visualizzato il sondaggio in linea.

Si desidera partecipare?
Mostra:
© 2014 Microsoft