quarta-feira, julho 29, 2009

Silverlight :: Grid

Uma breve introdução ao controle GRID do silverlight.
Bom inicialmente para utilizar o controle é preciso definir as linhas e colunas do grid, abaixo é possivel ver os ROWS e COLUMN DEFINITION que indica as caracteristicas de cada linha e coluna dentro do grid. Por padrão se as linhas e colunas não tiverem altura e largura definidas, serão ajustadas conforme o controle pai.
No meu exemplo utilizei tipos diferentes para as linhas a fim de demonstrar esse comportamento.
A primeirta linha tem altura fixa, a segunda uma altura máxima e a terceira se ajusta com o tamanho restante conforme o comportamento do controle pai.
Para as duas primeiras colunas utilizei o AUTO que vai definir o tamanho conforme o controle filho, já a terceira coluna vai pegar todo o restante da largura.
Sobre os controles, é necesário posicionar cada um dentro do grid. :(
É, pra quem está acostumado com o velho HTML é algo no mínimo estranho, mas ok.
Então para cada controle definimos as caracteristicas Grid.Row e Grid.Column, se em algum controle não for definido, por padrão será colocado o valor zero, posicionando assim na primeira linha e/ou coluna.
<Grid Name="gridCadastro" Background="YellowGreen" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition MaxHeight="60"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0" Text="e-mail"></TextBlock>
<TextBox Grid.Row="0" Grid.Column="1" Width="100" Height="25"></TextBox>

<TextBlock Grid.Row="1" Grid.Column="0" Text="password" VerticalAlignment="Center"></TextBlock>
<TextBox Grid.Row="1" Grid.Column="1" Width="100" Height="25"></TextBox>

<Button Grid.Row="2" Grid.Column="2" Content="GO!" Height="30" ></Button>
</Grid>


E o resultado...