Idioma: HTML | XAML

Guia de início rápido: definindo layouts (aplicativos do Tempo de Execução do Windows em C#/VB/C++ e XAML)

Applies to Windows and Windows Phone

Ao criar um aplicativo do Tempo de Execução do Windows usando C++, C# ou Visual Basic, você tem disponível um sistema de layout flexível que o ajuda a acomodar vários dispositivos e estados de aplicativos. Com um design flexível, você pode melhorar a aparência do seu aplicativo em telas com diferentes tamanhos, resoluções, densidades de pixel e orientações. Descrevemos como projetar uma interface de usuário que se ajuste automaticamente a tamanhos diferentes.

Mapa: como este tópico está relacionado aos outros? Veja:

Pré-requisitos

Este tópico presume que você é capaz de criar um aplicativo básico do Tempo de Execução do Windows em C++, C# ou Visual Basic. Para saber como criar o seu primeiro aplicativo do Tempo de Execução do Windows, veja Criando o seu primeiro aplicativo da Windows Store com C# ou Visual Basic.

Diretrizes da interface do usuário (melhores práticas)

Apesar de este tópico introduzir alguns layouts básicos, há inúmeras diretrizes da interface do usuário que você deve ter em mente:

Visão geral de layout

Layout é o processo de dimensionamento e posicionamento de objetos na sua interface de usuário. Para posicionar objetos visuais, você deve colocá-los em um Panel ou em outro objeto de contêiner. A estrutura XAML fornece diversas classes Panel, como Canvas, StackPanel e Grid, que servem como contêineres e que permitem posicionar e organizar os elementos da interface do usuário neles.

O sistema de layout XAML dá suporte ao layout fixo e ao layout dinâmico. Em um layout fixo, os elementos são dimensionados e posicionados usando dimensões explícitas. Por exemplo, você pode usar um painel Canvas para posicionamento fixo. E você pode definir um tamanho fixo em um elemento, independentemente de qual painel de layout ele contenha. Em um layout dinâmico, a interface do usuário automaticamente dimensiona para proporções (no caso de linhas e colunas de Grade) ou para o conteúdo de painéis e controles ou para várias resoluções de tela. Para um layout dinâmico, use, por exemplo, um StackPanel, Grid ou VariableSizedWrapGrid.

Layout fixo

Em um layout fixo, você organiza os elementos filhos em um painel de layout especificando as localizações exatas deles relativas ao elemento pai. O posicionamento fixo não necessariamente considera que o tamanho da tela ou do aplicativo será diferente em dispositivos distintos. Se o aplicativo exigir posicionamento fixo dos elementos da interface do usuário enquanto também ajusta o tamanho da janela do aplicativo, você poderá criar páginas diferentes para resoluções de tela diferentes ou usar dimensionamento como alternativa.

Todos os painéis na estrutura XAML têm suporte do posicionamento fixo, mas Canvas é um exemplo de um painel que tem suporte apenas do posicionamento fixo. Para posicionar um elemento filho em um Canvas, você define as propriedades anexadas Canvas.Left e Canvas.Top no elemento filho. Quando você usa o designer XAML no Microsoft Visual Studio, essas propriedades são atualizadas ao arrastar o elemento filho dentro de Canvas na superfície de projeto.

Layout dinâmico

Em um layout dinâmico, a interface do usuário se ajusta para várias resoluções de tela e tamanhos de janela do aplicativo. Organize os elementos filhos especificando como devem ser organizados nas relações entre si e como devem ser posicionados em relação ao seu conteúdo e/ou ao seu pai. Por exemplo, você pode organizar os controles de interface do usuário em um painel e especificar se devem ser ajustados horizontalmente. Para usar o dimensionamento automático ou proporcional, você deve atribuir valores às propriedades Height e Width. A seguir são apresentadas as configurações recomendadas para um layout dinâmico:

  • Defina Height e Width dos elementos da interface do usuário como Auto. Quando esses valores forem usados para elementos de interface do usuário no layout Grid, o painel Grid preencherá a célula que o contém. O dimensionamento Auto é permitido para elementos de interface do usuário em geral e para os layouts Grid e StackPanel.
  • Para elementos de interface do usuário que contêm texto (elementos de texto), deixe as propriedades Height e Width não definidas e defina as propriedades MinWidth ou MinHeight. Isso impede que o texto diminua para um tamanho ilegível porque o contêiner do layout o corta.
  • Para definir valores proporcionais para os elementos RowDefinition e ColumnDefinition que definem a estrutura da célula de um layout Grid, use os valores relativos Height e Width. Por exemplo, para especificar se uma coluna é cinco vezes mais larga do que a segunda coluna em um layout de 2 colunas, use "*" e "5*" para as propriedades Width nos elementos ColumnDefinition.

Dimensionamento automático e estrela

O dimensionamento automático é usado para permitir que os controles ajustem seu conteúdo, mesmo se o conteúdo mudar de tamanho. O dimensionamento estrela é usado para distribuir o espaço disponível entre as linhas e colunas de uma grade por meio de proporções ponderadas. Em XAML, os valores estrela são expressos como * (ou n* para dimensionamento de estrela ponderado). Por exemplo, se você tivesse uma grade com quatro colunas, poderia definir as larguras das colunas com os valores mostrados na tabela a seguir:

Coluna_1AutoA coluna será dimensionada para ajustar seu conteúdo.
Coluna_2*Depois que as colunas Auto forem calculadas, a coluna obterá parte da largura remanescente. Column_2 terá metade da largura de Column_4.
Coluna_3AutoA coluna será dimensionada para ajustar seu conteúdo.
Coluna_42*Depois que as colunas Auto forem calculadas, a coluna obterá parte da largura remanescente. Column_4 terá o dobro da largura de Column_2.

 

Controles do painel

Os painéis de layout internos no XAML incluem o painel Canvas para layout fixo, além de vários outros painéis para várias técnicas de layout dinâmico.

Canvas

O painel Canvas posiciona seus elementos filho usando pontos de coordenadas fixas. Especifique os pontos nos elementos filho individuais definindo as propriedades anexadas Canvas.Left e Canvas.Top em cada elemento. Durante o layout, o objeto Canvas pai usa sua lógica de classe para ler esses valores de propriedades anexadas de seus filhos e usa esses valores durante o cálculo do layout Arrange.


<Canvas Background="Black">
  <Rectangle Canvas.Left="200" Canvas.Top="100"
    Fill="Red" Width="350" Height="350" />
</Canvas>

O XAML anterior produz saída que é semelhante à ilustração seguinte:

exemplo de layout

Com o posicionamento fixo, é possível criar sobreposições de objetos, em que um objeto será desenhado sobre outro objeto. Para possibilitar o fácil ajuste da ordem de desenho dos filhos e também permitir a mudança da ordem de desenho durante o tempo de execução, Canvas também dá suporte a uma propriedade anexada Canvas.ZIndex que você pode definir em cada um dos elementos filho. O maior valor de Canvas.ZIndex é desenhado por último e por isso é desenhado sobre quaisquer outros elementos que compartilham o mesmo espaço ou sobreposições de qualquer maneira. Para saber mais, veja Canvas.ZIndex. Observe que o valor alfa (transparência) é respeitado, por isso mesmo se os elementos ficarem sobrepostos, o conteúdo mostrado em áreas sobrepostas poderá ser mesclado se o superior tiver um valor alfa que não seja máximo.

Use o painel Canvas com cautela. Apesar de ser conveniente poder controlar com precisão as posições dos elementos da interface do usuário para alguns cenários, um painel de layout com posição fixa faz com que a área da interface do usuário seja menos adaptável a mudanças gerais no tamanho das janelas do aplicativo. O redimensionamento de janelas do aplicativo pode ser proveniente de mudanças na orientação do dispositivo, janelas de aplicativo dividido, mudança de monitores e inúmeros outros cenários dos usuários.

StackPanel

StackPanel é um painel de layout simples que organiza seus elementos-filho em uma única linha que pode ser orientada horizontal ou verticalmente. Você pode usar a propriedade Orientation para especificar a direção dos elementos filho. O valor padrão de Orientation é Vertical. Os controles StackPanel normalmente são usados em cenários em que você quer organizar uma pequena subseção da interface do usuário em sua página.

O XAML a seguir mostra como criar um StackPanel vertical dos itens.


<StackPanel Margin="20">
  <Rectangle Fill="Red" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Blue" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Green" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Purple" Width="100" Height="100" Margin="10" />
</StackPanel>

O XAML anterior produz saída que é semelhante à ilustração seguinte.

exemplo de layout

Painéis aninhados que usam mais de um StackPanel é uma técnica comum em layout. Por exemplo, você pode criar uma barra lateral e uma área de conteúdo principal com StackPanel horizontal e empilhar itens no conteúdo principal com StackPanel vertical. Observe que, se você não aninhar os painéis, as propriedades anexadas nos elementos de interface do usuário que especificam características de layout a um pai serão interpretadas somente pelo painel pai mais imediato.

Grade

O painel Grid dá suporte à organização de controles em layouts com várias linhas e várias colunas. Você pode especificar as definições de linha e de coluna do painel de um Grid usando as propriedades RowDefinitions e ColumnDefinitions que são declaradas dentro do elemento Grid (usa a sintaxe de elementos de propriedades em XAML). Você pode posicionar os objetos em células específicas do Grid usando as propriedades anexadas Grid.Column e Grid.Row. Você pode distribuir espaço em uma coluna ou linha usando dimensionamento Auto ou estrela. O conteúdo pode se espalhar em várias linhas e colunas usando as propriedades anexadas Grid.RowSpan e Grid.ColumnSpan.

O exemplo de XAML a seguir mostra como criar um Grid com três linhas e duas colunas. A altura da primeira e terceira linhas é grande o suficiente para conter o texto. A altura da segunda linha usa o resto da altura disponível. A largura das colunas é dividida igualmente dentro da largura do contêiner disponível.


<Grid Margin="12,0,12,0">

  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition />
    <RowDefinition Height="auto" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>

  <TextBox Text="1st row 1st column" FontSize="60" Grid.Column="0" Grid.Row="0" />
  <TextBox Text="3rd row 1st column" FontSize="60" Grid.Column="0" Grid.Row="2" />

  <Button Content="1st row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="0" />
  <Button Content="3rd row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="2" />

</Grid>

Isso produz saída que é semelhante à ilustração a seguir.

exemplo de layout

VariableSizedWrapGrid

VariableSizedWrapGrid fornece um painel de layout em estilo de grade em que cada bloco ou célula pode ter o tamanho variável com base no conteúdo. Em um VariableSizedWrapGrid, os elementos são organizados em linhas ou colunas que se ajustam automaticamente em uma nova linha ou coluna quando o valor MaximumRowsOrColumns é atingido. A propriedade Orientation especifica se a grade adiciona seus itens em linhas ou colunas antes do ajuste. As dimensões das células são especificadas com ItemHeight e ItemWidth (valores em pixels). Os elementos filho podem usar as propriedades anexadas VariableSizedWrapGrid.ColumnSpan e VariableSizedWrapGrid.RowSpan (valores como contagens de células) para ajustar quantas células variáveis o elemento filho deve usar (o padrão é 1). Para saber mais, veja VariableSizedWrapGrid.

Painéis para ItemsControl

WrapGrid e VirtualizingStackPanel são painéis especiais que só podem ser usados para exibir itens em um ItemsControl. Para saber mais, veja WrapGrid. ItemsStackPanel e ItemsWrapGrid são painéis semelhantes com restrições de uso (um ItemsControl com vários itens).

Observações de migração:  o WPF (Windows Presentation Foundation) tem uma classe VirtualizingStackPanel que pode ser usada como painel geral sem restrições de local onde pode existir. Se você estiver migrando o XAML que usou o VirtualizingStackPanel, precisará mudar o controle de dados dos itens para que seja ListView, assim obterá a virtualização de itens em sua lista devido ao VirtualizingStackPanel contido no modelo padrão.

Tópicos relacionados

Canvas
StackPanel
Grid
VariableSizedWrapGrid
Mapa para criar aplicativos usando C#, C++ ou VB
Guia de início rápido: adicionando controles de layout
Adicionando controles ListView, SemanticZoom e outros controles de dados

 

 

Mostrar:
© 2014 Microsoft