Visão Geral do Uso de Layout Automático

Artigo
08/25/2010

Este tópico apresenta orientações para desenvolvedores sobre como escrever aplicações Windows Presentation Foundation (WPF) com interfaces de usuário (UIs) localizáveis. No passado, a localização de um UI era um processo que consumia muito tempo. Cada linguagem para a qual a UI fosse adaptada requeria um ajuste pixel a pixel. Hoje em dia com o design correto e direita padrões de codificação, UIs pode ser construído para que os localizadores tenham menor redimensionamento e reposicionamento a fazer. A abordagem para escrever aplicativos que podem ser mais com com facilidade redimensionados e reposicionados é chamada layout automático e pode ser alcançado usando WPF design de aplicativo.

Este tópico contém as seguintes seções.

Vantagens de Utilizar Layout Automático
Layout Automático e Controles
Layout Automático e Padrões de Código
Layout Automático e Grades
Layout Automático e Grades Utilizando a Propriedade IsSharedSizeScope
Tópicos relacionados

Vantagens de Utilizar Layout Automático

Porque o sistema de apresentação do WPF é poderoso e flexível, ele fornece a capacidade de dispor os elementos em uma aplicação que possam ser ajustados para satisfazer os requisitos de diferentes idiomas. A lista a seguir aponta algumas vantagens do layout automático.

UI exibe bem em qualquer idioma.
Reduz a necessidade de reajustar a posição e tamanho dos controles após o texto ser traduzido.
Reduz a necessidade de reajustar o tamanho da janela.
O layout da UI renderiza adequadamente em qualquer idioma.
A localização pode ser reduzida a ponto de não ser muito mais do que tradução de string.

Layout Automático e Controles

Layout automático permite que uma aplicação ajuste o tamanho de um controle automaticamente. Por exemplo, um controle pode mudar para acomodar o tamanho de um string. Essa capacidade permite a localizadores traduzirem o string; eles não mais precisam redimensionar o controle para que o texto traduzido caiba nele. O exemplo a seguir cria um botão com conteúdo em inglês.

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

No exemplo tudo o que você tem que fazer para fazer um botão em espanhol é mudar o texto. Por exemplo,

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

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

Botão Autorredimensionável

O mesmo botão com texto em diferentes idiomas

Observação:
Para o exemplo completo do qual foram extraídos exemplos anteriores, consulte: Layout automático para traduzível exemplo de aplicativos.

Layout Automático e Padrões de Código

Utilizar a abordagem de layout automático requer um conjunto de padrões e regras de codificação e design para produzir uma UI completamente localizável. As seguintes orientações ajudaram sua codificação de layout automático.

Padrões de Código	Descrição
Não utilize posições absolutas.	Não utilize Canvas porque posiciona os elementos de forma absoluta. Utilize DockPanel, StackPanel e Grid para posicionar controles. Para uma discussão sobre diversos tipos de painéis, consulte Panels Overview.
Não estabeleça um tamanho fixo para uma janela.	Utilize SizeToContent. Por exemplo: `<StackPanel xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Class="GridLoc.Pane1" >`
Acrescente um FlowDirection.	Acrescente um FlowDirection ao elemento raiz da sua aplicação. O WPF fornece uma forma conveniente de suportar layouts horizontais, bidirecionais e verticais. No framework de apresentação, a propriedade FlowDirection pode ser utilizada para definir o layout. Os padrões de direção de fluxo são: LeftToRight (LrTb) — layout horizontal para idiomas Latinos, Ásia Oriental, e assim por diante. RightToLeft (RlTb) — bidirecional para Árabe, Hebraico e assim por diante.
Use fontes compostas em vez de fontes físicas.	Com fontes compostas, a propriedade FontFamily não precisa ser localizada. Os desenvolvedores podem utilizar uma das seguintes fontes ou criar sua própria. Interface de Usuário Global Global San Serif Global Serif
Acrescente xml:lang.	Acrescente a propriedade XmlLang ao elemento raiz da sua UI, tal como xml:lang="en-US" para uma aplicação em inglês. Porque fontes compostas utilizam xml:lang para determinar que fonte utilizar, defina essa propriedade para suportar cenários multi-idioma.

Layout Automático e Grades

O elemento Grid é útil para layout automático porque ele permite que um desenvolvedor posicione elementos. Um controle Grid é capaz de distribuir o espaço disponível entre seus elementos filhos que são organizados em colunas e linhas e posicionar elementos da UI em cada célula. Os elementos da UI podem ultrapassar múltiplas células, e é possível que haja grades dentro de grades. Grades são úteis porque permitem criar e posicionar UI complexa. O exemplo a seguir demonstra como utilizar uma grade para posicionar alguns botões e texto. Observe que a altura e a largura das células são definidas como Auto; portanto, a célula que contém o botão com uma imagem ajusta para encaixar a imagem.

<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 grade produzida pelo código anterior.

Grid

Exemplo de grade

Observação:
Para a amostra de código completo, consulte Grade de exemplo de aplicativos traduzível.

Layout Automático e Grades Utilizando a Propriedade IsSharedSizeScope

Grades são úteis em aplicações localizáveis para criar controles que se ajustam para encaixar conteúdo. Entretanto, às vezes você quer que controles mantenham um tamanho particular em qualquer contexto. Por exemplo, se você tem botões "OK", "Cancel" e "Browse" você provavelmente não quer que os botões sejam redimensionados conforme o conteúdo. Nesse caso a propriedade IsSharedSizeScope do elemento Grid é útil para compartilhar o mesmo tamanho entre múltiplos elementos da grade. O exemplo a seguir demonstra como compartilhar dados de tamanho de colunas e linhas entre múltiplos elementos 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"/>

Observação Para o exemplo de código completo, veja Como: Compartilhar Propriedades de Dimensionamento Entre Grades.