Nota: [artigo originalmente publicado em: http://evenancio.wordpress.com/2011/11/26/entendendo-os-panels-um-exemplo/   ]

Este é uma série de artigos em quatro partes. Leia o que foi escrito sobre Canvas, Stack Panel e sobre Grid.

Vamos ver um exemplo de um layout mesclando todos os painéis nativos que vimos até agora?

<Grid x:Name="LayoutRoot" Background="AliceBlue" Height="600" Width="600">        
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
 
    <Canvas Grid.Row="0">
        <TextBlock Canvas.Top="20" Canvas.Left="20" Text="Logo" 
                   FontWeight="Bold" FontSize="40" />
        <Border Canvas.Top="20" Canvas.Left="250" 
                Background="Yellow" Height="60" Width="300">
            <TextBlock Text="Banner" HorizontalAlignment="Center" 
                       VerticalAlignment="Center" />
        </Border>                
    </Canvas>
 
    <StackPanel Orientation="Horizontal" Grid.Row="1" Background="Black">
        <TextBlock Margin="20" Foreground="White" 
                   Text="File" FontSize="20" />
        <TextBlock Margin="20" Foreground="White"
                   Text="|" FontSize="20" />
        <TextBlock Margin="20" Foreground="White" 
                   Text="Editar" FontSize="20" />
        <TextBlock Margin="20" Foreground="White" 
                   Text="|" FontSize="20" />
        <TextBlock Margin="20" Foreground="White" 
                   Text="View" FontSize="20" />
        <TextBlock Margin="20" Foreground="White" 
                   Text="|" FontSize="20" />
        <TextBlock Margin="20" Foreground="White" 
                   Text="Projeto" FontSize="20" />
    </StackPanel>
        
    <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
            
        <TextBlock Margin="10" Grid.Column="0" TextWrapping="Wrap">
            <Run FontSize="30" Foreground="Blue" 
                 FontWeight="Black">Título do Post</Run>
            <LineBreak />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            Maecenas porttitor congue massa. Fusce posuere, magna sed 
            pulvinar ultricies, purus lectus malesuada libero, sit amet 
            commodo magna eros quis urna. Nunc viverra imperdiet enim. 
            Fusce est. Vivamus a tellus. Pellentesque habitant morbi 
            tristique senectus et netus et malesuada fames ac turpis 
            egestas. Proin pharetra nonummy pede. Mauris et orci. 
            Aenean nec lorem.
            <LineBreak />
            <LineBreak />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            Maecenas porttitor congue massa. Fusce posuere, magna sed 
            pulvinar ultricies, purus lectus malesuada libero, sit amet 
            commodo magna eros quis urna. Nunc viverra imperdiet enim. 
            Fusce est. Vivamus a tellus. Pellentesque habitant morbi 
            tristique senectus et netus et malesuada fames ac turpis 
            egestas. Proin pharetra nonummy pede. Mauris et orci. 
            Aenean nec lorem.
            <LineBreak />
            <LineBreak />
            <Run FontSize="20" Foreground="Blue">Sub-seção</Run>
            <LineBreak />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
            Maecenas porttitor congue massa. Fusce posuere, magna sed 
            pulvinar ultricies, purus lectus malesuada libero, sit amet 
            commodo magna eros quis urna. Nunc viverra imperdiet enim. 
            Fusce est. Vivamus a tellus. Pellentesque habitant morbi 
            tristique senectus et netus et malesuada fames ac turpis 
            egestas. Proin pharetra nonummy pede. Mauris et orci. 
            Aenean nec lorem.
        </TextBlock>
            
        <StackPanel Grid.Column="1" Background="Gray"  >
            <TextBlock Margin="10 0 0 0" Text="Veja mais em" 
                       FontSize="16" FontWeight="Bold" Foreground="White" />
            <TextBlock Margin="10 0 0 0" 
                       Text="blah blah blah" Foreground="White" />
            <TextBlock Margin="10 0 0 0" 
                       Text="blah blah blah" Foreground="White" />
            <TextBlock Margin="10 0 0 0" 
                       Text="blah blah blah" Foreground="White" />
            <TextBlock Margin="10 0 0 0" 
                       Text="blah blah blah" Foreground="White" />
            <TextBlock Margin="10 0 0 0" 
                       Text="blah blah blah" Foreground="White" />
            <TextBlock Margin="10 0 0 0" 
                       Text="blah blah blah" Foreground="White" />
        </StackPanel>
    </Grid>        
</Grid>

Este é o resultado:

Conclusão

Com Silverlight tudo é mais fácil e organizado. Utilize-o no seu dia-a-dia e verá que a curva de aprendizado é pequena para realizar coisas poderosas. Fora que seu aprendizado valerá não só para aplicações web, mas também para aplicações Out-Of-Browser e aplicações para Windows Phone 7 – a qual todos os conceitos podem ser aplicados.

Espero que vocês tenham gostado da série de artigos a respeito dos Panels.

Até a próxima!

Este artigo foi originalmente escrito por: