Condividi tramite

Procedura: Usare una griglia per il layout automatico

  • Articolo

Questo esempio descrive come usare una griglia nell'approccio di layout automatico per la creazione di un'applicazione localizzabile.

La localizzazione di un'interfaccia utente può essere un processo dispendioso in termini di tempo. Spesso i localizzatori devono ridimensionare e riposizionare gli elementi oltre a tradurre il testo. In passato, ogni interfaccia utente adattata per una lingua richiedeva regolazione. Ora con le funzionalità di Windows Presentation Foundation (WPF) è possibile progettare elementi che riducono la necessità di regolazione. L'approccio alla scrittura di applicazioni che possono essere ridimensionate e riposizionate più facilmente viene chiamato auto layout.

L'esempio xaml (Extensible Application Markup Language) seguente illustra 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. Poiché l'elemento Grid può adattarsi al relativo contenuto, può essere utile quando si usa l'approccio di layout automatico alla progettazione di applicazioni che possono essere localizzate.

Esempio

Nell'esempio seguente viene illustrato come usare 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>

L'immagine seguente mostra l'output dell'esempio di codice.

esempio griglia
Griglia

Vedere anche