Layout no Silverlight (Parte 3 de 3)

Grid Panel

O painel do tipo Grid é o painel com layout mais flexível, este painel suporta a organização dos controles tanto no modelo multi linha e multi coluna. O conceito deste painel é muito similar conceitualmente ao elemento Table do HTML.

Ao contrário da Table HTML nós não temos a definição de elementos de linha (TR) e de coluna (TD). neste painel nós podemos definir linhas e colunas usando as propriedades <Grid.RowDefinitions> e <Grid.ColumnDefinitions> que devem ser definidas imediatamente abaixo da declaração XAML <Grid>.

Por exemplo, nós podemos declarar um grid contendo três linhas e três colunas, a seguir podemos então posicionar quatro botões usando o XAML mostrado a seguir:

<UserControl x:Class="MeuSilverlight.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="330" Height="240" >
    <Grid Background="CornflowerBlue">
        <Grid.RowDefinitions>
            <RowDefinition Height="80"/>
            <RowDefinition Height="80"/>
            <RowDefinition Height="80"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="110"/>
            <ColumnDefinition Width="110"/>
            <ColumnDefinition Width="110"/>
        </Grid.ColumnDefinitions>        
        <Button x:Name="MeuBotao1" Content="Botão 1" 
            Height="40" Width="100" 
            Grid.Column="1" Grid.Row="0"/>
        <Button x:Name="MeuBotao2" Content="Botão 2" 
            Height="40" Width="100" 
            Grid.Column="0" Grid.Row="1" />
        <Button x:Name="MeuBotao3" Content="Botão 3" 
            Height="40" Width="100" 
            Grid.Column="2" Grid.Row="1" />
        <Button x:Name="MeuBotao4" Content="Botão 4" 
            Height="40" Width="100" 
            Grid.Column="1" Grid.Row="2"/>            
    </Grid>
</UserControl>

O que podemos obter com esse layout mostrado é:

O grid suporta tamanho absoluto (por exemplo: Height=”60”) também o auto-redimensionamento (Height=”Auto”), com o auto-redimensionamento o tamanho da linha ou da coluna se adapta ao seu conteúdo, há a possibilidade de definir também um tamanho minimo e máximo para estes.

Outra característica útil é que as linhas e colunas possuem uma propriedade chamada “Proportional Sizing” que permite o tamanho de uma linha ou coluna ser definido proporcionalmente em relação a outra.

O painel do tipo Grid proporciona muitas facilidades e muita flexibilidade, sendo assim, o layout mais comum a ser usado.