Este é uma série de artigos em quatro partes. Leia o que foi escrito sobre Canvas e sobre Stack Panel.
O Grid, provavelmente, vai ser a sua escolha para montar o layout em 90% das vezes. Ele, por exemplo, é o painel definido como LayoutRoot para qualquer página ou User Control por padrão.
Ele funciona de forma muito semelhante ao elemento table do HTML. Você cria uma série de linhas e colunas e insere os objetos nela. Entretanto aqui a coisa é feita de forma mais organizada. Ao invés de sair colocando o conteúdo dentro de TRs eTDs, você define antes as colunas e as linhas e através de Attached Properties você diz a qual linha/coluna o objeto deve ser exibido.
Vamos analisar através de um exemplo? Para isto vamos montar uma layout com quatro linhas e três colunas:
<Grid x:Name="LayoutRoot" Background="AliceBlue" Width="500" Height=500″> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Text="Título da aplicação" HorizontalAlignment="Center" /> <Button Grid.Column=”0″ Grid.Row=”1″ Height=”50″ Width=”50″ Content=”1″/> <Button Grid.Column=”1″ Grid.Row=”1″ Height=”50″ Width=”50″ Content=”2″/> <Button Grid.Column=”2″ Grid.Row=”1″ Height=”50″ Width=”50″ Content=”3″/> <Button Grid.Column=”0″ Grid.Row=”2″ Height=”50″ Width=”50″ Content=”4″/> <Button Grid.Column=”1″ Grid.Row=”2″ Height=”50″ Width=”50″ Content=”5″/> <Button Grid.Column=”2″ Grid.Row=”2″ Height=”50″ Width=”50″ Content=”6″/> <Button Grid.Column=”0″ Grid.Row=”3″ Height=”50″ Width=”50″ Content=”7″/> <Button Grid.Column=”1″ Grid.Row=”3″ Height=”50″ Width=”50″ Content=”8″/> <Button Grid.Column=”2″ Grid.Row=”3″ Height=”50″ Width=”50″ Content=”9″/ </Grid>
O resultado é o seguinte:
Vamos ao que acontece:
Observe que nós declaramos a propriedade <Grid.RowDefinitions> e dentro dela colocamos quatro <RowDefinition/>. Isto significa que a Grid terá quatro linhas. Do mesmo modo definimos as colunas com apenas três.
Nas linhas abaixo nós configuramos as Attached Properties Grid.Row e Grid.Column. Se nós não atribuirmos este valor, o Silverlight irá considerar 0 para a propriedade que deixamos de configurar.
Outro ponto interessante é que no TextBlock nós configuramos uma Attached Property chamadaGrid.ColumnSpan, que é semelhante também o span do Html. Neste caso nós definimos um span de 3 colunas, logo o Silverlight faz merge da primeira linha inteira para o título.
Observe também que os 500 pixels utilizados tanto para a largura como para a altura do Grid(Width e Height) são distribuídos exatamente da mesma forma entre as células. Isto por que não definimos nenhum valor para largura e altura para as células. Logo, é atribuído um valor padrão conhecido como * (asterisco), que faz a divisão por igual.
Mas vamos alterar isto para entendermos melhor o funcionamento.
Altere as Grid.RowDefinitions de:
<Grid.RowDefinitions> <RowDefinition/> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions>
para
<Grid.RowDefinitions> <RowDefinition Height=”auto” /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions>
A propriedade Height configurada como “auto” fará com que a linha a altura necessária para exibir todos os objetos que fazem parte dela. Logo, teremos o seguinte resultado:
Observe que, além da altura da primeira linha ter sido redimensionado apenas para caber os seus objetos, as outras três linhas tiveram o seu conteúdo divido por igual entre elas.
Vamos alterar mais uma propriedade da Grid.RowsDefinitions:
<Grid.RowDefinitions> <RowDefinition Height=”auto” /> <RowDefinition /> <RowDefinition Height=”3*” /> <RowDefinition /> </Grid.RowDefinitions>
A quarta linha pega a altura que havia sido atribuída para si e multiplica por três, diminuindo a altura das demais linhas.
Outro recurso interessante é o GridSplitter, que permite ao usuário redimensionar as colunas e ou linhas de uma forma bem bacana. O GridSplitter é um controle estendido que faz parte do componente System.Windows.Controls. Um bom atalho é abrir a ToolBox e traze-lo para o seuXAML (automaticamente ele importará o namespace – que ficará algo comoxmlns:sdk=”http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk”).
Vamos montar um outro layout apenas para ver na prática o funcionamento deste objeto:
<Grid x:Name="LayoutRoot" Background="AliceBlue" Width="500" Height="500" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <sdk:GridSplitter Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Center" /> <Button Width="50" Height="50" Grid.Column="0" Grid.Row="0" Content="1"/> <Button Width="50" Height="50" Grid.Column="2" Grid.Row="0" Content="2"/> <Button Width="50" Height="50" Grid.Column="0" Grid.Row="1" Content="3"/> <Button Width="50" Height="50" Grid.Column="2" Grid.Row="1" Content="4"/> <Button Width="50" Height="50" Grid.Column="0" Grid.Row="2" Content="5"/> <Button Width="50" Height="50" Grid.Column="2" Grid.Row="2" Content="6"/> </Grid>
<Grid x:Name="LayoutRoot" Background="AliceBlue"
Width="500" Height="500" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<sdk:GridSplitter Grid.Column="1" Grid.RowSpan="3"
HorizontalAlignment="Center" />
<Button Width="50" Height="50" Grid.Column="0" Grid.Row="0" Content="1"/>
<Button Width="50" Height="50" Grid.Column="2" Grid.Row="0" Content="2"/>
<Button Width="50" Height="50" Grid.Column="0" Grid.Row="1" Content="3"/>
<Button Width="50" Height="50" Grid.Column="2" Grid.Row="1" Content="4"/>
<Button Width="50" Height="50" Grid.Column="0" Grid.Row="2" Content="5"/>
<Button Width="50" Height="50" Grid.Column="2" Grid.Row="2" Content="6"/>
</Grid>
Veja que será adicionado um controle que permite que o usuário possa aumentar o diminuir a largura de uma coluna. De maneira semelhante, ele pode criar um GridSplitter para aumentar ou diminuir a altura das linhas. Fonte do artigo original: http://evenancio.wordpress.com/2011/11/18/entendendo-os-panels-grid/