Como: Usar uma Grade para Conseguir Automático

Este exemplo descreve como usar uma grade na abordagem de layout automático para criar um aplicativo localizável.

Localização de uma interface do usuário (UI) pode ser um processo demorado. Geralmente localizadores precisam redimensionar e reposicionar elementos além de traduzir o texto. Antigamente, cada idioma para o qual uma UI era adaptada pedia um reajuste. Agora, com os recursos de Windows Presentation Foundation (WPF), você pode criar elementos que reduzem a necessidade de ajuste. A abordagem para escrever aplicativos que podem ser mais facilmente redimensionados e reposicionados é chamada auto layout.

O exemplo de Extensible Application Markup Language (XAML) a seguir demonstra o uso de uma grade para posicionar alguns botões e texto. Observe que a altura e largura das células são definidas como Auto; portanto a célula que contém o botão com uma imagem ajusta-se para que a imagem caiba. Como o elemento Grid pode ajustar a seu conteúdo ele pode ser útil quando seguirmos a abordagem de layout automático para projetar aplicativos que podem ser localizados.

Exemplo

O exemplo a seguir mostra como usar uma grade.

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

O gráfico a seguir mostra a saída do código de exemplo.

Grid

Observação:
Para obter o código completo exemplo de que o exemplo anterior foi extraído, consulte: Grade de exemplo de aplicativos traduzível.

Consulte também

Tarefas

Como: Usar Layout automático para criar um botão

Conceitos

Visão Geral do Uso de Layout Automático