Condividi tramite

Procedura: utilizzare una griglia per il layout automatico

  • Articolo

Aggiornamento: novembre 2007

Nell'esempio viene descritto l'utilizzo di una griglia nell'approccio basato sul layout automatico per la creazione di un'applicazione localizzabile.

La localizzazione di un'interfaccia utente può richiedere molto tempo. Spesso sono necessari il ridimensionamento e il riposizionamento degli elementi, oltre alla traduzione del testo. In passato ogni lingua per la quale un'interfaccia utente veniva adattata richiedeva delle modifiche. Ora, le funzionalità di Windows Presentation Foundation (WPF) consentono di progettare elementi che riducono l'esigenza di modifiche. L'approccio alla scrittura di applicazioni che è possibile ridimensionare e un riposizionare con maggiore semplicità viene definito auto layout.

Nell'esempio di linguaggio Extensible Application Markup Language (XAML) riportato di seguito viene mostrato l'utilizzo di una griglia per posizionare alcuni pulsanti e del testo. Notare che l'altezza e la larghezza delle celle sono impostate su Auto; di conseguenza la cella che contiene il pulsante con un'immagine viene modificata in modo da adattarsi all'immagine. Poiché l'elemento Grid può essere regolato in base al relativo contenuto, può rivelarsi utile se per la progettazione di applicazioni localizzabili si utilizza l'approccio basato sul layout automatico.

Esempio

Nel seguente esempio viene illustrata la modalità di utilizzo di una griglia.

<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 mostrato l'output dell'esempio di codice.

Griglia

Esempio di Grid

Nota

Per l'esempio di codice completo dal quale è stato estratto l'esempio precedente, vedere Esempio di griglia per applicazioni localizzabili.

Vedere anche

Attività

Procedura: utilizzare un layout automatico per creare un pulsante

Concetti

Cenni preliminari sull'utilizzo del layout automatico