Silverlight :: Grid :: Adicionando componentes dinamicamente

Como nem tudo é alegria na vida de um programador e as vezes temos que adicionar um componente dinamicamente no codigo ou ler um arquivo de um template e criar uma tela apartir dele. Pelo menos sempre tem uma solução :P a um tempo atras desenvolvi um algoritmo que le uma classe ou um xml e cria a tela em tempo de execução. Como os controles do Silverlight são diferentes não foi so migrar o codigo para o Silverlight e pronto. Abaixo um exemplo basico de como criar as linhas e colunas e adicionar no Grid, comentado no post anterior.

gridCadastro.ColumnDefinitions.Add(new ColumnDefinition());
gridCadastro.RowDefinitions.Add(new RowDefinition());

TextBox txt = new TextBox();
TextBlock lbl = new TextBlock();

//label
lbl.Text = "e-mail";
lbl.SetValue(Grid.RowProperty, 0);
lbl.SetValue(Grid.ColumnProperty, 0);
lbl.HorizontalAlignment = HorizontalAlignment.Left;

//textbox
txt.MaxLength = 30;
txt.Width = 100;
txt.Name = "txtEmail";
txt.SetValue(Grid.RowProperty, 0);
txt.SetValue(Grid.ColumnProperty, 1);
txt.HorizontalAlignment = HorizontalAlignment.Left;

gridCadastro.Children.Add(lbl);
gridCadastro.Children.Add(txt);

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...