Clique aqui para instalar o Silverlight*
BrasilAlterar|Todos os sites da Microsoft
MSDN
|Developer Centers|Biblioteca|Downloads|Assinaturas MSDN
Pesquisa rápida


Posicionamento de objetos em WPF

Bruno Sonnino e Roberto Sonnino

Publicado em: 27 de outubro de 2006
*
Nesta página
IntroduçãoIntrodução
Propriedades de layoutPropriedades de layout
Componentes de layoutComponentes de layout
ConclusõesConclusões

Introdução

No último artigo, trouxemos uma breve introdução ao WPF, mostrando suas características básicas e criando um pequeno programa que pode ser executado tanto como uma aplicação desktop como uma aplicação web.

A partir de agora iremos aprofundar um pouco os conceitos apresentados, mostrando as características do WPF e como aproveitar o máximo desta plataforma. Neste artigo, iremos mostrar como pode ser feito o layout da aplicação, apresentando os diversos componentes de layout e como eles se comportam quanto a posicionamento quando a aplicação é redimensionada.

Propriedades de layout

O WPF traz uma característica que o diferencia das demais aplicações desktop: o posicionamento dinâmico dos objetos. Até o aparecimento do WPF, o posicionamento de componentes na janela é estático: uma vez que o componente é colocado na janela, ele permanece no mesmo lugar, a menos que haja algum recurso do tipo “anchor”, onde o componente é ancorado a algum lugar.

O WPF tem um sistema que permite que o layout dos componentes seja flexível, isto é, quando a janela é redimensionada, os componentes ajustam-se em novas posições, conforme o layout selecionado. Isto é semelhante a uma página web, que se ajusta quando a janela do browser é redimensionada.

Antes de introduzirmos os componentes de layout, é interessante definirmos três propriedades que irão interferir no posicionamento dos elemento na janela: Margin , Padding e Alignment .

Os valores de Margin e Padding são dados em pixels, porém estes são independentes do dispositivo, ou seja, seu tamanho varia com o numero de pixels por polegada (DPI) do dispositivo.

Margin representa a margem entre o elemento e o que é externo a ele. A Figura 1 exemplifica este conceito:

Figura 1 – Efeito da margem nos elementos

Padding representa a distância entre a borda do elemento e seu interior. A Figura 2 mostra este conceito:

Figura 2 – Efeito do Padding nos elementos

O Alignment indica o posicionamento do elemento em relação ao seu superior na árvore (parent). Esta propriedade se subdivide em duas: o HorizontalAlignment e o VerticalAlignment . O HorizontalAlignment pode assumir quatro valores: Left (alinhado à esquerda) , Right (alinhado à direita) , Center (centralizado horizontalmente) e Stretch (esticado para preencher o espaço horizontal disponível). Analogamente, o VerticalAlignment também tem quatro valores possíveis: Top (alinhado em cima) , Bottom (alinhado embaixo) , Center (centralizado verticalmente) e Stretch (esticado para preencher o espaço vertical disponível). A Figura 3 apresenta este conceito:

Figura 3 – Efeito do alinhamento nos elementos

Para exemplificar estes conceitos, iremos usar o EID. Inicialize o EID e, na paleta Library , selecione o objeto Button , colocando-o na janela. Na paleta Properties , selecione a propriedade Margin , colocando ali o valor 0 . O botão é posicionado no canto superior esquerdo da janela. Mude este valor para 10 . Verifique que o botão se distancia da borda da janela. Mude um pouco mais esta distância, verificando as alterações.

Tanto a propriedade Margin como a propriedade Padding podem receber de um a quatro números, separados por “;”. Caso apenas um número seja colocado, ele irá ser usado nas 4 direções (direita, cima, esquerda, baixo). Caso se coloquem dois números, o primeiro irá ser usado na horizontal (direita e esquerda) e o segundo, na vertical (cima e baixo). Colocando-se os quatro números, podemos especificar valores diferentes nas quatro posições. Não se pode indicar apenas três números.

Para mostrar o significado da propriedade Padding , aumente um pouco o tamanho do botão e altere a propriedade HorizontalContentAlignment para Left e VerticalContentAlignment para Top . O texto do botão movimenta-se para a posição superior esquerda. Altere a propriedade Padding , da mesma maneira que alteramos a propriedade Margin . Veja que o texto posiciona-se no botão de acordo com o que indicamos nesta propriedade.

Finalmente, altere as propriedades HorizontalAlignment e VerticalAlignment , observando o novo posicionamento do botão. Note que, para o alinhamento Stretch funcionar corretamente, as propriedades Width e Height devem ser configuradas para Auto .

Outra maneira mais fácil de configurar as propriedades de layout dos elementos é usar a paleta Layout . Para abrí-la, utilize a opção do menu View/Layout . A paleta aparece do lado direito. Esta paleta tem três abas:

Layout permite alterar o posicionamento do elemento em relação ao seu parent ou, para elementos de layout, seu tipo. Size possibilita alterar o tamanho (máximo, mínimo e padrão) do elemento Margin altera as quatro margens e configura os alinhamentos.

Figura 4 – Aba Size na paleta Layout

Componentes de layout

Quando criamos uma cena no Expression Interface Designer (EID) (cena é o nome que o EID dá às páginas da aplicação), o componente root padrão é uma Grid . Este é um componente semelhante a uma tabela, onde os elementos são dispostos em linhas e colunas. Ao colocarmos os elementos nas células de uma grid, seu alinhamento e posição são relativos à célula em que estão inseridos. À medida que a janela é redimensionada, este posicionamento se mantém, mesmo que o tamanho das células não se altere.

Para exemplificar isso, iremos criar uma tabela com duas colunas e 6 linhas, onde iremos colocar alguns labels com texto. Iremos fazer isso editando o código XAML diretamente, mostrando que, ao alterarmos o XAML, o designer se altera. Crie um novo projeto no EID e selecione a aba XAML Code no editor, inserindo o seguinte código:


<Grid 
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
	xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006" 
	mc:Ignorable="d" 
	Background="#FFFFFFFF" 
	x:Name="DocumentRoot" 
	x:Class="UntitledProject1.Scene1" 
	Width="640" Height="480"> 

	<Grid.ColumnDefinitions> 
		<ColumnDefinition/> 
		<ColumnDefinition/> 
	</Grid.ColumnDefinitions> 
	<Grid.RowDefinitions> 
		<RowDefinition/> 
		<RowDefinition/> 
		<RowDefinition/> 
		<RowDefinition/> 
		<RowDefinition/> 
		<RowDefinition/> 
	</Grid.RowDefinitions> 
</Grid> 

Cada linha <ColumnDefinition/> insere uma nova coluna em nossa grid e as linhas <RowDefinition/> inserem novas linhas. Ao selecionar a aba Design , vemos que o designer foi alterado, conforme mostra a Figura 5.

Figura 5 – Designer com Grid de duas colunas e seis linhas

Em seguida, iremos inserir os labels na grid, também editando o código XAML. Insira o seguinte código:


<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
	xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006" 
	mc:Ignorable="d" 
	Background="#FFFFFFFF" 
	x:Name="DocumentRoot" 
	x:Class="UntitledProject1.Scene1" 
	Width="640" Height="480"> 


	<Grid.ColumnDefinitions> 
		<ColumnDefinition/> 
		<ColumnDefinition/> 
	</Grid.ColumnDefinitions> 
	<Grid.RowDefinitions> 
		<RowDefinition/> 
		<RowDefinition/> 
		<RowDefinition/> 
		<RowDefinition/> 
		<RowDefinition/> 
		<RowDefinition/> 
	</Grid.RowDefinitions> 
	<Label x:Name="Label" Grid.Column="0" Grid.Row="0" Content="Linha 1"/> 
	<Label x:Name="Label1" Grid.Column="0" Grid.Row="1" Content="Linha 2 Coluna 1"/> 
	<Label x:Name="Label2" Grid.Column="1" Grid.Row="1" Content="Linha 2 Coluna 2"/> 
	<Label x:Name="Label3" Grid.Column="0" Grid.Row="2" Content="Linha 3 Coluna 1"/> 
	<Label x:Name="Label4" Grid.Column="1" Grid.Row="2" Content="Linha 3 Coluna 2"/> 
	<Label x:Name="Label5" Grid.Column="0" Grid.Row="3" Content="Linha 4 Coluna 1"/> 
	<Label x:Name="Label6" Grid.Column="1" Grid.Row="3" Content="Linha 4 Coluna 2"/> 
	<Label x:Name="Label7" Grid.Column="0" Grid.Row="4" Content="Linha 5 Coluna 1"/> 
	<Label x:Name="Label8" Grid.Column="1" Grid.Row="4" Content="Linha 5 Coluna 2"/> 
	<Label x:Name="Label9" Grid.Column="0" Grid.Row="5" Content="Linha 6 Coluna 1"/> 
	<Label x:Name="Label10" Grid.Column="1" Grid.Row="5" Content="Linha 6 Coluna 2"/> 
</Grid> 

Inserimos os labels nas células da grid. Agora, voltamos à aba Design para editar suas propriedades. Na paleta Timeline , selecione o label de nome Label e, na paleta Properties , altere a sua propriedade Grid.ColumnSpan para 2. Isso faz que o label ocupe as duas colunas, ao invés de só uma. Altere as propriedades HorizontalAlignment para Center e VerticalAlignment para Center , deixando o label centralizado. No Timeline , selecione o Label1 e Label2 usando a tecla Shift . Altere as propriedades HorizontalAlignment e VerticalAlignment, deixando-as como Center . Em seguida, selecione os labels restantes, alterando a propriedade VerticalAlignment para Center . Altere a propriedade Margin para 10;0;0;0 . Tecle F5 para executar o programa e veja que, ao alterar o tamanho da janela, os labels são reposicionados conforme o que indicamos em suas propriedades. Isso pode ser visualizado de maneira melhor se mostramos as linhas da grid quando o programa está sendo executado. Feche o programa em execução e, no Timeline , selecione o DocumentRoot , alterando sua propriedade ShowGridLines para True . Execute novamente o projeto. Você deve obter algo semelhante à Figura 6.

Figura 6 – Layout de Grid em execução

Até aqui, inserimos as linhas e colunas no código XAML. Podemos fazer isso também no designer do EID. Para isso, devemos usar a ferramenta de seleção (seta preta) na paleta Tools para selecionar a grid.

Na paleta Timeline , dê um clique duplo em DocumentRoot para tornar a grid ativa. Ao dar um clique simples no elemento, estamos apenas selecionando-o. Podemos então alterar suas propriedades, para deixá-lo como queremos. Ao dar um clique duplo, ele fica ativo e passa a ser o pai (parent) dos elementos que são colocados na tela, a partir deste momento.

Após escolher a ferramenta de seleção e ativar a grid, quando movemos o mouse sobre as barras que estão na lateral da grid, uma linha vermelha aparece, como na Figura 7.

Figura 7 – Linha de seleção para inserir novas linhas ou colunas no designer

Ao clicar o botão esquerdo do mouse, inserimos uma nova coluna na grid. Uma vez inserida, podemos movimentá-la colocando o mouse sobre o símbolo de triângulo e arrastar a linha, quando o cursor mudar para duas setas. Para excluir a coluna, basta dar um clique duplo no triângulo.

Quando executamos o programa, ao redimensionar a janela, as linhas e colunas redimensionam-se para manter o layout. Se não quisermos que uma coluna ou linha seja redimensionada (por exemplo, quando queremos manter o tamanho de uma coluna fixa, redimensionando as outras), basta clicar no cadeado. Quando o cadeado está fechado, o tamanho da linha ou coluna fica fixo, não sendo alterado quando o tamanho da janela é mudado.

Você também pode alterar numericamente as propriedades de layout de linhas ou colunas individuais da grid. Para isto, basta clicar numa área externa à linha ou coluna, ao lado do seu cadeado. A linha ou coluna ficará com fundo cinza-escuro, indicando a seleção, e então você pode alterar suas propriedades usando a paleta Layout .

Embora a grid seja um elemento de layout muito importante, ele não é o único disponível para aplicações WPF. O WPF tem outros elementos de layout, derivados da classe Panel , incluindo a Grid. No EID, crie uma nova cena usando a opção de menu File/New/Scene . Uma nova cena é criada, com uma grid como root. Selecione o DocumentRoot, vá para a paleta Layout e, na combobox de seleção, escolha StackPanel . Esta alteração feita no Layout muda o tipo do elemento selecionado de Grid para StackPanel . O StackPanel alinha os elementos na vertical ou horizontal, dependendo da orientação. Na paleta Library selecione um botão e insira-o na tela. Com ele selecionado, tecle Ctrl-C para copiá-lo. Depois, ative o StackPanel root com um clique duplo e cole o botão algumas vezes com Ctrl-V . Note que os novos botões são inseridos abaixo do anterior. Se quiséssemos um espaçamento entre os botões, poderíamos configurar as suas margens. Se desmarcarmos a checkbox Vertical Orientation , na paleta Layout, os botões são imediatamente reposicionados na horizontal.

Tecle F5 para executar o programa. Não há alterações no programa, a cena contendo a grid é mostrada. Isto se deve ao fato da cena principal do projeto ser Scene1 . Para que esta nova cena passe a ser a principal do projeto, devemos executar a opção de menu Project/Set Startup Scene e selecionar a cena em que estamos trabalhando. Você também pode fazer isso clicando com o mouse direito no nome da cena (arquivo .XAML) na paleta Projects e selecionando Startup Scene . Após fazer isso e executar nosso programa novamente, a tela com os botões é mostrada. Ao redimensionar a janela, vemos que não há reposicionamento dos botões: quando a janela é menor que o espaço ocupado pelos botões, eles são cortados e quando a janela é maior, uma área em branco ocupa a parte inferior da janela.

Finalize a execução do programa e selecione o StackPanel . Mude, na paleta Layout , para WrapPanel . Este elemento de layout é semelhante ao StackPanel , mas os elementos dentro dele são ajustados quando não há espaço suficiente para eles. Execute novamente o programa e veja que, redimensionando a janela, os botões alinham-se em duas ou mais colunas quando não há espaço vertical para todos eles.

Para mudar a orientação do WrapPanel devemos ir para a paleta Properties e alterar a propriedade Orientation para Horizontal . Desta maneira, os elementos arranjam-se em linhas.

Na paleta Layout , altere o tipo do WrapPanel para DockPanel . Aqui, os elementos são dispostos docados nas bordas do pai. Deixe apenas 5 botões na janela, selecionando o primeiro deles. Na janela Layout altere Dock Direction para Right . Selecione os três seguintes, deixando a direção para Top , Bottom e Left . Em seguida, selecione todos os botões na paleta TimeLine e, na paleta Properties , altere suas propriedades Width e Height para Auto . Você deve obter uma tela como a da Figura 8.

Figura 8 – DockPanel com 5 botões

Note que o último botão foi redimensionado para preencher a janela. Isto acontece quando a propriedade LastChildFill está configurada para True . Se ela estiver configurada para False isto não acontece.

Outro elemento de layout é o Canvas . Ele é semelhante ao que conhecemos em aplicações desktop, ou ao posicionamento absolute da web: o posicionamento dos elementos não é mais automático, os objetos ficam posicionados no local onde foram colocados. Neste caso, o redimensionamento da janela não muda a posição dos objetos. Para exemplificar isso, crie uma nova cena e, na paleta Layout , altere o tipo para Canvas . Altere a cena inicial do projeto para esta nova cena. Inclua alguns objetos nela e execute o programa. Ao redimensionar a janela, você pode notar que os elementos não mudam de posição, em relação ao Canvas. Você pode verificar as propriedades Canvas.Top e Canvas.Left dos objetos nas paletas Properties ou Layout.

Estes são alguns componentes de layout disponíveis no WPF. Podemos também combiná-los, criando layouts automáticos muito poderosos. Por exemplo, podemos usar uma grid como root e, em uma das células colocar um StackPanel , em outra, um DockPanel ou um WrapPanel . Desta maneira, os componentes em cada célula são rearranjados conforme as células da grid são redimensionadas. Além disso, todas as propriedades de Layout podem ser acessadas pelo código, tornando as possibilidades de layout ainda mais flexíveis.

Conclusões

Neste segundo arquivo, mostramos um pouco de layout no WPF, mostrando a flexibilidade com que os elementos podem ser posicionados na janela. No próximo artigo, exploraremos outra característica do WPF, que é a possibilidade de se alterar a aparência dos elementos, usando estilos e modelos (templates). Até lá.

Links Interessantes

Artigo do MSDN Library sobre Layout em WPF - http://windowssdk.msdn.microsoft.com/en-us/library/ms751709.aspx

Artigo do MSDN Library sobre painéis (Grid, StackPanel, etc.) - http://windowssdk.msdn.microsoft.com/en-us/library/ms754152.aspx


 

©2016 Microsoft Corporation. Todos os direitos reservados. Entre em contato |Nota Legal |Marcas comerciais |Política de Privacidade
Microsoft