Posicionando elementos na Grid
Para posicionar um elemento na Grid você deve definir em qual linha e coluna o elemento estará. A seguir o código e a imagem com diferentes posicionamentos de elementos de texto:
<TextBlock Grid.Row="0" Grid.Column="0" Text="Texto na linha 0 e coluna 0" FontSize="30"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Texto na linha 1 e coluna 1" FontSize="30"></TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2" Text="Texto na linha 2 e coluna 2" FontSize="30"></TextBlock>
Quando um elemento é maior que o slot em que ele está a visualização do elemento é cortada. Você pode experimentar aumentando a FontSize do TextBlock e ver que o texto aparece cortado dentro dos seus espaços na Grid.
Quando um elemento é maior que seu espaço na Grid você pode definir que ele ocupa mais linhas ou colunas usando as propriedades Grid.RowSpan e Grid.ColumnSpan com o valor em números referente a quantidade de linhas e colunas que o elemento preenche.
A seguir o exemplo em código e imagem referente a dois retangulos coloridos um ocupando duas colunas e o outro duas linhas:
<Rectangle Fill="Red" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"></Rectangle>
<Rectangle Fill="Red" Grid.Row="1" Grid.Column="2" Grid.RowSpan="2"></Rectangle>
Além de posicionar qual linha e coluna estamos colocando o item nós podemos também definir o alinhamento dentro do slot que ele ocupa atravez da propriedade VerticalAlignment. Os valores são: Top, Center, Botom e Stretch. Top é o alinhamento no topo do seu respectivo slot, na borda superior da linha, Center é no meio, Bootom é embaixo, na borta inferior, e Stretch é quando o elemento se alonga para caber dentro do slot.
Também há o HorizontalAlignment que define o alinhamento horintal dentro do slot, os valores Right que alinha a direita, Center que centraliza, Left que alinha a esquerda e o mesmo Stretch da propriedade anterior. A seguir um trecho de código usando essas duas propriedades com os três primeiros valores para elas:
<TextBlock Grid.Row="0" Grid.Column="0" Text="Texto na linha 0 e coluna 0" FontSize="30" VerticalAlignment="Top" HorizontalAlignment="Left"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Texto na linha 1 e coluna 1" FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2" Text="Texto na linha 2 e coluna 2" FontSize="30" VerticalAlignment="Bottom" HorizontalAlignment="Right"></TextBlock>
A seguir o resumo dos exemplos até agora vistos na tela de um Windows Phone:
