Imitando efeito 3D no Silverlight

Introduzidos na versão 3 do Silverlight os efeitos de projeção (Projection) podem passar desapercebidos como se fossem reais efeitos 3D.

Na verdade o que acontece é que o Silverlight traduz o objeto de projeção em formas matemáticas que aplicadas nas transformações de layout fazem com que elementos pareçam 3D.

Jeff Prosise mostra neste artigo da MSDN que é possível até mesmo na versão 2 do Silverlight apenas usando RenderTransform.

Mas a minha ideia hoje é mostrar do jeito mais fácil, sem todos esses cálculos e tal. Então vamos direto ao assunto.

UIElement.Projection

A propriedade Projection é onde vamos trabalhar. Nela podemos ver várias propriedades que irão afetar a renderização final de um elemento de interface.

Esta propriedade é do tipo System.Windows.Media.Projection que é uma classe abstrata. Até hoje existem duas implementações concretas no Silverlight: PlaneProjection e Matrix3DProjection.

A Matrix3DProjection permite que se escreva detalhadamente a matriz 3D que se quer desenhar, dificultando um pouco para quem não tem grandes noções do assunto.

Já a PlaneProjection permite que possamos definir um grupo de 12 propriedades de fácil entendimento. São elas:

• RotationX 
• RotationY
• RotationZ
• CenterOfRotationX
• CenterOfRotationY
• CenterOfRotationZ
• GlobalOffsetX
• GlobalOffsetY
• GlobalOffsetZ
• LocalOffsetX
• LocalOffsetY
• LocalOffsetZ

Digamos que seja 3D for newbies.

Vamos começar com um exemplo bem simples. Vamos girar um border 45 graus nos eixos x e y e z com o código abaixo (resumido):

<Border Name="border1">
  <Border.Projection>
    <PlaneProjection RotationY="45"
             RotationX="45"
             RotationZ="45" />
  </Border.Projection>
  <TextBox Text="Para Cima">
  </TextBox>
</Border>

E o resultado podemos conferir na imagem logo abaixo:

Coloquei um texto dentro só para termos um ideia de como o efeito é transmitido para os elementos filhos. Também podemos notar que o TextBox continua 100% funcional.

Mas não para por aí. A classe PlaneProjection tem várias DependencyProperties e isso quer dizer que podemos fazem Binding com elas.

Além disso também podemos aplicar animações a essas propriedades aumentado ainda mais o nível de experiência do usuário.

No exemplo abaixo Neste exemplo você pode clicar no botão para ver a animação nos controles em ação. Também pode alterar os valores dos Sliders alterando a posição da caixa vermelha.

Isso é só uma pequena demonstração do que pode ser feito. Tente em casa.

Aqui está o código fonte deste exemplo. E não, eu não me preocupei com o layout, só em passar o conhecimento. Este blog não e de Design. =D

Enjoy