Páginas

5 de jun. de 2014

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


Nenhum comentário:

Postar um comentário