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

O que ha de novo no Silverlight 3

Estou realmente maravilhado com as novidades trazidas pela equipe de desenvolvimento da Microsoft. O Silverlight 3 é realmente incrível, traz tantas inovações que praticamente não se acredita que se está trabalhando nisso a menos de um ano.

O Silverlight 3 vai se utilizar do GPU do computador cliente para fazer sua renderização final, deixando o processador mais livre para outras atividades. Com isso foi introduzido no Silverlight a capacidade de criação de vários efeitos 3D.

Outra novidade é que agora o Silverlight 3 tem a capacidade de fazer Binding UI para UI, como no WPF. Essa era uma das grandes queixas dos desenvolvedores que vinham do WPF para o Silverlight.

Mais uma das novidades que mais está gerando comentário é sobre a funcionalidade que está sendo chamada de OOB, Out of Browser, onde a aplicação pode rodar fora do browser e totalmente off-line. O aplicativo checa por atualizações no seu local de origem e faz o download em background.

Quanto aos controles o Silverlight 3 já conta com algumas novidades. Uma delas é a possibilidade de criar as validações com atributos junto as propriedades do objeto da classe de negócio. A interface fará a leitura desses atributos e fará a geração do formulário automaticamente e com uma rica experiência do usuário.

Você pode conferir essas e mais novidades no blog do Tim Heuer onde ele faz um pequeno resumo de tudo que a equipe preparou para os programadores .NET.

Silverlight 3

O Mix 2009 foi um grande sucesso. Cada session mostrando as maiores novidades na área de programação com as facilidades do framework .NET.

Um dos assuntos que mais me chamou a atenção foi sobre o Silverlight 3, que teve seu beta lançado a poucas semanas atrás.

Você pode conferir todos os videos das sessions deste ano e ainda conferir os videos de tutoriais específicos das novidades do Silverlight 3 diretamente do forum.