Introdução

Para você criar um layout qualquer dentro do Silverlight deverá, obrigatoriamente, arranjar os seus objetos dentro de um ou mais painéis (Panels). Os painéis funcionam como uma espécie de container para hospedar os seus objetos, sendo que os mesmos disponibilizam propriedades que permitem você posicionar os seus objetos da maneira como achar mais conveniente.

Inclusive você pode criar os seus painéis customizados e utilizá-los sozinhos ou em combinação com outros já existentes, porém vamos falar agora dos painéis que vem disponível com o Silverlight: o Canvas, o StackPanel e a Grid.

Canvas

O Canvas é um painel que deixa você movimentar seus objetos livremente dentro dele. O nome do objeto, inclusive, é inspirado pela possibilidade você ter uma folha em branco e um lápis – ou seja, tem total liberdade para fazer o que bem desejar.

Para isto o Canvas disponibiliza algumas Attached Properties para seus objetos:

• Canvas.Top: o padrão é 0, ou seja o desenho como no pixel 0 de onde o Canvas é disponibilizado. A partir dai você pode adicionar pixels para posicionar o seu objeto de cima para baixo. Por exemplo, se um objeto estiver configurado como Canvas.Top=”10″ o Silverlight calculará 10 pixels para baixo e então renderizará o seu objeto.
• Canvas.Left: muito parecido com o Canvas.Top, só que ao invés de calcular de cima para baixo, o Silverlight calcula da esquerda para a direita. Ou seja, um objeto configurado como Canvas.Left=”10″ fará com que o Silverlight contem 10 pixels e somente a partir disto ele renderiza o seu objeto.
• Canvas.ZIndex: esta propriedade configura a prioridade do objeto para exibição em relação aos demais. O padrão é 0. Como se trata de Canvas, você pode posicionar objetos do modo que eles se entrelacem ou mesmo que sobrepõem um ao outro – deste modo você configurar esta propriedade para definir qual o objeto deve aparecer por cima dos demais. Caso esta propriedade não seja configurada, sempre o objeto declarado por último aparecerá por cima de seu antecessor.

Importante salientar que em termos de performance, o Canvas é o que obtém o melhor resultado, visto que os pixels estão declarado de forma explicita – ou seja, o Silverlight não precisará de muito esforço para calcular onde os objetos devem aparecer na tela. Entretanto isto só é significativo numa tela que possui muitos elementos visuais (muitos mesmo), o que dificilmente ocorrerá na prática.

Exemplos

Vamos há alguns exemplos?

<Canvas>
<Rectangle Height=”150″ Width=”150″ Fill=”Blue” />
    <Rectangle Height=”150″ Width=”150″ Fill=”Yellow” />
    <Rectangle Height=”150″ Width=”150″ Fill=”Green” />
</Canvas>

Temos três retângulos idênticos declarados dentro deste layout, com a diferença da coloração interna. O primeiro é azul, o segundo é amarelo e o terceiro é verde. Como isto será exibido? A resposta é um retângulo verde, nada mais.

Isto por que como ele vem por último, ele acaba sobrepondo o amarelo, que por acaba sobrepor o azul.

Agora, vamos mudar o nosso exemplo e repetir a pergunta:

<Canvas>
    <Rectangle Height="150" Width="150" Fill="Blue" />
    <Rectangle Height="150" Width="150" Fill="Yellow" Canvas.ZIndex="1" />
    <Rectangle Height="150" Width="150" Fill="Green" />
</Canvas> 

Respondeu corretamente quem diz que o que aparecerá agora será um retângulo amarelo, visto que o ZIndex dos demais, por padrão, é 0! Logo, quem tem o maior ZIndex é o retângulo amarelo.

Agora vamos mexer um pouco no posicionamento dos objetos.

<Canvas>
    <Rectangle Height="150" Width="150" Fill="Blue"
                Canvas.ZIndex="1" />
    <Rectangle Height="150" Width="150" Fill="Yellow"
                Canvas.ZIndex="2"
                Canvas.Left="50"
                Canvas.Top="100" />
    <Rectangle Height="150" Width="150" Fill="Green"
                Canvas.Left="100"
                Canvas.Top="25" />
</Canvas> 

O resultado é o seguinte:

Veja só que interessante: o retângulo amarelo (ZIndex=”2″) tem prioridade sobre o azul (ZIndex=”1″) que tem prioridade sobre o verde (ZIndex=”0″).