8º Dia - Layout

Hoje vou falar um pouco sobre layout, que diz respeito ao posicionamento e dimensão de elementos na interface do usuário. O layout pode ser de dois tipos, fixo ou dinâmico.

Layout fixo

  Organiza os elementos filhos em um painel de layout (Grid, StackPanel, Canvas), especificando a localização exata deles relativas ao elemento pai. Todos os painéis tem suporte ao posicionamento fixo, mas o Canvas tem suporte apenas para o posicionamento fixo.

Layout dinâmico

  Organiza os elementos filhos especificando como devem ser organizados entre si, e como desem ser posicionados de acordo com seu conteúdo, podendo ser ajustados verticalmente ou horizontalmente.

6º Dia - StackPanel e Grid

Como prometido na última postagem, hoje pesquisei sobre StackPanel e Grid, vamos lá! Tanto uma Grid como um StackPanel servem para alinhar elementos XAML. Vejamos alguns exemplos:

Grid

Seu alinhamento é baseado em  linhas e colunas.

Código XAML:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="120"></ColumnDefinition>
        <ColumnDefinition Width="280"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"></RowDefinition>
        <RowDefinition Height="100"></RowDefinition>
    </Grid.RowDefinitions>
    <TextBlock Text="Data" FontSize="40" Foreground="White" Grid.Column="0" Grid.Row="0"></TextBlock>
    <TextBlock Text="Palestra" FontSize="40" Foreground="White" Grid.Column="1" Grid.Row="0"></TextBlock>
    <TextBlock Text="18/05/2013" FontSize="20" Foreground="White" Grid.Column="0" Grid.Row="1"></TextBlock>
    <TextBlock Text="Palestra" FontSize="40" Foreground="White" Grid.Column="1" Grid.Row="0" Margin="0,0,-139,0"></TextBlock>
    <TextBlock Text="Primeiros Passos Desenvolvimento Windows 8" FontSize="20" Foreground="White" Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Margin="0,0,-209,0"></TextBlock>
</Grid>

Veja como fica:

Grid

StackPanel

Seu alinhamento é simples: verticalmente ou horizontalmente.

Orientação: Horizontal

Código XAML:

<StackPanel Orientation="Horizontal" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
 <TextBlock Text="Mensagem:" FontSize="50"></TextBlock>
 <TextBox Text="Olá Mundo!!!"Margin="0,15,1118,713"FontSize="20" />
 </StackPanel>

Veja como fica:

StackPanel orientação=Horizontal

Orientação: Vertical

Código XAML

 <StackPanel Orientation="Vertical" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
   <TextBlock Text="Mensagem:" FontSize="50"></TextBlock>
   <TextBox Text="Olá Mundo!!!" Margin="0,15,1118,713"  FontSize="20"/>
 </StackPanel> 

Veja como fica:

StackPanel orientação: Vertical