Layout no Silverlight (Parte 2 de 3)

Stack Panel

O painel do tipo Stack é o tipo de layout simples que suporta o posicionamento do seu conteúdo tanto em linhas como em colunas. os painéis do tipo Stack são tipicamente usados em cenários onde você pretende organizar uma pequena sub-sessão da interface do usuário na nossa página.

Por exemplo, nós podemos usar o painel Stack para organizar verticalmente três botões na nossa página usando o seguinte XAML:

<UserControl x:Class="MeuSilverlight.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid Background="CornflowerBlue">
        <StackPanel>
            <Button x:Name="MeuBotao1" Content="Botão 1"
                    Height="50" Width="150"
                    Margin="10">
            </Button>
            <Button x:Name="MeuBotao2" Content="Botão 2"
                    Height="50" Width="150"
                     Margin="10">
            </Button>
            <Button x:Name="MeuBotao3" Content="Botão 3"
                    Height="50" Width="150"
                     Margin="10">
            </Button>
        </StackPanel>
    </Grid>
</UserControl>

Em tempo de execução o StackPanel irá automaticamente organizar os controles numa pilha vertical da forma mostrada abaixo:

Desta forma podemos ver que o StackPanel por padrão organiza os controles em coluna, mas alternativamente podemos mudar a propriedade “Orientation” para “Horizontal” ao invés de “Vertical” que é o padrão:

<UserControl x:Class="MeuSilverlight.Page" 
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             Width="510" Height="200">
    <Grid Background="CornflowerBlue">
        <StackPanel Orientation="Horizontal">
            <Button x:Name="MeuBotao1"Content="Botão 1" 
                    Height="50"Width="150" Margin="10">                
            </Button>
            <Button x:Name="MeuBotao2"Content="Botão 2" 
                    Height="50"Width="150" Margin="10">
            </Button>
            <Button x:Name="MeuBotao3"Content="Botão 3" 
                    Height="50"Width="150" Margin="10">
            </Button>
        </StackPanel>
    </Grid>
</UserControl>

O resultado obtido é: