Layout no Silverlight (Parte 1 de 3)

Gerenciamento do Layout

Silverlight adota um gerenciamento de layout flexível que permite ao desenvolvedor coordenar onde os controles serão posicionados na interface do usuário. Este modelo de layout suporta tanto o modelo de posicionamento fixo onde os controles são posicionados usando coordenadas explicitamente, como o modelo de posicionamento dinâmico onde o layout se ajusta automaticamente quando o browser é redimensionado.

Os desenvolvedores podem usar painéis para coordenar o redimensionamento dos controles contidos nestes. Neste post irei abordar o painel Canvas.

Canvas

O painel do tipo Canvas é o tipo básico de painel de layout que suporta o posicionamento de controles utilizando coordenadas explicitas.

O posicionamento dos elementos em um Canvas é feito através do recurso chamado “Attached Properties” que permitem especificar a posição do controle relativamente ao seu Canvas pai. Desta forma ao definirmos as propriedades Left, Top, Right ou Bottom de um controle interno do Canvas estamos definindo estas propriedades explicitamente em relação ao Canvas que os contém.

Neste exemplos iremos adicionar dois botões a um Canvas e posicionaremos estes botões a 50 pixels da esquerda e 150 pixels do topo. Para isto usaremos o XAML mostrado a seguir:

<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">
        <Canvas>
            <Button x:Name="MeuBotao1" Content="Botão 1"
                    Height="50" Width="150"
                    Canvas.Left="50" Canvas.Top="50">
            </Button>
            <Button x:Name="MeuBotao2" Content="Botão 2"
                    Height="50" Width="150"
                    Canvas.Left="50" Canvas.Top="150">
            </Button>
        </Canvas>
    </Grid>
</UserControl>

O resultado obtido com a execução deste exemplo será:

O Canvas é muito útil em cenários onde os elementos da interface não se movem ou não sofrem redimensionamento. Com isto temos maior controle sobre o posicionamento destes controles mas por outro lado a interface fica pouco flexível e difícil de manipular em cenários onde a interface precisa ser redimensionada por exemplo.