3D em Silverlight

Olá pessoal, hoje vou mostrar para vocês um exemplo de como manipular uma imagem em 3D usando Silverlight.

--> Abram o Visual Studio / Silverlight / Phone Application.

--> Agora adicionamos 3 componentes Sliders, 1 Image, e 1 StackPanel, direto da Toobox.

--> Agora precisamos fazer uma organização e adicionar mais código no nosso projeto, mas antes cabem algumas explicações.

• O Slider ele vai nos ajudar a pegar os valores que o usuário vai selecionar, no nosso exemplo, vamos adicionar duas propriedades: O Maximun e o Minimun com valores de "360" e "-360".

A função dessas propriedades é limitar um valor Maximo e Minimo para os Slider, como vamos usar esses valores para locomover uma imagem no mundo 3D usaremos o valor referencia o "360", que como de costume significa uma volta completa no eixo.

OBS: Estamos usando 3 Sliders, pois cada um vai representar o eixo X,Y,Z do plano 3D.

• Clique da na Tag <Image> e busque pela sua imagem no painel do lado direito embaixo.

Depois de adicionado a imagem, vamos para a parte mais importante.

• O StackPanel vai ter a função no nosso projeto de renderizar o plano para que a imagem seja deslocada no eixo, por isso temos que inserir a tag <Image> dentro do StackPanel.

Depois de colocar a imagem dentro do StackPanel, temos que "habilitar" uma propriedade chamada PlaneProjection, é ela a responsável pelo plano. O seu projeto deve estar assim:

O RotationX,Y,Z são os valores responsavéis por fazer "girar" a imagem ou tudo que estiver dentro da StackPanel, eu defini o valor como Zero, pois ela vai ser alterada pelo valor que o usuario selecionar no Slider, mas se você está muito curioso tente botar um valor e veja o resultado ;D.

• Seu Projeto deve estar aparentemente assim:

• Agora vamos dar vida ao nosso projeto indo no arquivo .cs da aplicação.

--> Clique no primeiro Slider e no canto inferior da tela do lado direito habilite o evento ValueChanged.

Faça isso com cada Slider exatamente igual.

• Adicionamos os seguintes códigos:

• Antes de apertamos F5  quero explicar cada linha dessa para vocês.

Chamamos o nosso StackPanel pelo seu nome, no meu caso o "stackVirar", convertemos ele para um tipo PlaneProjection e dizemos que o valor da rotação do eixo X vai ser igual o valor atual do que foi escohido no Slider, como vocês podem ver o evento retorna um valor double, então pegamos esse valor e jogamos no nosso PlaneProjection, a mesma ideia se usa para as outras duas, como vocês podem perceber só mudamos o eixo.

• Apertamos F5 e seu App deve estar igual a esse:

Como vocês puderam perceber eu usei o Slider e mudei a posiçao da imagem no plano 3D.Lembrando que o primeiro Slider controla o eixo X , o segundo, o eixo Y, e o terceiro o eixo Z.

Espero que vocês tenham aprendido e curtido meu tópico, a minha área é mais em 3D, então vou trazer mais posts pra vocês geralmente relacionado a conteúdo 3D no Silverlight.

Ah, toda esse exemplo está disponivel para dowload nesse link. Qualquer dúvida podem perguntar :D

Alison de Andrade - Estudante .NET