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> 

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/

Ver Também

Outro importante lugar onde pode encontrar uma enorme quantidade de artigos relacionados com Windows Phone é a própria TechNet Wiki. Onde o melhor ponto de entrada é Recursos Windows Phone no TechNet Wiki!